DOM node类型 document类型 element类型 text类型 DocumentFragment类型

Node类型

Html元素通过元素节点表示

特性通过特性节点表示

注释通过注释节点表示

属性通过属性节点表示

1.1节点信息

nodeType(每个节点都有，表示节点类型)，常用的如下：

1:element

2:attribute

3:text

9:document

nodeName(元素标签名)

nodeValue

1.2节点关系

每个节点都有一个childNodes属性，其中保存着一个nodeList对象。

父节点.childNodes[i] = 父节点.childNodes.item(i) 获得第i+1个子节点

父节点.childNodes.length 获得子节点个数

父节点.hasChildNodes(); 返回布尔值，判断是否有子节点

节点.parentNode  返回父节点

父节点.firstChild 返回第一个子节点

父节点.lastChild 返回最后一个子节点

节点.previousSibling 返回同列表中上一个节点

节点.nextSibling  返回同列表中下一个节点

节点.ownDocument 指向表示整个文档的文档节点

 

1.3操作节点

SomeNode指父节点

添加子节点：someNode.appendChild(newNode); 添加到末尾，返回新增节点

插入子节点：someNode.insertBefore(newNode, someNode.childNodes[i]); 返回新插入节点

替换子节点：someNode.replaceChild(newNode,someNode.childNodes[i]); 返回被替换的节点

移除子节点：someNode.removeChild(someNode.childNodes[i]); 返回被移除节点

1.4其他方法

创建副本：someNode.cloneNode(boolean);

Boolean为true时，进行深复制，复制整个节点树，但不复制js定义的 事件

Boolean为false时，进行浅复制，复制节点本身，但不复制js定义的 事件

 

Document类型

2.1document节点特征

nodeType:9;

nodeName:”#document”;

nodeValue:null;

parentNode:null;

ownerDocument:null

2.2文档子节点

指代html：

document.doucmentElement;

document.childNodes[0];

document.firstNode;

指代body：

document.body;

指代<!Doctype>：

document.doctype

2.3文档信息

document.title   title内容

document.URL   地址栏中显示的URL

document.domain 页面域名

document.referrer 链接到当前页面的那个页面的URL

2.4查找元素

document.getElementById(元素ID);  当id唯一时，返回一个标签元素

document.getElementsByTagName(元素标签名);  返回的是零个或者多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象。HTMLCollection有一个方法是namedItem(name值)，使用这个方法可以通过元素的name值取得集合中的项。

document.getElementsByName(name值); 跟上一个方法类似。

document.querySelector(选择器) 在该文档元素的范围内查找匹配的元素，返回第一个元素

document.querySelectorAll(选择器) 在该文档元素的范围内查找匹配的元素，返回全部元素

2.5特殊集合

document.anchors  包含文档中含有name属性的a元素

document.applets   包含文档中所有的applet元素

document.forms        包含文档中所有的form元素

document.images    包含文档中所有的image元素

document.links      包含文档中含有href属性的a元素

这些都是集合，都需要.[i]和.item(i)获得其中一个元素

1.6DOM中各个功能检测

document.implementation.hasFeature(要检测的DOM功能的名称，版本号);  返回boolean

Ture：代表此浏览器支持这个给定的名称和版本号

例如：document.implementation.hasFeature(“CSS2”,”2.0”);

Element类型

3.1document节点特征

nodeType:1;

nodeName:元素标签名;

nodeValue:null;

parentNode:可能是Document或者是Element;

ownerDocument:HTMLDocument

 

元素.tagName 取得元素标签名

3.2 HTML元素

每一个Html元素都存在下列标准的特性：

id

title

lang

dir  语言方向

className

只有这5个特性才能以属性的形式添加到DOM对象中。对于自定义的属性，只能通过getAttribute、setAttribute进行操作。

例如：

<div id=”a” data-my=”hello”></div>

         var p = document.getElementById("a");

         p.mycolor = “red”;

         console.log(p.getAttribute("mycolor "));  //null

         alert(p.id);   //a

         alert(P.data-my);  //undefined

         console.log(p.getAttribute("data-my"));  //hello

