DOM文档对象模型

一．简介

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指  JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

二. 节点

1. 节点Node，是构成我们网页的最基本的组成部分，网页中每一个部分都可以下称为是一个节点。
2. 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
3. 虽然都是节点，都是实际上他们的具体类型是不同的。
4. 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
5. 节点的类型不同，属性和方法也都不尽相同。

• 节点的属性：nodeName节点名称 nodeType 节点类型 nodeValue节点的值

1.文档节点(document):

①文档节点document， 代表的是整个HTML文档，网页中的所有节点都是它的子节点。

②document对象作为window对象的属性存在的，我们不用获取可以直接使用。

③通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象

三. 元素节点(Element)

①HTML中的各种标签都是元素节点，这也是我们常用的一个节点。

②浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

③比如:document.getElementById（），根据id属性值获取一个元素节点对象。

四. 文本节点(Text)

①文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本的是文本节点。

②它包括可以字面解决的纯文本内容

③文本节点一般是作为元素节点的子节点存在的。

④例如：元素节点.firstChild；获取元素节点的第一个子节点，一般为文本节点。

4.属性节点(Attr)

①属性节点表示的是标签中的一个属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

②可以通过元素节点来获取指定的属性节点。

③例如：元素节点.getAttributeNode(“属性名”)；

五 .获取节点

1.获取元素节点的子节点，通过具体的元素节点调用

①getElementsByTagName()方法，返回当前节点的指定标签名后代节点。

②childNodes属性，表示当前节点的所有字节点。

③firstChild属性，表示当前节点的第一个子节点。

④lastChild属性，表示当前节点的最后一个子节点。

2.获取父节点和兄弟节点，通过具体的元素节点调用

①parentNode属性，表示当前节点的父节点。

②previousSibling属性，表示当前的前一个兄弟节点。

③nextSibling属性，表示当前节点的后一个兄弟节点。

3.元素节点的属性

①获取:元素对象.属性名。例：element.value  element.id   element.className

②设置，元素对象.属性名=新的值。例：element.value = "hello"   element.id="id01" element.className = "newClass"

4.其他属性

①nodeValue  – 文本节点可以通过nodeValue属性获取和设置文本节点的内容

②innerHTML  – 元素节点通过该属性获取和设置标签内部的html代码

• 使用CSS选择器进行查询

querySelector()和querySelectorAll()

①这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。

②不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

六. 节点的修改

这里的修改我们主要指对元素节点的操作

①创建节点 – document.createElement("标签名")

②删除节点 – 父节点.removeChild(子节点)

③替换节点 – 父节点.replaceChild(新节点 , 旧节点)

④插入节点 – 父节点.appendChild(子节点)和 – 节点.insertBefore(新节点 , 旧节点)