js节点摘要

属性:

Attributes                                                             存储节点的属性列表(只读)

childNodes                                                          存储节点的子节点列表(只读)

dataType                                                             返回此节点的数据类型

Definition                                                             以DTD或XML模式给出的节点的定义(只读)

Doctype                                                               指定文档类型节点(只读)

documentElement                                               返回文档的根元素(可读写)

firstChild                                                              返回当前节点的第一个子节点(只读)

Implementation                                                   返回XMLDOMImplementation对象

lastChild                                                              返回当前节点最后一个子节点(只读)

nextSibling                                                          返回当前节点的下一个兄弟节点(只读)

nodeName                                                          返回节点的名字(只读)

nodeType                                                            返回节点的类型(只读)

nodeTypedValue                                                 存储节点值(可读写)

nodeValue                                                           返回节点的文本(可读写)

ownerDocument                                                  返回包含此节点的根文档(只读)

parentNode                                                          返回父节点(只读)

Parsed                                                                 返回此节点及其子节点是否已经被解析(只读)

Prefix                                                                   返回名称空间前缀(只读)

preserveWhiteSpace                                           指定是否保留空白(可读写)

previousSibling                                                    返回此节点的前一个兄弟节点(只读)

Text                                                                      返回此节点及其后代的文本内容(可读写)

url                                                                         返回最近载入的XML文档的URL(只读)

Xml                                                                       返回节点及其后代的XML表示(只读)

方法:

appendChild                                                         为当前节点添加一个新的子节点,放在最后的子节点后

cloneNode                                                            返回当前节点的拷贝

createAttribute                                                      创建新的属性

createCDATASection                                            创建包括给定数据的CDATA段

createComment                                                    创建一个注释节点

createDocumentFragment                                    创建DocumentFragment对象

createElement                                                       创建一个元素节点

createEntityReference                                           创建EntityReference对象

createNode                                                            创建给定类型,名字和命名空间的节点

createPorcessingInstruction                                   创建操作指令节点

createTextNode                                                      创建包括给定数据的文本节点

getElementsByTagName                                        返回指定名字的元素集合

hasChildNodes                                                       返回当前节点是否有子节点

insertBefore                                                            在指定节点前插入子节点

Load                                                                       导入指定位置的XML文档

loadXML                                                                 导入指定字符串的XML文档

removeChild                                                           从子结点列表中删除指定的子节点

replaceChild                                                           从子节点列表中替换指定的子节点

Save                                                                       把XML文件存到指定节点

selectNodes                                                           对节点进行指定的匹配,并返回匹配节点列表

selectSingleNode                                                   对节点进行指定的匹配,并返回第一个匹配节点

transformNode                                                       使用指定的样式表对节点及其后代进行转换

transformNodeToObject                                         使用指定的样式表将节点及其后代转换为对象


每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。请注意,虽然可以通过方括号语法来访问NodeList的值,而且这个对象也有length属性,但它并不是Array的实例。NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中。我们常说,NodeList是有生命、有呼吸的对象,而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。下面的例子展示了如何访问保存在NodeList中的节点——可以通过方括号,也可以使用item()方法。

var firstChild=someNode.childNodes[0];

var secondChild=someNode.childNodes.item(1);

var count=someNode.childNodes.length;


每个节点都有一个parentNode属性,该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点,因此它们的parentNode属性都指向同一个节点。此外,包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。列表中第一个节点的previousSibling属性值为null,而列表中最后一个节点的nextSibling属性的值同样也为null。当然,如果列表中只有一个节点,那么该节点的previousSibling和nextSibling都为null。父节点与其第一个和最后一个子节点之间也存在特殊关系。父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。其中:

someNode.firstChild的值始终等于someNode.childNodes[0]

someNode.lastChild的值始终等于someNode.childNodes[someNode.childNodes.length-1]

在只有一个子节点的情况下,firstChild和lastChild指向同一个节点

如果没有子节点,那么firstChild和lastChild的值均为null

明确这些关系能够对我们查找和访问文档结构中的节点提供极大的便利。

在反映这些关系的所有属性当中,childNodes属性与其他属性相比更方便一些,因为只须使用简单的关系指针,就可以通过它访问文档树中的任何节点。另外,hasChildNodes()也是一个非常有用的方法,这个方法在节点包含一或多个子节点的情况下返回true,应该说,这是比查询childNodes列表的length属性更简单的方法。

所有节点都有的最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。通过这个属性,我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点。

操作节点

因为关系指针都是只读的,所以DOM提供了一些操作节点的方法。其中,最常用的方法是appendChild(),用于向childNodes列表的末尾添加一个节点。添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后,appendChild()返回新增的节点。来看下面的例子:

var returnedNode = someNode.appendChild(newNode);

alert(returnedNode == newNode);

alert(someNode.lastChild == newNode);


如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的,但任何DOM节点也不能同时出现在文档中的多个位置上。因此,如果在调用appendChild()时传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点。

如果需要把节点放在childNodes列表中某个特定的位置上,而不是放在末尾,那么可以使用insertBefore()方法。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。如果参照节点是null,则insertBefore()与appendChild()执行相同的操作。如下面的例子所示。

插入后成为最后一个子节点

var returnedNode = someNode.insertBefore(newNode, null);

alert(newNode == someNode.lastChild);

插入后成为第一个子节点

var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);

alert(returnedNode == newNode);

alert(newNode == someNode.firstChild);

插入到最后一个子节点前面

var returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

alert(newNode == someNode.childNodes[someNode.childNodes.length-2]);

前面介绍的appendChild()和insertBefore()方法都只插入节点,不会移除节点。而下面要介绍的replaceChild()方法接受的两个参数是:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。来看下面的例子。

替换第一个子节点

var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

替换最后一个子节点

var returnedNode = someNode.replaceChild(newNode, someNode,lastChild);

在使用replaceChild()插入一个节点时,该节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲,被替换的节点仍然还在文档中,但它在文档中已经没有了自己的位置。如果只想移除而非替换节点,可以使用removeChild()方法。这个方法接受一个参数,即要移除的节点。被移除的节点将成为方法的返回值,如下面的例子所示。

移除第一个子节点

var formerFirstChild = someNode.removeChild(someNode.firstChild);

移除最后一个子节点

var formerLastChild = someNode.removeChild(someNode.lastChild);

与使用replaceChild()方法一样,通过removeChild()移除的节点仍然为文档所有,只不过在文档中已经没有了自己的位置。前面介绍的四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点(使用parentNode属性)。另外,并不是所有类型的节点都有子节点,如果在不支持子节点的节点上调用了这些方法,将会导致错误发生。

————————————————

版权声明:本文为CSDN博主「CKM10086」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/CKM10086/article/details/103532262

你可能感兴趣的:(js节点摘要)