p.setAttribute("data-he","world");

console.log(p.getAttribute("data-he"));  //world

3.3取得特性，设置特性

元素.getAttribute(“id”); 自定义和公认的特性都能通过这个方法得到。

<p id="a" data-my="hello">4154513212</p>

var p = document.getElementById("a");

p.getAttribute("data-my") = hello

元素.setAttribute(“id”,”a”); 自定义和公认的特性都能通过这个方法设置。

p.setAttribute("data-he","world");

元素.removeAttribute(“id”);

 

3.4 attributes属性

元素.attributes 返回一个NameNodeMap，类似NodeList。

Attributes属性中包含一系列节点，每个节点的nodeName是特性的名称，节点的nodeValue是特性的值

NameNodeMap还有以下方法：

getNamedItem(name)

removeNamedItem(name)

setNamedItem(node)

 

element.attributes.getNamedItem(“id”).nodeValue;  //id的值

element.attributes[ “id”].nodeValue;  //id的值

 

一般还是用3.3提到的三个方法。

3.5创建元素

document.createElement(“div”);

document.createElement(“<div id=”a”>dhiqweohdwei</div>”);  IE支持

通过appendChild()、insertBefore()、replaceChild()添加到文档树中。

3.6元素子节点

元素可以有任意数目的子节点和后代节点，它们可能是元素、文本、注释或者处理指令。

注意IE与其他浏览器对于子节点解析不一样。

例如:

                   <ul>

                            <li>1</li>

                            <li>2</li>

                            <li>3</li>

                   </ul>

对于IE，ul的子节点个数是3；其他浏览器是7,3个li，4个文本（表示li元素之间的空白符）

当变成<ul><li>1</li><li>2</li><li>3</li></ul>，此时所有浏览器都认为ul只有3个节点

 

元素.childNodes   只包含它的子节点

元素.getEelementsByTagName（name），搜索起点是当前元素，可以通过这个访问元素的子节点或后代节点

Text类型类型

4.1document节点特征

nodeType:3;

nodeName:“#name“;

nodeValue:节点所包含的文本;

parentNode: Element;

ownerDocument: HTMLDocument

 

文本节点.data  =  文本节点.nodeValue  节点所包含的文本

文本节点.length 保存节点中字符的数目

文本节点的方法：

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处将当前文本节点分成2个文本节点

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

 4.2创建文本节点

document.createTextNode(要插入节点中的文本);

4.3合并多个相邻文本节点

父节点.normallize()；

4.3分割文本节点

文本节点.splitText(offset);

Comment类型

此为注释类型。

nodeType:8;

nodeName:“#comment“;

nodeValue:注释内容;

parentNode: 可能是doucument或Element;

ownerDocument: HTMLDocument

没有子节点

 

创建comment节点：document.createComment(注释内容);

 

CDATASection类型

只针对基于XML的文档。

DocumentType类型

nodeType : 10

nodeName : doctype的名称

nodeValue ： null

parentNode ： Document

只有火狐、谷歌、Opera支持。

<!Doctype html>

Document.doctype.name  =  HTML   <!DOCTYPE 之后的文本

DocumentFragment（文档片段）类型

这个类型在文档中没有对应的标记。

nodeType:11;

nodeName:“#document-fragment“;

nodeValue:null;

parentNode: null;

ownerDocument: HTMLDocument

 

虽然不能把文档片段直接添加到文档中，但可以将它作为仓库，可以在里面保存将来可能会添加到文档中的节点。

创建：document.createDocumentFragment();

如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点，也不会在浏览器中看到。添加到文档片段中的新节点同样也不属于文档。通过appendChild()、insertBefore()将文档片段添加到文档中。

例如：

var fragement = document.createDocumentFragment();

           var ul = document.createElement("ul");

           for(var i = 0; i<3;i++){

                var li = document.createElement("li");

                li.appendChild(document.createTextNode("Item"+i));

                fragement.appendChild(li);

           }

           ul.appendChild(fragement);

           document.body.appendChild(ul);

这样做防止浏览器反复渲染新信息。