码迷,mamicode.com
首页 > 编程语言 > 详细

javascript高级程序设计---Node

时间:2015-09-12 00:43:41      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

  DOM是文档对象模型的简称,DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树,所有的这些节点和最终的树状结构都有统一的对外接口,达到使用编程语言操作文档的目的,DOM可以理解为XML文档、SVG文档、HTML文档的编程接口API。DOM不属于javascript但是可以通过javascript操作DOM。

 

节点的概念:

       DOM的最小组成单位叫节点(node),一个文档的树形结构(DOM树),就是由各种不同的类型的节点组成。

       对于HTML文档,节点主要有一下六种类型:

       Document节点:文档节点,指整个文档(window.document)。

       DocumentType:文档类型节点,指文档的类型,比如<!DOCTYPE html>

       Element:元素节点,HTML元素,比如<body>、<p>。

       Attribute:属性节点,HTML元素的属性,比如:class = “right”。

       Text:文本节点,HTML文档中出现的文本。

       DocumentFragment:文档碎片节点,文档的片段。

  Node接口在javascript中是作为Node类型来实现的,除了IE所有浏览器都可以访问到这个类型,javascript中所有的节点类型都是继承自node类型,因此所有的节点类型都共享这相同的基本属性和方法。

节点的属性:

//nodeType属性:返回节点的常数值
类型 nodeName odeType DOCUMENT_NODE #document 9 ELEMENT_NODE 大写的HTML元素名 1 ATTRIBUTE_NODE 等同于Attr.name 2 TEXT_NODE #text 3 DOCUMENT_FRAGMENT_NODE #document-fragment 11 DOCUMENT_TYPE_NODE 等同于DocumentType.name 10
返回当前节点的相关节点
//ownerDocument //返回当前节点所在的钉刺文档对象,即document对象 var doc = nod.ownerDoctype; doc === document //true nextSibling //返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null,注意,该属性包括文本节点,节点后有空格,返回文本节点,内容为空格。 previoussibling //返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点,则返回null。同样,前面有空格,返回一个内容为空的文本节点。 parentNode //返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:element节点、document节点和documentfragment节点。 parentElement //返回当前节点的父Element节点。如果当前节点没有父节点,或者父节点类型不是Element节点,则返回null。
下列属性返回当前内容
textContent
//属性返回当前节点和它的所有后代节点的文本内容。

<div id="divA">This is <span>some</span> text</div>

document.getElementById("divA").textContent          // This is some text

//该属性可读写,可自动对HTML标签转义。

document.getElementById(‘foo‘).textContent = ‘<p>GoodBye!</p>‘
//自动解释为文本<p>而不会当作标签处理,对于Text节点和Comment节点,该属性的值与nodeValue属性相同

nodeValue
//返回或设置当前节点的值,格式为字符串。但是,该属性只对Text节点、Comment节点、XML文档的CDATA节点有效,其他类型的节点一律返回null。
//返回当前节点的子节点
childNodes
//返回一个NodeList集合,成员包括当前节点的所有子节点。除了HTML元素节点,该属性返回的还包括Text节点和Comment节点。如果当前节点不包括任何子节点,则返回一个空的NodeList集合。由于NodeList对象是一个动态集合,一旦子节点发生变化,立刻会反映在返回结果之中。

var ulElementChildNodes = document.querySelector(‘ul‘).childNodes;

firstNode
//返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null。注意,除了HTML元素子节点,该属性还包括文本节点和评论节点。

lastChild
//返回当前节点的最后一个子节点,如果当前节点没有子节点,则返回null。
baseURI
//返回一个字符串,由当前网页的协议、域名和所在的目录组成,表示当前网页的绝对路径。如果无法取到这个值,则返回null。该属性不仅document对象有(document.baseURI),元素节点也有(element.baseURI)。通常情况下,它们的值是相同的。

 

  Node节点的方法

appendChild()
//接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。如果参数节点是文档中现有的其他节点,appendChild方法会将其从原来的位置,移动到新位置。

var p = document.createElement("p");
document.body.appendChild(p);

hasChildNodes
//方法返回一个布尔值,表示当前节点是否有子节点。
//方法与节点操作有关

cloneNode()
//cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。

insertBefore
//方法用于将某个节点插入当前节点的指定位置。它接受两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点,新的节点将插在这个节点的前面。该方法返回被插入的新节点。如果insertBefore方法的第二个参数为null,则新节点将插在当前节点的最后位置,即变成最后一个子节点。

removeChild
//接受一个子节点作为参数,用于从当前节点移除该节点。它返回被移除的节点。

replaceChild
//用于将一个新的节点,替换当前节点的某一个子节点。它接受两个参数,第一个参数是用来替换的新节点,第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
下面方法用于节点的互相比较。
contains
//接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。

compareDocumentPosition
//与contains方法完全一致,返回一个7个比特位的二进制值,表示参数节点与当前节点的关系。

二进制值	数值	含义
000000	0	两个节点相同
000001	1	两个节点不在同一个文档(即有一个节点不在当前文档)
000010	2	参数节点在当前节点的前面
000100	4	参数节点在当前节点的后面
001000	8	参数节点包含当前节点
010000	16	当前节点包含参数节点
100000	32	浏览器的私有用途

可以使用比特位运算符检查结果

isEqualNode
//返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。

normailize
//用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

javascript高级程序设计---Node

标签:

原文地址:http://www.cnblogs.com/yangxunwu1992/p/4802342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!