目录
一、根据根据ID获取getElementById
注意:
1.因为我们文档页面从上往下加载,所以先得有标签所以我们script写到标签的下面
2.get 获得element 元素by 通过驼峰命名法
3.参数id是大小写敏感的字符串
4.返回的是一个元素对象
5.console.dir打印我们返回的元素对象更好的查看里面的属性和方法
<body>
<div id='time'>2021-12-21</div>
<script>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>
</body>
运行结果如下:
二、根据标签名获取getElementsByTagName
1.返回的是获取过来元素对象的集合以伪数组的形式存储的
2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
3. element.getElementsByTagName()可以得到这个元素里面的某些标签
<body>
<ul>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
<li>123456789</li>
</ul>
<ul id='nav'>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
<li1>aaaaaa</li1>
</ul>
<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]);
}
var nav = document.getElementById('nav');
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
运行结果如下:
三、通过HTML5新增方法获取
1.getElementsByClassName( )根据类名获得某些元素集合
2.querySelector( )返回指定选择器的第一个对象,里面的选择器需要加符号
3.querySelectorAll( )返回指定选择器的所有元素对象集合
通过下面的代码一起了解一下
<body>
<div class="box">盒子</div>
<div class="box">产品</div>
<div id='nav'>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
var allbox = document.querySelectorAll('.box');
console.log(allbox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
运行结果如下:
四、获取特殊元素
1.document.body//返回body元素对象
2.document.documentElement//返回html元素对象
<body>
<script>
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
</body>
运行结果如下: