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

2019年9月1日 167次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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。

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

节点的html写法

Element: <tagname>...</tagname>
Text: text
Comment: <!-- comments -->
DocumentType: <!Doctype html>
ProcessingInstruction: <?a 1?>

三、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

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019266755
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