目录
DOM树
总结：
获取元素
根据ID获取
根据标签名获取元素
根据类名获取元素集合
获取指定选择器第一个元素
根据指定选择器返回所有元素
获取特殊元素
DOM树
又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
总结：
文档：一个页面就是一个文档，DOM中使用document表示。
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
DOM把以以上内容都看做成对象。
获取元素
我们想要操作页面上的某部分(显示/隐藏)，就要获取到该部分对应的元素，再对其进行操作，才能得到效果。
根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
//html <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // console.dir打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); </script>
根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
//html <ul> <li>路遥知马力，日久见人心</li> <li>路遥知马力，日久见人心</li> <li>路遥知马力，日久见人心</li> <li>路遥知马力，日久见人心</li> <li>路遥知马力，日久见人心</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 元素 var navLis = nav.getElementsByTagName('li'); console.log(navLis); </script>
注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
根据类名获取元素集合
(Html5新增) getElementsByClassName(‘类名’) 根据类名获得某些元素集合。 document.getElementsByClassName(“box”);
获取指定选择器第一个元素
(Html5新增) querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 “.” “#”。 document.querySelector('.box'); document.querySelector('#box'); document.querySelector(‘li’);
根据指定选择器返回所有元素
(Html5新增) querySelectorAll()返回指定选择器的所有元素对象集合。 document.querySelectorAll('.box'); document.querySelectorAll('li);
获取特殊元素
document.body //返回body元素 document.documentElement //返回HTML元素
