JavaScript操作DOM

一、什么是DOM

DOM是W3C（万维网联盟）的标准。

DOM定义了访问HTML和XML文档的标准：“W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”。

W3C DOM标准被分为3个不同的部分：

• 核心DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对XML文档的标准模型
• HTML DOM - 针对HTML文档的标准模型

HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

二、什么是DOM节点

在HTML DOM中，所有事物都是节点。

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个HTML元素是元素节点
• HTML元素内的文本是文本节点
• 每个HTML属性是属性节点
• 注释是注释节点

HTML DOM将HTML文档视作树结构。这种结构被称为节点树。

Node(节点)是DOM层次结构中的任何类型对象的通用名称，Node有很多类型，如元素节点、属性节点、文本节点、注释节点等，通过nodeType区分。

三、节点树与元素树

从上面不难理解节点树。Element继承了Node类，也就是说Element是Node多种类型中的一种，即当nodeType为1时Node即为ElementNode。元素树不会把标签之间的空格当成文本节点。

元素节点的属性：

1. firstElementChild
2. lastElementChild
3. nextElementSibling
4. previousElementSibling
5. childElementCount 子元素节点数量

四、DOM对象的属性

1. parentNode
2. childNodes
3. firstChild
4. lastChild
5. nextSibling
6. previousSibling
7. nodeType 节点的类型，1代表Element节点，2代表属性节点，3代表Text节点，8代表Comment节点，9代表Document节点，11代表DocumentFragment节点。
8. nodeValue Text节点或Comment节点的文本内容。
9. nodeName 元素的标签名，以大写形式表示。

五、DOM对象的方法

1. getElementById()
2. getElementsByTagName()
3. getElementsByClassName()
4. getElementsByName()
5. document.querySelector()
6. document.querySelectorAll()
7. getAttribute()
8. setAttribute()
9. createAttribute()
10. createElement()
11. createTextNode()
12. appendChild()
13. insertBefore()
    
14. removeChild()
15. replaceChild()
16. hasChildNodes()  返回一个布尔值，指示元素是否有子元素

六、DOM对象的事件

HTML DOM允许JavaScript 对HTML事件作出反应，事件在此省略。

七、获取DOM对象

访问HTML元素等同于访问节点。

可以通过5种方式6个方法获取DOM节点：

1. 通过id：getElementById()方法
2. 通过标签名：getElementsByTagName()方法
3. 通过类名：getElementsByClassName()方法
4. 通过name属性：getElementsByName()方法
5. 通过CSS选择器：document.querySelector()方法、document.querySelectorAll()方法

八、操作HTML属性

1. getAttribute()
2. setAttribute()

也可以通过“node.属性名”的方式读取和设置属性。注意，有些HTML属性名称在JavaScript中是保留字，规则是在属性名前加html，如lable中的for=>htmlfor，但是有一个例外：class=>className。

九、创建节点

1. createAttribute()
2. createElement()
3. createTextNode()

十、插入节点

1. appendChild()
2. insertBefore()

十一、删除节点

1. removeChild()

十二、替换节点

1. replaceChild()

十三、操作CSS

通过元素的style属性可以随意读取和设置元素的CSS样式