DOM的相关知识

一、DOM

1.DOM：Document Object Model,文档对象模型，将html文档看做是一颗文档树，树的根部是html

2.Web API：JavaScript中的BOM和DOM就是典型的web API

3.DOM的核心：document对象。在DOM中所有的标签、属性、标签的文本都是节点

（1）文档（document）：一个HTML页面就是一个文档

（2）元素（element）：页面中的标签

（3）节点（node）：标签、标签的属性、标签的文本等。所有的节点都是对象，都有自己的属性和方法

节点的类型：1（标签）、2（属性）、3（文本）

4.在Javascript中通过document获取页面的元素

（1）document.getElementById('id'):通过标签的id属性值来获取

（2）document.getElementByClassName('class'):通过标签的class属性值可以重复，所以该函数返回的是一个集合（HTML.Collection）。可以将该集合当作数组来访问，但是它的本质不是数组（伪数组），不能使用push添加元素

（3）document.getElementByTagName('标签名')：通过标签名获取标签，返回值也是一个集合（HTML Collection）

（4）document.getElementByName('name'):通过标签的name属性获取，返回值NodeList(集合)

5.H5中获取标签的方法：（部分老版本浏览器不支持这些方法）

(1) document.querySelector

a.通过标签的id属性获取：document.querySelector('#id')

b.通过标签的class属性获取：document.querySelector('.class'):class属性可以重复，获取第一个标签

c.通过标签名获取：document.querySelector('标签名')，标签名会有多个，获取的是第一个标签

(2) document.querySelectorAll:用来获取多个标签，返回值的类型为NodeList

a. document.querySelectorAll('class'):获取所有的class属性值相同的元素

b. document.querySelectorAll('标签名'):获取所有标签名相同的元素

二、document对象的属性

1. document.body:返回文档的body元素

2. document.documentElement:返回文档的HTML元素

3. document.images:返回文档中的所有img,结果的类型是HTMLCollection

4. document.forms:返回文档中的所有form,结果的类型是HTMLCollection

三、页面元素的内容

1. innerHTML属性：用来设置或返回元素的开始标签和结束标签之间的html（可以包含标签），不识别空格

2.innerText属性：用来设置或返回元素中除了标签以外的文本。不识别回车换行

3.textContent属性：用来设置或返回元素中除了标签以外的文本。识别空格和换行

4.write（）方法：

四、元素的属性

1.attribute属性：返回的是元素的属性集合

2.setAttribute(属性名，属性值)：设置属性的值

3.getAttribute(属性名)：获取属性值

4.removeAttribute(属性名)：移除元素的属性

五、元素的样式：CSS样式

1.设置方式：元素名.style.样式属性名 = 属性值

注意：若样式属性名为两个单词，需要将'-'去掉，将’-‘后边的第一个字母大写

2.H5中新增加新的属性：classList(表示元素的class属性值的列表)

3.classList属性下的方法：

（1）add('类名'):给元素添加一个类名（class属性）,'类名'表示class属性的值，一次只能添加一个

（2）remove('类名')：删除元素的类名（一次只能删除一个）

        变量名或函数名不要使用'name',原因是'name'常用做关键字

        input和button没有 放在form中

六、DOM节点的操作

1.获取节点：

（1）firstChild:当前节点的第一个子节点

（2）lastChild:当前节点的最后一个子节点

（3）nodeName:当前节点的名称

（4）nodeType:当前节点的类型

（5）nodeValue:当前节点的值

（6）nodeSibling:同一层级中当前节点之后紧跟着的节点

（7）perviousSibling:指定节点的前一个节点

（8）parentNode:当前节点的父节点

（9）childNodes:当前节点的所有子节点的集合

（10）children:当前节点的所有子元素的集合

2.追加节点

（1）创建元素节点：document.createElement('标签名')

（2）创建元素节点：document.createTextNode('文本')

（3）添加子节点：节点名.appenChild()

（4）在指定节点之前插入节点：insertBefore()——Element

（5）删除子节点：removeChild()