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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,609评论 0 7
  • 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将H...
    闪电西兰花阅读 349评论 0 0
  • 本篇是基于《JavaScript高级程序设计(第3版)》DOM相关章节做的整理与归纳,概述了DOM的常见节点类型及...
    查查查查查查克阅读 2,476评论 2 7
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 623评论 0 1
  • 变量命名、声明、赋值 1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。2.变量名区分...
    wq04200阅读 615评论 0 1