博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM node类型 document类型 element类型 text类型 DocumentFragment类型
阅读量:4953 次
发布时间:2019-06-12

本文共 5364 字,大约阅读时间需要 17 分钟。

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);

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

 

转载于:https://www.cnblogs.com/qduanlu/archive/2012/12/14/2818705.html

你可能感兴趣的文章
poj 2185 Milking Grid
查看>>
unity + win8.1 apps 小游戏demo
查看>>
C#中读取XML错误解决: System.Xml.XmlException: “Element”是无效的 XmlNodeType。
查看>>
angularjs directive学习心得
查看>>
FancyBox的使用技巧 (汇总)
查看>>
addEventListener attachEvent和解决IE 6 7 8 this指向错误
查看>>
寒假作业总结一
查看>>
php curl请求https 返回无结果|false|errno:35
查看>>
.NET平台常用的框架整理
查看>>
ActivityManager与Proxy模式的运用
查看>>
S2SH 商城系统(4)——Application 缓存功能实现
查看>>
焦点轮播图
查看>>
午后随想
查看>>
iOS开发UI篇—简单的浏览器查看程序
查看>>
观察者设计模式
查看>>
Android 用户界面---状态栏通知(三)
查看>>
Android类参考---Looper
查看>>
TCP拥塞控制算法 — CUBIC的补丁(一)
查看>>
iOS开源加密相册Agony的实现(二)
查看>>
linux内核空间和用户空间详解
查看>>