Dom的了解

Dom的定义

是JavaScript操作网页的接口,全称为“文档对象模型”
(Document Object).

作用:

是将网页转为一个Javascript对象,从而用脚本进行各种操作(比如增删内容
)。

浏览器操作原理:

浏览器根据DOM模型,将结构花文档(比如HTML和XML)解析成一系列节点
,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。

DOM用什么实现:

DOM只是一个接口规范,可以用各种语言实现,严格的说,DOM不是Javascript语法的一部分,但是DOM操作是Javascript最常见的任务,离开了DOM,Javascript就无法控制网页。此外,Javascript也是最常用于DOM操作的语言。

节点

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成,每个节点可以看做是文档树的一片叶子。
节点的类型有7种

  1. Document;整个文档树的顶层节点;
  2. DocumentType:doctype标签(比如)
  3. Element:网页的各种HTML标签<比如<body>、<a>等)
  4. Attr:网页元素的属性(比如cLass=“right”)
  5. Text:标签之间或标签包含的文本
  6. comment:注释
  7. DocumentFragment:文档的片段

浏览器提供了一个原生的节点对象Node,上面这7种节点都继承了Node,因此具有共同的属性和办法。

节点树

按照所在的层级,可以抽象成一种树状结构,这种结构就是DOM树。她有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,又像一棵树。
浏览器原生提供Document节点,代表整个文档。

  • document
  • //代表整个文档

文档的第一层有两个节点,第一个是文档类型节点(),
第二个是网页的顶层容器标签。后者构成了树结构的根节点(root node),其他HTML标签节点都是他的下级节点。
除了根节点,其他节点都有三种层级关系。

  1. 父节点关系(parentNode):直接的那个上级节点;
  2. 子节点关系(childNodes):直接的下级节点;
  3. 同级节点关系(sibling):拥有同一个父节点的节点。

DOM提供操作接口,用来获取这三种关系的节点。

比如,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的同级节点)和previousSibling(紧邻在前的那个同级节点)属性。

Node接口是如何工作的

DOM是一个树,Node是他的树叶子。

工作基础:

所有DOM节点对象都继承了Node接口,拥有一些共同的属性和方法,这是DOM操作的基础。

Node.prototype.nodeType属性返回节点的类型

nodeType属性返回一个整数值,表示节点的类型。
document.nodeType//9
上面代码中,文档的节点类型值为9。
Node对象定义了几个常量,对应这些类型值。
document.nodeType===Node.DOCUMENT_NODE//true
上面代码中,文档节点的nodeType属性等于常量Node.DOCUMENT_NODE。
不同节点的nodeType属性值和对应的常量如下:

  • 文档节点(document):9,对应常量Node.DOCUMENT_NODE
  • 元素节点(element):1,对应常量Node.ELEMENT_NODE
  • 属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
  • 文本节点(text):3,对应常量Node.TEXT_NODE
  • 文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
  • 文档类型节点(DocumentType):10,对应常量Node.DOCUMENT_TYPE_NODE
  • 注释节点(Comment):8,对应常量Node.COMMENT_NODE

确定节点类型时,使用nodeType属性是常用方法。

1. var node = document.documentElement.firstChild;
2. if (node.nodeType === Node.ELEMENT_NODE) {
3.   console.log('该节点是元素节点');
4. }
 

Node.prototype.nodeName返回节点的名称

// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"

 

上面代码中,元素节点

的nodeName属性就是大写的标签名DIV

  • 不同节点的nodeName属性值如下:
  • 文档节点(document):#document
  • 元素节点(element):大写的标签名;
  • 属性节点(attr):属性的名称;
  • 文本节点(text):#text
  • 文档片断节点(DocumentFragment):#document-fragment
  • 文档类型节点(DocumentType):文档的类型
  • 注释节点(Comment):#comment

Node.prototype.nodeValue

nodeValue属性返回一个字符串,表示当前节点本身的文本值,该属性可读写。

只有文本节点(text)、注释节点(comment)和属性节点(attr)有文本值,因此这三类节点的nodeValue可以返回结果,其他类型的节点一律返回null。同样的,也只有这三类节点可以设置nodeValue属性的值,其他类型的节点设置无效。

// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "hello world"
 

上面代码中,div是元素节点,nodeValue属性返回null。div.firstChild是文本节点,所以可以返回文本值。

Node.prototype.textContent

textContent属性返回当前节点和它的所有后代节点的文本内容。

// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text

 

textContent属性自动忽略当前节点内部的 HTML 标签,返回所有文本内容。
关于node接口的内容,暂时就先学习这么多,大概了解了他的这种方式。## 下面学习NodeList接口
节点都是单个对象,有时需要一种数据结构,能够容纳多个节点。
DOM提供两种节点集合,用于容纳多个节点,其中一个就是NodeList。
NodeList可以包含各种类型的节点。
NodeList实例是一个类似数组的对象,它的成员是节点对象。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14782.html

发表评论

登录后才能评论