声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！
节点层次
- DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构
- 文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中，每个文档只能有一个文档元素，在html页面中，文档元素始终是<html>元素
- 每一段标记都可以通过树中的一个节点表示，总共有12种节点类型，这些类型都继承自一个基类型：node
Node类型
除了IE外，其他所有浏览器都可以访问这个类型
JavaScript中的节点类型都继承自Node类型，因此所有节点类型共享相同的基本属性和方法
Node定义了12个数值常量来表示节点类型
- Node.ELEMENT_NODE(1);
- Node.ATTRIBUTE_NODE(2);
- Node.TEXT_NODE(3);
- Node.CDATA_SECTION_NODE(4);
- Node.ENTITY_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);
- Node.NOTATION_NODE(12);
通过比较以上常量，可以确定节点类型
if(someNode.nodeType == Node.ELEMENT_NODE){} //IE中无法访问Node，该写法无法在IE中使用
if(someNode.nodeType == 1){} //建议使用该方法
nodeName和nodeValue属性
- 要了解节点的具体信息，可以使用nodeName和nodeValue属性，这两个属性的值完全取决于结点的类型
- 对于元素节点，nodeName中保存的永远是元素的标签名，nodeValue的值永远是null
节点关系
childNodes属性
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList是一个类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点，而且这个对象也有length属性，但它不是Array的实例
NodeList实际上是基于DOM结构动态执行查询结果，因此DOM结构的变化能够自动反映在NodeList对象中
访问NodeList中的节点：
var firstChild = someNode.childNodes[0]; //someNode是一个节点，使用[]有操作符访问
var secondChild = someNode.childNodes.item(1); //使用item()方法访问
NodeList的节点数量：
- NodeList.length属性表示的是访问NodeList的那一刻，其中包含的节点数量（NodeList是动态变化的）
将NodeList对象转换为数组：
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
hasChildNodes()方法：
- hasChildNodes()方法在节点包含一个或多个子节点的情况下返回true
parentNode属性
每个节点都有一个parentNode属性，该属性指向文档树中的父节点
由于包含在childNodes列表中的所有所有节点都具有相同的父节点，因此它们的parentNode属性指向同一个节点
previousSibling和nextSibling属性
包含在childNodes列表中的每个节点相互之间都是同胞节点，通过使用列表中的previousSibling和nextSibling属性，可以访问同一列表中的其他节点
- previousSibling属性：指向本节点的前一个同胞节点
- nextSibling属性：指向本节点的后一个同胞节点
列表中第一个节点的previousSibling属性为null，最后一个节点的nextSibling属性为null
firstChild和lastChild属性
父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点
ownerDocument属性
所有节点都有该属性，该属性指向文档节点
操作节点
注意：不是所有类型节点都有子节点，在不支持子节点的节点上使用以下方法将会报错
appendChild()
var returnedNode = someNode.appendChild(newNode);
//将newNode添加到someNode的childNodes列表的末尾，返回新增的节点(newNode)
- 添加节点后，childNodes的新增节点、父节点以及原本的最后一个子节点的关系指针都会得到更新
- 如果传入appendChild()的节点是文档已存在的一部分，那结果就是将节点从原来的位置移到新位置
insertBefore()
var returnedNode = someNode.insertBefore(newNode,existedNode);
//将newNode插入在existedNode节点之前，existedNode为已存在的节点，返回插入的节点(newNode)
- 如果insertBefore()的第二个参数为null，则insertBefore()与appendChild()作用相同
replaceChild()
var returnedNode = someNode.replaceChild(newNode,existedNode);
//将newNode放到existedNode的位置，同时移除existedNode，返回existedNode
- 被替换的节点（existedNode）实际上仍然在文档中，但它在文档中已没有自己的位置
removeChild()
var returnedNode = someNode.removeChild(existedNode);
//将existedNode节点从文档中移除，并返回该节点
- 被移除的节点（existedNode）实际上仍然在文档中，但它在文档中已没有自己的位置
其他方法
以下两个方法是所有类型的节点都有的
cloneNode()
var copyNode = existedNode.cloneNode(布尔值);
//完全复制existedNode给copyNode，参数为布尔值，true：深复制，复制节点以及其子树。false：浅复制，仅复制节点本身
- cloneNode()方法不会复制添加到DOM节点中的JavaScript属性
- IE在此存在一个bug，它会复制事件处理程序
normalize()
- normalize()用于处理文档树中的文本节点
- 由于解析器的实现或DOM操作等原因，可能出现文本节点不包含文本，或者接连出现两个文本节点的情况，当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况
- 如果找到空文本节点，就删除它
- 如果找到相邻的文本节点，就合并为一个文本节点
Document类型
- JavaScript通过Document类型表示文档，在浏览器中，document对象时HTMLDocument的一个实例，表示整个HTML页面
- document对象是window对象的一个实例，因此可以将document作为全局变量访问
document特征
| 属性 | 值 |
|---|---|
| nodeTyp |
最低0.47元/天 解锁文章
1750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
