对DOM的基础理解BryceLou的博客- | ImapBox

对DOM的基础理解BryceLou的博客-

13 六月
星期六, 13 六月 2020 19:52 Last Updated on 星期六, 13 六月 2020 19:52 0 Comments

什么是DOM

引用《JavaScript高级程序设计（第3版）》的陈述：

DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。 DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

所以，在浏览器请求到页面文件后，解析文档，生成一颗DOM树，之后再读取各层节点进行排布，形成文档流，读取CSS样式进行页面布局，最后再绘制出页面。

HTML 与 XML 文档的DOM结构有少许区别。接下来，以HTML文档为示例进行理解。

节点层次

对于这样一个HTML文档：

<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>

其层次结构图为：
对DOM的基础理解BryceLou的博客-
文档节点（document）是每个文档的根节点，其只有一个子节点——html，其下有不同类型的各层级节点，形成了树形结构。

节点类型

对DOM的基础理解BryceLou的博客-
由这张图我们可以知道，JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。除了了解Node节点，主要还需要了解几个常见类型的节点。

Node类型

对DOM的基础理解BryceLou的博客-
每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。

NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问 NodeList 的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。一般在使用的时候，需要进行类数组转数组的操作，可以通过这些方法来转换：

Array.prototype.slice.call(NodeList Object)

Array.from(NodeList Object) (ES6)

[…NodeList Object] (ES6)

“NodeList 对象的独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映在 NodeList 对象中。我们常说， NodeList 是有生命、有呼吸的对象，而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。”

由于所有节点类型都继承自Node类型，所以Node节点之间的层级关系反映了由各类节点组成的文档的结构，也是DOM树的结构。

图上箭头上文字表示节点在整体中或者相对其他节点的具体关系。此外，Node节点有着一些基本属性和常用方法，也就意味着所有节点都拥有这些属性和方法：

基本属性：

nodeType

每个节点都有一个 nodeType 属性，用于表明节点的类型。节点类型由在 Node 类型中定义的下列12 个数值常量来表示，任何节点类型必居其一：
 Node.ELEMENT_NODE(1)；
 Node.ATTRIBUTE_NODE(2)；
 Node.TEXT_NODE(3)；
 Node.CDATA_SECTION_NODE(4)；
 Node.ENTITY_REFERENCE_NODE(5)；
 Node.ENTITY_NODE(6)；
 Node.PROCESSING_INSTRUCTION_NODE(7)；
 Node.COMMENT_NODE(8)；
 Node.DOCUMENT_NODE(9)；
 Node.DOCUMENT_TYPE_NODE(10)；
 Node.DOCUMENT_FRAGMENT_NODE(11)；
 Node.NOTATION_NODE(12)

nodeName

对于元素节点（Element）， nodeName 中保存的始终都是元素的标签名

nodeValue

对于元素节点（Element），nodeValue 的值则始终为 null；如果是文本节点（Text），则为文本的内容

parentNode

该属性指向文档树中的父节点，包含在 childNodes 列表中的所有节点都具有相同的父节点

ownerDocument

该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档

childNodes

返回节点的所有子节点，为一个NodeList对象

常用方法：

appendChild( )

接收一个节点对象作为参数，用于向 childNodes（子节点） 列表的末尾添加一个节点。添加节点后， childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后， appendChild()返回新增的节点。

insertBefore( )

这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（ previousSibling），同时被方法返回。如果参照节点是null，则 insertBefore( )与 appendChild( )执行相同的操作。

replaceChild( )

该方法接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

removeChild( )

这个方法接受一个参数，即要移除的节点。执行后返回被移除的节点。

Document类型

 nodeType 的值为 9；
 nodeName 的值为”#document”；
 nodeValue 的值为 null；
 parentNode 的值为 null；
 ownerDocument 的值为 null；

Dcoment 表示文档，这里的文档可以是HTML文档，也可以是XML文档，就是说Document类型表示HTML和XML等文档。

HTMLDocument 对象继承自Document对象，专用于表示HTML文档。

document 对象是HTMLDocument对象的一个实例，表示整个HTML页面，又叫做页面的根节点(文档节点)。同时document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

document对象也有一些常用的属性和方法：

