重学前端学习笔记（二十三）--狭义的文档对象DOM

wuaiqiu 发布于2019-08-30 10:58 / 995人阅读

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、DOM API 介绍

文档对象模型：用来描述文档，特指 HTML 文档，同时它又是一个对象模型，使用对象这样的概念来描述 HTML 文档。

DOM API 大致包含 4 个部分

节点：DOM 树形结构中的节点相关 API。

事件：触发和监听事件相关 API。

Range：操作文字范围相关 API。

遍历：遍历 DOM 需要的 API。

HTML 文档是一个由标签嵌套而成的树形结构，因此，DOM 也是使用树形的对象模型来描述一个 HTML 文档。

二、节点

DOM 的树形结构所有的节点有统一的接口 Node。

节点的html写法

Element: ...
Text: text
Comment: 
DocumentType: 
ProcessingInstruction:

三、Node

Node 是 DOM 树继承关系的根节点。

1、Node 提供了一组属性，来表示它在 DOM 树中的关系

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

2、Node 中也提供了操作 DOM 树的 API

appendChild

insertBefore

removeChild

replaceChild

3、Node 还提供了一些高级 API

compareDocumentPosition：是一个用于比较两个节点中关系的函数。

contains：检查一个节点是否包含另一个节点的函数。

isEqualNode：检查两个节点是否完全相同。

isSameNode：检查两个节点是否是同一个节点。

cloneNode：复制一个节点，如果传入参数 true，则会连同子元素做深拷贝。

4、DOM 标准规定了节点必须从文档的 create 方法创建出来

createElement

createTextNode

createCDATASection

createComment

createProcessingInstruction

createDocumentFragment

createDocumentType

四、Element 与 Attribute

元素对应了 HTML 中的标签，它既有子节点，又有属性。

1、把元素的 Attribute 当作字符串来看，有以下的 API

getAttribute

setAttribute

removeAttribute

hasAttribute

2、把 Attribute 当作节点

getAttributeNode

setAttributeNode

五、查找元素

1、document 节点提供了查找元素的能力

querySelector

querySelectorAll

getElementById

getElementsByName

getElementsByTagName

getElementsByClassName

2、getElementById、getElementsByName、getElementsByTagName、getElementsByClassName，这几个 API 的性能高于 querySelector。

3、getElementsByName、getElementsByTagName、getElementsByClassName 获取的集合并非数组，而是一个能够动态更新的集合。

var cxk = document.getElementsByClassName("kaimo");
console.log(cxk.length); // 0

var kaimo = document.createElement("div");
kaimo.setAttribute("class", "kaimo")
document.documentElement.appendChild(kaimo)
console.log(cxk.length); // 1

浏览器内部是有高速的索引机制，来动态更新这样的集合的。

六、遍历

DOM API 中还提供了 NodeIterator 和 TreeWalker 来遍历树。并且它们提供了过滤功能，还可以把属性节点也包含在遍历之内。

6.1、NodeIterator 的基本用法

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT, null, false);

var node;
while(node = iterator.nextNode()){
    console.log(node);
}

6.2、TreeWalker 的用法

var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false)

var node;
while(node = walker.nextNode()){
    if(node.tagName === "p")
        node.nextSibling();
    console.log(node);
}

建议需要遍历 DOM 的时候，直接使用递归和 Node 的属性。

七、Range

Range API 表示一个 HTML 上的范围，这个范围是以文字为最小单位的。

1、注意：Range API 比 节点 API 更精确操作 DOM 树，并且性能更高，但是使用起来比较麻烦，在实际项目中，并不常用，只有做底层框架和富文本编辑对它有强需求。

2、创建 Range 一般是通过设置它的起止来实现

var range = new Range(),
    firstText = p.childNodes[1],
    secondText = em.firstChild
range.setStart(firstText, 9) // do not forget the leading space
range.setEnd(secondText, 4)

3、通过 Range 也可以从用户选中区域创建

// 用于处理用户选中区域
var range = document.getSelection().getRangeAt(0);

4、更改 Range 选中区段内容由 extractContents（取出）和 insertNode（插入） 来实现。

var fragment = range.extractContents()
range.insertNode(document.createTextNode("abcd"))

个人总结

不懂一些概念可以参考:

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Document

2、https://www.runoob.com/jsref/dom-obj-document.html

云服务器 GPU云服务器二十三 javascript的dom对象 DOM文档删除dom对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114685.html

重学前端学习笔记（二十三）--狭义的文档对象DOM

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...

Guakin_Huang 2019-08-26 13:53 评论0 收藏0
重学前端学习笔记（二十三）--狭义的文档对象DOM

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...

AlanKeene 2019-08-02 15:08 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
重学前端学习笔记（十三）--浏览器工作解析（三）

摘要：三操作过程首先，须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，...

trigkit4 2019-08-02 16:17 评论0 收藏0