目录

DOM树

总结：

获取元素

根据ID获取

根据标签名获取元素

根据类名获取元素集合

获取指定选择器第一个元素

根据指定选择器返回所有元素

获取特殊元素

DOM树

又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

总结：

文档：一个页面就是一个文档，DOM中使用document表示。

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

DOM把以以上内容都看做成对象。

获取元素

我们想要操作页面上的某部分(显示/隐藏)，就要获取到该部分对应的元素，再对其进行操作，才能得到效果。

根据ID获取

语法：document.getElementById(id)

作用：根据ID获取元素对象

参数：id值，区分大小写的字符串

返回值：元素对象 或 null

//html

2019-9-9

 根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')

作用：根据标签名获取元素对象

参数：标签名

返回值：元素对象集合（伪数组，数组元素是元素对象）

//html

    


        
路遥知马力，日久见人心

        
路遥知马力，日久见人心

        
路遥知马力，日久见人心

        
路遥知马力，日久见人心

        
路遥知马力，日久见人心

    

    


        
超链接

        
超链接

        
超链接

        
超链接

        
超链接

注意：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元素