根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
console.dir() 打印属性与方法；
注意：这个只能获取文档的元素，不能获取指定父元素的标签,即前面的元素只能是document,不能是其他的；
根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
<body>
<ul>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久22</li>
<li>知否知否，应是等你好久33</li>
<li>知否知否，应是等你好久44</li>
<li>知否知否，应是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素，记住，这个地方只能通过Id的方式或者querySelector()来获得父元素；
而用document.getElementsByTagName（）和document.querySelectorAll()以及document.getElementsByClassName()获得的元素都是伪数组的形式，而不是单纯的父元素，所以没法用于指定的父元素获取子元素，但是也可以用数组的形式获得，比如
var chars = document.getElementsByTagName('div');
var a = chars[0].getElementByClassName('box');
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。如果没有获取到元素，返回的是一个空数组；
3. H5新增获取元素方式
document.getElementsByClassName();
document.querySelector();
document.querySelectorAll();
document.getElementsByClassName('类名')；注意这里的类名直接写就可以了，不要加符号；
4 获取特殊元素（body，html）
document.body;
document.documentElement;
|
|
收藏
淘帖
踩
