js文本对象模型DOM

Posted 2022-04-29 nzcblogs

一、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操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点，
当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。