属性：

document.documentElement

取得对<html>的引用

document.body

取得对<body>的引用

document.doctype

取得对<!DOCTYPE>的引用

document.title

取得文档标题

常用方法：

document.getElementById( )

接收一个字符串作为参数id，通过与之对应的元素的id来获取元素（这里的 id 必须与页面中元素的 id严格匹配，包括大小写；如果页面中多个元素的 id 值相同， getElementById()只返回文档中第一次出现的元素。）

document.getElementsByName( )

接收一个字符串作为参数name，只有 HTMLDocument 类型才有，返回带有给定 name 特性的所有元素。返回一个 HTMLCollection。

document.getElementsByClassName( )

接收一个字符串作为参数class，获取与该class名匹配的所有元素节点，返回一个 HTMLCollection。

document.getElementsByTagName( )

接收一个字符串作为参数tag，获取与该标签匹配的所有元素节点。如果要想取得文档中的所有元素，可以向 getElementsByTagName()中传入”*”。在 JavaScript 及 CSS中，星号（ *）通常表示“全部”。返回的是包含零或多个元素的 NodeList。但在 HTML 文档中，这个方法会返回一个 HTMLCollection 对象

document.querySelector( )

接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null

document.querySelectorAll( )

接收一个 CSS 选择符，返回与该模式匹配的所有元素。只要传给 querySelectorAll()方法的 CSS 选择符有效，该方法都会返回一个 NodeList 对象，而不管找到多少匹配的元素。如果没有找到匹配的元素， NodeList 就是空的。

document.write( )

将输出流写入到网页中

document.writeln( )

将输出流写入到网页中，末尾换行

关于NodeList和HTMLCollection

与NodeList非常相似，HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合，还提供了用来从该集合中选择元素的方法和属性。

简言之： NodeList返回节点集合（在DOM中包含了文本节点和元素节点），HTMLCollection返回元素集合

在HTML文档中：
getElementsByXXX()返回HTMLCollection；
Node.childNodes 和 document.querySelectorAll( )返回NodeList

Element类型

 nodeType 的值为 1；
 nodeName 的值为元素的标签名；
 nodeValue 的值为 null；
 parentNode 可能是 Document 或 Element；

Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。 由Element的parentNode 可能是 Document 或 Element我们能够知道，Element继承了Node和Document的方法

HTMLElement 对象继承自Element对象，用于表示HTML文档中的一个元素节点，同时在Element基础上添加了如id、className等属性。所有 HTML 元素都由 HTMLElement 类型表示，但不是直接通过这个类型，而是通过其子类型来表示。（参考之前的节点类型图）

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性；这两个属性在语义上是相同的，在元素节点（Element）中会返回相同的值，既标签的名称。但tagName只能在元素标签上使用。（如果当前节点是文本节点，则tagName为undefined，nodeName为#text。此外，nodeName为只读属性，tagName是可读可写的属性。）
注意：如果当前文档属于HTML，则tagName和nodeName返回的标签名称均为大写形式，例如：DIV、P、SPAN。如果当前文档属于XHTML(或其他XML类型的文档)，则tagName和nodeName返回的标签名称均为小写形式，例如：div、p、span。

元素节点有很多的属性，大多都是大家平常会使用到的很熟悉的属性，在此不一一列举属性的含义，同时也有一些常用方法：

常用属性：

id 、tagName 、className 、innerHTML 、outerHTML 、style 、children 、clientWidth 、clientHeight 、scrollWidth 、scrollHeight 、offsetLeft 、offsetTop

常用方法：

getAttribute( )

接收一个字符串作为参数，获取该元素与参数相同的这个特性
特殊：style属性如果通过getAttribute()访问，会返回CSS 文本；直接通过属性访问，返回对象

setAttribute( )

设置特性值，这个方法接受两个参数：要设置的特性名和值。

removeAttribute( )

接收一个字符串作为参数，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性（不常用）

hasAttribute( )

接收一个字符串作为参数，用于判断是否有该指定的属性存在，如果存在返回 true，否则返回 false

hasAttributes( )

检查该节点是否拥有属性，当节点有任何属性时返回 true，否则返回 false

