JavaScript中获取元素的方式
获取元素
1.getElementById获取元素
返回一个元素对象
<body>
<div id="time">2022-3-26</div>
<script>
//参数id 是大小写敏感的字符串
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);//打印返回的元素对象，更好查看里面的属性和方法
</script>
</body>
2.getElementsByTagName获取元素
<body>
<ul>
<li>我是大帅比1</li>
<li>我是大帅比2</li>
<li>我是大帅比3</li>
<li>我是大帅比4</li>
</ul>
<ol id="i">
<li>我不是大帅比</li>
<li>我不是大帅比</li>
<li>我不是大帅比</li>
<li>我不是大帅比</li>
<li>我不是大帅比</li>
</ol>
<script>
//返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis=document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//我们想要打印里面的元素对象，我们可以遍历数组
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//只有一个li，仍然是伪数组
//如果页面中没有这个元素，返回空的伪数组
//出现两组li了，如何避免出错
var list=document.getElementById('i');
console.log(list.getElementsByTagName('li'));//获取父元素内部所有指定标签的子元素
</script>
</body>
3.H5新增获取元素方式
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
(1)getElementsByClassName 根据类名获取某些元素集合
var bos=document.getElementsByClassName('box');
console.log(bos);
(2)querySelector 返回指定选择器的第一个元素对象
var firstbox=document.querySelector('.box');
console.log(firstbox);
var nav=document.querySelector('#nav');
console.log(nav);
(3)querySelectorAll() 返回指定选择器的所有元素对象的集合
var allBox=document.querySelectorAll('.box');
console.log(allbox);
var lis=document.querySelectorAll('li');
console.log(lis);
4.获取特殊元素
<body>
<script>
//1.获取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);
//2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
</body>
浙公网安备 33010602011771号