文档对象模型 (DOM) 将 web 页连接到脚本或编程语言。通常这意味着 javascript, 但将 HTML、SVG 或 XML 文档建模为对象不是 javascript 语言的一部分。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。
尽管通常会使用 JavaScript 来访问 DOM， 但它并不是 JavaScript 的一部分，它也可以被其他语言使用。
DOM的基本类型
Node类型
Js中所有节点类型都继承自Node类型，因此所有节点都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点类型。
Node.ELEMENT_NODE 1 一个 元素 节点，例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字
Node.PROCESSING_INSTRUCTION_NODE 7 一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?> 声明。
Node.COMMENT_NODE 8 一个 Comment 节点。
Node.DOCUMENT_NODE 9 一个 Document 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE 11 一个 DocumentFragment 节点
2.4.5.6.12已被弃用尽量不要使用。
Document类型
js通过Document表示类型文档。在浏览器中document对象是HTMLDocument的一个实例，表示整个HTML页面。document是window中一个属性可以当作全局变量访问。
Document有下面的特性：
nodeType为9
nodeName为#document
nodeValue为null
parentNode为null
子节点可能是一个DocumentType或Element
Element类型
Element类型用于表现HTML元素，提供对元素标签名、子节点及特性访问。
Element有下面几条特性：
nodeType为1
nodeName为元素标签名，tagName也是返回标签名
nodeValue为null
parentNode可能是Document或Element
子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference
Text类型
文本节点用Text表示，包含的是可以照字面解释的纯文本内容。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。
Text有下面的特性：
nodeType为3
nodeName为#text
nodeValue为文本内容
parentNode是一个Element
没有子节点
Comment
注释在DOM中通过Comment类型来表示的。
Comment节点具有以下特征：
nodeType为8
nodeName为#comment
nodeValue为注释的内容
parentNode可能是Document或Element
没有子节点
DocumentType类型
DocumentType包含着与文档doctype有关的信息。
nodeType值为10；
nodeName的值为doctype的名称；
nodeValue的值为null；
parentNode的值为null；
parentNode是Document；
没有子节点；
DocumentFragment
在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段（DocumentFragment）是一种轻量级的文档，可以包含和控制节点，但不会像完整文档那样占用额外资源。
可以将他当作仓库，在里面保存将来可能会添加到文档中的节点。
DocumentFragment有下面的特性：
nodeType为11
nodeName为#document-fragment
nodeValue为null
parentNode为null
Attr类型
元素的特性DOM中以attr来表示。在IE8以上都可以访问Attr类型的构造函数和原型。从技术角度讲，Attr就是存在于元素的attributes属性中的节点。
开发人员最常使用的是getAttribute()/setAttribute()和removeAttribute()方法，很少直接引用特性节点。
Attr有下面的特性：
nodeType值为2
nodeName是特性的名称
nodeValue是特性的值
parentNode为null
image.png
一些API
appendChild()
向父节点的末尾插入一个子节点，返回插入的节点（newChild）。
parent.appendChild(newChild);
insertBefore()
接受两个参数第一个为要插入的节点，第二个为参照节点。插入节点后，被插入的节点会变成参照节点之前的一个同胞节点，返回插入的节点（newChild）。
parent.insertBefore(newNode,someNode)
replaceChild()
接受两个参数，第一个为要插入的节点，第二个为要替换的节点。
parent.replaceChild(newNode,oldNode)
removeChild()
接受一个参数，要移除的节点，返回移除的节点。
parent.removeChild(someNode)
document.getElementById()
返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
document.getElementsByTagName()
法返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象。
document.getElementsByName()
该方法用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），返回一个类似数组的的对象（NodeList对象的实例），因为name属性相同的元素可能不止一个。
document.getElementsByClassName()
方法返回一个类似数组的对象（HTMLCollection实例对象），包括了所有class名字符合指定条件的元素。
document.querySelector()和document.querySelectorAll()
document.querySelector()接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
document.querySelectorAll()返回所有匹配节点。
但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
createElement()
document.createElement方法用来生成网页元素节点。
大小写不敏感，即参数为div或DIV返回的是同一种节点。
var newDiv = document.createElement('div');
createTextNode()
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
cloneNode()
cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点。
（1）和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
（3）调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同
如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件
如果是内联方式绑定比如
<div onclick="showParent()"></div>
这样的话，副本节点同样会触发事件。
createDocumentFragment()
该方法生成一个DocumentFragment对象。
DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
createAttribute()
方法生成一个新的属性对象节点，并返回它。
attribute = document.createAttribute(name);
createAttribute方法的参数name，是属性的名称。
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
// 等同于
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
setAttribute()
该方法接受两个参数，要设置的特性名和值。
setAttribute(name,value)
如果特性名以存在则会替换特性名的值。
getAttribute
该方法返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。用法如下：
var value = element.getAttribute("id");
网友评论