JavaScript DOM

1.1 DOM概述

DOM： 文档对象模型，当网页文档加载到浏览器内存时，浏览器会为文档生成一个对应的文档对象，

同时会解析这个文档中的所有内容，所有的成分都是一个节点，每个节点都是一个对象。

DOM 是这样规定的：

• 整个文档是一个文档节点

• 每个 XML 标签是一个元素节点

• 包含在 XML 元素中的文本是文本节点

• 每一个 XML 属性是一个属性节点

• 注释属于注释节点

补充：

XML文档： 可扩展标记语言， 这种文档以标签来描述数据的，而且可以自定义标签

HTML文档： 超文本标记语言，它是XML的子集，不能自定义标签

1.2 节点树

DOM文档会被浏览器解析为一个节点树，节点之间有等级关系：

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

• 在节点树中，顶端的节点成为根节点

• 根节点之内的每个节点都有一个父节点

• 节点可以有任何数量的子节点

• 叶子是没有子节点的节点

• 同级节点是拥有相同父节点的节点

1.3 访问节点

XML DOM：HTMLCollection getElementsByTagName() 根据标签的名称可以获取到DOM节点集合，HTML DOM 继承了

每个节点都是Node的对象，每个节点对象都有nodeName、nodeValue、nodeType属性

元素节点的三个属性的值是什么：

访问方式： document.getElementsByTagName parentNode firstChild lastChild childNodes

nodeName: 标签名

nodeType: 1

nodeValue： null

属性节点的三个属性的值是什么：

访问方式： 元素节点.getAttribute("属性名称")

nodeName: 属性名称

nodeType: 2

nodeValue： 属性的值

文本节点的三个属性的值是什么：

访问方式： 元素节点.textContent(文本内容) 、 firstChild

nodeName: #text 固定

nodeType: 3

nodeValue： 文本内容本身

注释节点：

访问方式：

nodeName: #comment 固定

nodeType: 8

nodeValue： null

文档节点的三个属性的值是什么：

访问方式： document 对象

nodeName: #document 固定的

nodeType: 9

nodeValue： null

1.4 HTML DOM 常用属性和方法

Node节点对象

 Element元素节点对象

Attr属性节点对象

元素节点 textContent属性可以设置或获取纯文本内容，HTML标签不会被浏览器解析

createElement('元素名称') 创建元素节点 这个方法继承自XML DOM

appendChild(新的元素节点) 在某个元素节点内最后添加新的节点对象

innerHTML属性： 设置或获取元素节点的文本内容，HTML标签会被浏览器解析

getElementById()： 根据元素的Id获取元素对象

getElementsByClassName() : 根据元素的class属性的值（类名）获取一组元素节点对象

getElementsByTagName() : 根据标签名称获取一组元素节点对象

getElementsByName() : 根据标签的name属性的值获取一组元素节点对象

firstChild: 获取某个元素的第一个子节点

replaceChild(新的节点, 旧的节点) : 用新的节点替换老节点

ES6提供了新的API

querySelector(’选择器‘) ： 根据指定的选择器获取第一个元素节点对象

querySelectorAll('选择器') ： 根据指定的选择器获取匹配的所有节点对象

1.5 DOM提供的9大内置对象

Array内置对象：

数组对象1.concat(数组对象2) ： 拼接数组并返回拼接后的新数组

数组对象.join('连接符号') : 将数组的元素用指定的连接字符串进行拼接，并返回拼接后的字符串

数组对象.pop() : 删除并返回数组的最后一个元素

数组对象.push(数据) : 向数组的末尾添加一个或更多元素，并返回新的长度

数组对象.reverse() : 颠倒数组中元素的顺序。

数组对象.shift() : 删除并返回数组的第一个元素

数组对象.unshift() : 向数组的开头添加一个或更多元素，并返回新的长度

数组对象.slice() : 可从已有的数组中返回选定的元素。

数组对象.splice() : 可以删除元素和添加元素

数组对象.sort()： 对数组的数据进行排序