什么是DOM？（Document Object Model的缩写，就是以层次化的模式来描述网页的方式。）
- Document就是指文档（网页文件）
- Object是指把网页文档看做一个整体
- Model模型模式
关于DOM
- DOM是针对HTML和XML文档的一个API（应用程序程序接口）。
- DOM描绘了一个层次化的节点树（节点关系）。
- 它允许开发人员查找、添加、修改、删除页面的某一部分。
DOM节点树
DOM的属性
- nodeName ——节点的名字；
- nodeType —— 返回一个整数，代表这个节点的类型，1-元素节点，2-属性节点，3-文本节点；
- nodeValue —— 返回一个字符串，这个节点的值；
- childNodes —— 返回一个数组，数组由元素节点的子节点构成；
- firstChild —— 返回第一个子节点；
- lastChild —— 返回最后一个子节点；
- nextSibling —— 返回目标节点的下一个兄弟节点，如果目标节点后面没有同属于一个父节点的节点，返回null；
- previousSibling —— 返回目标节点的前一个兄弟节点，如果目标节点前面没有同属于一个父节点的节点，返回null；
- parentNode —— 返回的节点永远是一个元素节点，因为只有元素节点才有可能有子节点，document节点将返回null；
DOM节点的类型nodeType
（nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值）
- 元素节点 —— Node.ELEMENT_NODE(1)
- 属性节点 —— Node.ATTRIBUTE_NODE(2)
- 文本节点 —— Node.TEXT_NODE(3)
- CDATA节点 —— Node.CDATA_SECTION_NODE(4)
- 实体引用名称节点 —— Node.ENTRY_REFERENCE_NODE(5)
- 实体名称节点 —— Node.ENTITY_NODE(6)
- 处理指令节点 —— Node.PROCESSING_INSTRUCTION_NODE(7)
- 注释节点 —— Node.COMMENT_NODE(8)
- 文档节点 —— Node.DOCUMENT_NODE(9)
- 文档类型节点 —— Node.DOCUMENT_TYPE_NODE(10)
- 文档片段节点 —— Node.DOCUMENT_FRAGMENT_NODE(11)
- DTD声明节点 —— Node.NOTATION_NODE(12)
DOM节点操作方法
方法 | 描述 | 栗子 | 注意
---|---
createElement() | 创建元素节点 | var node = document.createElement('div'); | 创建的节点不会被自动添加到文档document里
createTextNode() | 创建文本节点 | var val = document.createTextNode('text'); | 创建的节点不会被自动添加到文档document里
appendChild() | 插入节点到最后 | node.appendChild(val); |
insertBefore() | 插入节点到目标节点的前面|node.insertBefore(_span, _p);|<span>节点在<p>节点前面插入，其中第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild。
cloneNode(boolean)|复制节点|node.cloneNode(true);/node.cloneNode(false)|参数true，复制整个节点和里面的内容；false，只复制节点不要里面的内容，复制后的新节点不会被自动插入到文档。
removeChild() | 删除节点| node.removeChild(_p);|
getAttribute() | 获取节点属性| node.getAttribute('title');|
setAttribute() | 设置节点属性 | node.setAttribute('title','我是个美少女');|class属性不能这样设置。
hasChildNodes | 判断元素是否有子节点 | node.hasChildNodes;|返回布尔值。
replaceChild() | 替换子节点 |var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li | 用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
document.getElementById() | 返回带有指定ID的元素 | var element=document.getElementById("intro"); |
document.getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。| var element=document.getElementsByTagName('p'); | 获取的是所有的p标签
document.getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。| var element=document.getElementsByClassName('_p');| 获取的是所有的含有‘_p’类名的元素
document.getElementsByName() |返回带有指定名称的对象的集合|var x=document.getElementsByName('sex'); alert(x.length);| 查询元素的 name 属性，比如单选框它有一组一样的name值，所以返回的是一个元素的数组，而不是一个元素。
document.querySelector | 返回匹配的第一个元素 | var obj = document.querySelector("#id"); var obj = document.querySelector(".classname"); var obj = document.querySelector("div"); | 如果没有匹配项，返回null。
document.querySelectorAll |返回匹配的元素集合 | 同上|如果没有匹配项，返回空的nodelist(节点数组)。
