DOM ---node类型
前言
文档对象模型( DOM , Document Object Model )是 HTML 和 XML 文档的编程接口。 DOM 表示由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态 HTML ( DHTML , Dynamic HTML ), DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
DOM Level1在1998年成为W3C推荐标准,提供了基本文档结构和查询的接口。本章之所以介绍 DOM ,主要因为它与浏览器中的 HTML 网页相关,并且在 JavaScript 中提供了 DOM API 。\
注意：IE8及更低版本中的 DOM 是通过 COM 对象实现的。这意味着这些版本的 IE 中, DOM 对象跟原生 JavaScript 对象具有不同的行为和功能。
node类型
DOM Levell 描述了名为 Node 的接口,这个接口是所有 DOM 节点类型都必须实现的。 Node 接口在 JavaScripu 中被实现为 Node 类型,在除 IE 之外的所有浏览器中都可以直接访问这个类型。在 JavaScript 中,所有节点类型都继承 Node 类型,因此所有类型都共享相同的基本属性和方法。
每个节点都有 nodeType 属性,表示该节点的类型。节点类型由定义在 Node 类型上的12个数值
常量表示:\
Node . ELEMENT _ NODE (1)
Node . ATTRIBUTE _ NODE (2)
Node . TEXT _ NODE (3)
Node . CDATA _ SEC Т ION _ NODE (4)
Node . EVTI Т Y _ REFERENCE _ NODE (5)
Node . ENTITY _ NODE (6)
Node .PROCESS1NG_ INSTRUCTION _ NODE (7)
Node . co М MENT _ NODE (8)
Node . DocUMENT _ NODE (9)
Node . DocUMENT _ TYPE _ NODE (10)
Node . DocUMENT _ FRAGMENT _ NODE (11)
Node . NO Т ATION _ NODE (12)
节点类型可通过与这些常量比较来确定,比如：
if ( someNode . nodeType == Node . ELEMENT _ NODE ){ alert (" Node is an element .＂); 复制代码这个例子比较了 someNode . nodeType 与 Node . ELEMENT _ NODE 常量。如果两者相等,则意味着 someNode 是一个元素节点。 浏览器并不支持所有节点类型。开发者最常用到的是元素节点和文本节点。本章后面会讨论每种节点受支持的程度及其用法。
nodeName 与 nodeValue
nodeName 与 nodeValue 保存着有关节点的信息。这两个属性的值完全取决于节点类型。在使用这两个属性前,最好先检测节点类型,如下所示:
if ( someNode . nodeType ==1){ value = someNode . nodeName ;//会显示元素的标签名 复制代码在这个例子中,先检查了节点是不是元素。如果是,则将其 nodeName 的值赋给一个变量。对元素侧言, nodeName 始终等于元素的标签名,而 nodeValue 则始终为 null 。
节点关系
文档中的所有节点都与其他节点有关系。这些关系可以形容为家族关系,相当于把文档树比作家谐。 kHTML 中,< body >元素是< html >元素的子元素,而< html >元素则是< body >元素的父元素。< head >一素是< body >元素的同胞元素,因为它们有共同的父元素< html >。
每个节点都有一个 childNodes 属性,其中包含一个 NodeList 的实例。 NodeList 是一个类数组对象,用于存储可以按位置存取的有序节点。注意, NodeList 并不是 Array 的实例,但可以使用中括号访问它的值,而且它也有 length 属性。 NodeList 对象独特的地方在于,它其实是一个对 DOM 结构的查询,因此 DOM 结构的变化会自动地在 NodeList 中反映出来。我们通常说 NodeList 是实时的活动对象,而不是第一次访问时所获得内容的快照。
let firstChild = someNode . childNodes [0];\ let secondChild = someNode . childNodes . item (1); let count = someNode . childNodes . length ;\ 复制代码
例子展示了如何使用中括号或使用 item ()方法访问 NodeList 中的元素: 无论是使用中括号还是 item ()方法都是可以的,但多数开发者倾向于使用中括号,因为它是一个类数组对象。注意, length 属性表示那一时刻 NodeList 中节点的数量。使用 Array . prototype . slice ()可以像前面介绍 arguments 时一样把 NodeList 对象转换为数组。
作者：redspider
链接：https://juejin.cn/post/7027745150373724174