一、W3C DOM 标准被分为 3 个不同的部分:
1、Core DOM - 所有文档类型的标准模型【IE中的所有DOM对象都是以COM对象的形式实现的】
2、XML DOM - XML 文档的标准模型
3、HTML DOM - HTML 文档的标准模型
二、JavaSript原生对象中的DOM对象【HTML DOM】
1、Node类型
javascript中所有的节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法。
2、Node的节点类型
a、Document类型 document
b、Element类型 元素节点类型
c、Text类型 文本节点
d、Comment类型 注释节点
3、Node类型的相关属性和方法
a、Node类型属性
nodeType 节点类型【节点类型-->对应的返回值】(9138)
Document--> 9;Element -->1;TextNode -->3;Comment--> 8
document 是Document构造函数的实例
document.body是Element构造函数的实例
document.body.firstChild 是Comment构造函数的实例或Text构造函数的实例
nodeName 该属性取决于节点类型,如果是元素类型,值为元素的标签名
nodeValue 该属性取决于节点类型,如果是元素类型,值有null
childNodes 【返回相应节点的所有孩子节点组成的类数组对象】
NodeList是一种类数组对象用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。
访问时可以通过中括号访问,也可以通过item()方法访问。
可以使用slice方法将NodeList转换为数组
eg:
var arr = Array.prototype.slice.call(nodes,0);
parentNode 相应子节点的父元素节点
firstChild 所有孩子节点中的第一个孩子节点
lastChild 所有孩子节点中的最后一个孩子节点
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点
ownerDocument
指向表示整个文档的文档节点。任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。
eg:
console.log(document.body.ownerDocument === document); //true console.log(document.head.ownerDocument === document); //true console.log(document.getElementsByTagName(‘div‘).ownerDocument); //undefined
b、Node类型方法
hasChildNodes() 【返回值为boolean类型】 该节点是否有孩子节点
以下四个方法都需要使用父节点对象进行调用
appendChild(要添加的节点)
添加一个节点作为该节点的最后一个孩子节点 【返回新增的节点】
若要添加的参数节点已经为文档的一部分,位置更新而不插入【任何DOM节点不能同时出现在文档中的多个位置】
insertBefore(要插入的节点,[参照的节点])
在参照的节点前面插入一个同胞节点 【返回要插入的节点】
若第二个参数为null将会将要插入的节点追加在NodeList后面【作为该节点的lastChild】
replaceChild(要插入的节点,要替换的节点)
移除要替换的节点并在其位置插入要插入的节点 【返回要替换的节点】
removeChild(要移除的节点)
移除要移除的节点 【返回要移除的节点】
其他方法
cloneNode(boolean) 【克隆节点】
用于创建调用这个方法的节点的一个完全相同的副本。
参数为布尔类型参数为true时,表示深复制,即复制节点以及整个子节点数。
参数为false的时候,表示浅复制,只复制节点本身。
该方法不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序等。
该方法只复制特定,子节点,其他一切都不复制。
但是IE中可以复制,建议标准相同,在复制之前,移除所有事件处理程序。
normalize() 【删除空白节点,将两个文本节点合并为一个文本节点】
处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点,
当在某个节点上调用了该方法,会删除空白节点,会找到相邻的两个文本节点,并将他们合并为一个文本节点。
原文地址:https://www.cnblogs.com/nzcblogs/p/11219086.html