JS

1、DOM

1.1 文档对象模型

DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中所有标签都是元素，DOM中使用element表示
• 节点：网页中所以内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

2、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

2.2 根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

HTML DOM 定义了多种查找元素的方法，除 getElementById() 外，还有 getElementsByName() 和getElementsByTagName()。

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

2.3 根据标签名来获取元素

使用getElementByTagName()方法可以返回带有标签名的对象集合。

document.getElementByTagName("标签名");
遍历

for(var i = 0;i<lis.length;i++){

console.log(lis);

}

注意：

• 返回的是获取过来元素对象的集合，以伪数组的形式存储
• 我们想要依次打印里面的元素对象可以采取遍历的方式
• 如果页面中只有一个li标签，返回的还是一个伪数组的形式
• 如果页面中没有这个元素，返回的是一个空的伪数组

还可以获取某个父元素内部所有指定标签名的子元素

2.4 使用html5新增的方法获取

1.document.getElementsByClassName('类名') ； //根据类名获取某些元素集合

2.document.querySelector(''选择器“); //根据指定选择器返回第一个元素对象

3.document.querySelectorAll(''选择器“); //根据指定选择器返回所有元素对象

4.获取body元素

document.body;

5.获取html元素

document.documentElement；