JavaScript高级程序设计学习10_DOM_抓紧面试前的宝贵时间快速搞定前端初级javascript面试-优快云博客

本文链接：https://blog.youkuaiyun.com/kl_123456/article/details/83445064

1、node类型

DOM1级定义了一个Node接口,javascript中得所有节点都继承Node类型，因此所有节点都共享着相同的属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。它由下列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 == 1){
  alert('Node is an element');
  value = someNode.nodeName;//nodeName是元素的标签名,对于元素节点,nodeName始终保存标签名，nodeValue始终为空
}

(1)节点关系

childNodes属性:保存着NodeList对象，用于保存一组有序的节点，可通过数组的方式访问节点，注意(它并不是Array的实例)，独特之处在于它是基于DOM结构动态执行查询的结果；

parentNodes属性:该属性指向文档树的父节点；

previousSibling属性和nextSibling属性:指向当前节点的同胞节点的上一个和下一个。

(2)操作节点

appendChild():用于向childNodes列表的末尾添加一个节点，返回新增的节点；

insertBefore():向指定的位置添加节点。接受两个参数：要插入的节点和作为参照的节点，如果参照点为null，则与appendChild()执行相同操作，如下：

returnNode = someNode.insertBefore(newNode,null);//插入后成为最后一个子节点
returnNode = someNode.insertBefore(newNode,someNode.firstNode);//插入后成为第一个子节点
returnNode = someNode.insertBefore(newNode,someNode.laseChild);//插入后成为倒数第二个子节点

replaceChild():替换节点。接受两个参数：要插入的节点和要替换的节点。

removeChild():移除节点。接受一个参数：要移除de的节点，注意(通过removeChild()移除的节点仍为文档所有，只不过在文档中已经没有了自己的位置)

(3)其他方法

cloneNode():接受一个bool值，表示是否深复制，也就是是否复制整个子节点树还是只复制节点本身。

normalize():处理文档树中的文本节点。

2、Document类型

(1)文档的子节点

DOM标准规定Document子节点可以说DocumentType、Element、ProcessingInstruction或Comment，但还有两个访问子节点的快捷方式：documentElement属性-->始终指向HTML页面的第一个元素；childNodes列表访问文档元素。如下：

<html><body></body></html>

let html = document.documentElement;//以上只包含一个节点，即html元素
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true

作为HTMLDocument的实例，document.documentBody属性可直接指向body节点，使用频率较高。

(2)文档信息

document.title属性可获取标题或设置标题；

document.URL属性取得完整的URL；

document.domain属性取得域名；（可设置，但不能设置为URL不包含的域）

document.referrer属性取得来源页面的URL。

3、element类型

(1)attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，NamedNodeMap有以下方法：

getNamedItem(name):返回nodeName属性等于name的节点；

removeNamedNode(name):从列表中删除nodeName属性等于name的节点；

setNamedNode(node):像列表中添加节点，以节点的nodeName属性为索引；

item(pos):返回位于数字pos位置处的节点。

attributes属性包含一系列的节点，nodeName为特性的名称，nodeValue为特性的值，要取得元素的id特性，如下：

let id = element.attributes.getNamedItem('id').nodeValue;
let id = element.attributes['id'].nodeValue;//此为方括号语法的简写方式
element.attributes['id'].nodeValue = "someOtherID";//可设置新值
let oldAtt = element.attributes.removeNamedItem('id');//删除给定名称的特性，返回被删除特性的Attr节点

不过开发人员一般都用getAttribute(),removeAttribute(),setAttribute()方法。

4、text类型

appendData(text):将text添加到节点的末尾

deleteData(offset,count):从offset制定的位置开始删除count个字符

insertData(offset,text):从offset指定的位置插入text

replaceData(offset,count,text):用text替换从offset指定的位置到offset+count位置的文本

splitText(offset):从offset指定的位置将当前文本节点分为两个文本节点

substringData(offset,count):提取从offset指定的位置开始到offset+count位置处的字符串

除此之外，文本节点还有length属性，保存着字符的数目。nodeValue.length=data.length

document.createTextNode(text):创建新文本节点

element.normalize():将当前元素的所有文本节点合并为一个，与splitText()方法相反

5、comment类型（注释）

继承与TEXT类型相同的类，因此它拥有除splitText()方法外所有的字符串操作方法

6、CDATASection类型

CDATASection类型只针对XML文档，标识的是CDATA区域。与comment类似，继承自Text类型，因此它拥有除splitText()方法外所有的字符串操作方法。

<div><![CDATA[this is some content]]></div>

这个例子div元素应该包含一个CDATASection节点。可是四大主流浏览器都不能解析他。即使对于有效的XHTML页面，浏览器也没有正确的嵌入CDATA区域。

在真正的XML文档中，可使用document.createCDataSection()创建CDATA区域。

7、DocumentType类型

包含着与文档doctype有关的所有信息，支持它的浏览器会把DocumentType对象保存在document.doctype中，DOM1级描述了三个属性:

name:文档类型的名称

entities:文档类型描述的实体的NamedNodeMap对象

notations:文档类型描述的富豪的NamedNodeMap对象

8、DocumentFragment类型

Dom规定文档片段是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源