createElement( )

创建新元素，这个方法只接受一个参数，即要创建元素的标签名，可结合appendChild( )使用：

var box=document.getElementsByClassName("box"); var div = document.createElement("div"); //此时还可以操作元素的特性，或为它添加更多子节点，以及执行其他操作。 div.id = "newDiv"; div.className = "myDiv"; box[0].appendChild(div);

Text类型

 nodeType 的值为 3；
 nodeName 的值为”#text”；
 nodeValue 的值为节点所包含的文本；
 parentNode 是一个 Element；
 不支持（没有）子节点。

Text类型用于表示文本节点，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含 HTML 代码。

要访问 Text 节点中包含的文本，可以使用 nodeValue 属性或 data 属性，这两个属性指向的值相同。对 nodeValue 的修改也会通过 data 反映出来，反之亦然。文本节点还有一个 length 属性，保存着节点中字符的数目，nodeValue.length 和 data.length 中也保存着同样的值。

常用方法：

createTextNode( )

创建新文本节点，这个方法接受一个参数——要插入节点中的文本。作为参数的文本将按照 HTML 或 XML 的格式进行编码。

对于下面这段代码：

<body>     text1...     <h1>Hello</h1>     text2...     <!-- the comment ...  -->     text3...     <p>World!</p>     text4...     <div> <button>myButton</button> </div>     text5 ... </body>

在输出document.body.childNodes时，得到的NodeList结果如下：
对DOM的基础理解BryceLou的博客-
所以在HTML中，节点与节点之间是可以插入文本的，这个插入的空隙就是TEXT_NODE

事件(阐述)

JavaScript 与 HTML 之间的交互是通过事件实现的。在我们了解了上述的DOM基本概念后，知道了DOM的组成以及如何操作DOM。当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

了解事件的类型，学习如何利用DOM来按照需求触发事件，实现与用户的交互；如何添加、移除、管理事件；以及如何在DOM元素操作和事件操作中节省性能等等，也是JavaScript学习中的重要部分，但本文主要是理解DOM概念，不再细讲事件部分，之后可能会再写关于事件部分的理解。

昂贵的DOM操作

理解 DOM 的关键，就是理解 DOM 对性能的影响。 DOM 操作往往是 JavaScript 程序中开销最大的部分：

在查询操作中，访问 NodeList 花费较大，因为NodeList是动态的，每次访问，都需要执行一次查询。

在修改操作中，对DOM的修改会引起”回流”，先简单阐述两个概念，也就是DOM树生成后浏览器执行的操作：

回流(reflow)：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow
重绘(repaint)：在一个元素的外观被改变，但没有改变布局的情况下发生，通俗来说，就是当各种盒子的位置、大小以及其他属性，例如颜色、字体都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程叫做repaint

所以说，修改DOM引起的”回流”对性能的消耗的昂贵的。

在事件处理中，滥用事件绑定会创建大量引用来指向事件执行的匿名函数，消耗内存，影响性能，同时移除元素时未移除事件绑定会造成内存泄漏。

综上所述，为了提高性能，我们可以：
1.尽量减少DOM操作
2.使用Vue、React等框架，框架内部的虚拟DOM会减少对真实DOM的修改
3.不要滥用事件绑定，使用事件委托来减少事件处理器的数量
…

参考书籍：《JavaScript高级程序设计（第3版）》

版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者昵称，未经作者允许不得用于商业目的。

  • 对DOM的基础理解BryceLou的博客- 对DOM的基础理解BryceLou的博客- 2
  • 对DOM的基础理解BryceLou的博客- 评论
  • 对DOM的基础理解BryceLou的博客-
    x

    海报

    扫一扫，海报

  • 对DOM的基础理解BryceLou的博客- 对DOM的基础理解BryceLou的博客- 10
  • 对DOM的基础理解BryceLou的博客- 手机看

    到微信朋友圈

    x

    扫一扫，手机阅读

  • 对DOM的基础理解BryceLou的博客-打赏

    打赏

    对DOM的基础理解BryceLou的博客-

    BryceLou

    “你的鼓励将是我创作的最大动力”

    5C币 10C币 20C币 50C币 100C币 200C币



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录