Node类型

1.节点关系

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

每个节点都有一个parentNode属性,该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点,因此它们的 parentNode属性都指向同一个节点。此外,包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。列表中第一个节点的previousSibling属性值为null,而列表中最后一个节点的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属性更简单的方法。
 

2、操作节点

 
 因为关系指针都是只读的,所以 DOM提供了一些操作节点的方法。其中,最常用的方法是  appendChild(),用于向childNodes列表的末尾添加一个节点。添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后,appendChild()返回新增的节点。
 
 如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的,但任何DOM节点也不能同时出现在文档中的多个位置上。因此,如果在调用appendChild()时传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点,
 
 如果需要把节点放在 childNodes 列表中某个特定的位置上,而不是放在末尾,那么可以使用insertBefore()方法。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。如果参照节点是null,则insertBefore()与appendChild()执行相同的操作,
 
 前面介绍的appendChild()和insertBefore()方法都只插入节点,不会移除节点。而下面要介绍的replaceChild()方法接受的两个参数是:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。
 
在使用replaceChild()插入一个节点时,该节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲,被替换的节点仍然还在文档中,但它在文档中已经没有了自己的位置。如果只想移除而非替换节点,可以使用removeChild()方法。这个方法接受一个参数,即要移除的节点。被移除的节点将成为方法的返回值,与使用replaceChild()方法一样,通过removeChild()移除的节点仍然为文档所有,只不过在文档中已经没有了自己的位置。
 前面介绍的四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点(使用parentNode属性)。另外,并不是所有类型的节点都有子节点,如果在不支持子节点的节点上调用了这些方法,将会导致错误发生
 

3.其他方法

有两个方法是所有类型的节点都有的。第一个就是cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树;在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为了一个“孤儿”,除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。

 

Node类型知识大全的更多相关文章

  1. Element类型知识大全

    Element类型 除了Document类型之外,Element类型就要算是Web编程中最常用的类型了.Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问.   要 ...

  2. Document类型知识大全

    Document类型 1.文档的子节点  Document类型可以表示HTML页面或者其他基于XML的文档.不过,最常见的应用还是作为HTMLDocument实例的document对象.通过这个文档对 ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  6. PHP知识大全

    --------------------------------------------------------- PHP知识大全 ---------------------------------- ...

  7. VC6.0调试知识大全

    VC6.0调试知识大全 分类: C++ 2010-09-06 21:33 7080人阅读 评论(5) 收藏 举报 debuggingmfcfunctionmenumicrosoftdll My Not ...

  8. .Net知识大全(个人整理)

    .Net知识大全 本章内容适用于对.NET有一定基础的或者是想通过本文章对.NET基础知识记不清楚的朋友,可以通过本文章进行回顾. 面试的时候可能也会遇到相应的题目,建议面试前进行回顾!!! 1.NE ...

  9. js DOM Node类型

    DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示 ...

随机推荐

  1. [解决方案]WebAPI+SwaggerUI部署服务器后,访问一直报错的问题

    项目的背景:制作一批接口用来给前台app或者网站提供服务,因为WebApi是最近几年来比较流行和新颖的开发接口的方式,而且又属于轻型应用,所以选用它 部署的过程:建立了WebAPI项目并使用Swagg ...

  2. C# Split用法

    1.用字符串分隔: using System.Text.RegularExpressions;string str="aaajsbbbjsccc";string[] sArray= ...

  3. Hello TensorFlow 二 (GPU)

    官方说明:https://www.tensorflow.org/install/ 环境: 操作系统 :Windows 10 家庭中文版 处理器 : Intel(R) Core(TM) i7-7700 ...

  4. springMVC(5)---导入excel文件数据到数据库

    springMVC(5)---导入excel文件数据到数据库 上一篇文章写了从数据库导出数据到excel文件,这篇文章悄悄相反,写的是导入excel文件数据到数据库.上一篇链接:springMVC(4 ...

  5. [编织消息框架][JAVA核心技术]异常应用

    QException是项目业务异常基类 按模块划分子类异常,方便定位那块出错 有个来源码属性code作用定位某个功能处理出错逻辑,数字类型节省内存空间,同时减少创建子类的子类 QSocketExcep ...

  6. 【http转https】其之一:腾讯云 DV SSL证书申请实验

    文:铁乐猫 2016年1月 前言 大概2017年12月28日左右公司提出以后需要将公司网站由http提升到https级别,以便谷歌和火狐浏览器将之认定为安全网站. 主要是出于客户.用户那边用火狐或谷歌 ...

  7. partition length exceeds the loop-partition-table-imposed maximum of 4294967295

    问题: 当大于2T的磁盘,在用parted操作的时候,会出现这样的报错,原因是因为现在的分区表是mbr,需要修改为gpt.mbr最大支持2T的空间. 解决方法: 搞清楚问题,解决方法也很简单:mkla ...

  8. Django入门实战【3步曲】

      环境准备 junhongdeMacBook-Air:site-packages junhongchen$ python -V Python 2.7.10 junhongdeMacBook-Air: ...

  9. 将linux下的office从libreoffice换成wps

    1.下载wps的linux的deb版本 2.运行dpkg -i wpsXXX.deb 3.提示权限不够 4.运行 sudo dpkg -i wpsXXX.deb 5.提示错误 未安装软件包 libpn ...

  10. dm-verity

    一.Device Mapper: dm-verity是内核子系统的Device Mapper中的一个子模块,所以在介绍dm-verity之前先要介绍一下Device  Mapper的基础知识. Dev ...