DOM 常用 API 解析

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。可以通过JavaScript 来调用document和window元素的API来操作文档或者获取文档的信息。

Node

Node 是一个接口，有许多接口都从Node 继承方法和属性

• Element 提供了对元素标签名，子节点和特性的访问
• Text 表示文本节点，它包含的是纯文本内容，不能包含 html 代码，但可以包含转义后的 html 代码
• Comment 表示HTML文档中的注释
• Document 是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性
• DocumentFragment 表示一种轻量级的文档，可当作一个临时的仓库用来保存可能会添加到文档中的节点

节点API

• 创建

  • createElement，createTextNode，cloneNode, createDocumentFragment
  • 特点:
    • 孤立的节点，要通过 appendChild 添加到文档中
    • cloneNode 要注意如果被复制的节点是否包含子节点以及事件绑定等问题
    • 常用 createDocumentFragment 来解决添加大量节点时的性能问题，不会引起页面回流(reflow)

      reflow 回流 对元素位置和几何上的计算

• 修改

  • appendChild，insertBefore，removeChild，replaceChild
  • 特点
    • 同一个节点不能存在于页面的多个位置
    • 点本身绑定的事件会不会消失，会一直保留

• 查询

  • document.getElementById
  • document.getElementsByTagName
  • document.getElementsByName
  • document.getElementsByClassName
  • document.querySelector
  • document.querySelectorAll

• 关系型

  • 父关系 parentNode，parentElement
  • 子关系 childNodes，children，firstChild，lastChild，hasChildNodes
  • 兄弟关系 previousSibling，previousElementSibling，nextSibling，nextElementSibling

元素属性型API

• setAttribute
• getAttribute
• removeAttribute

元素样式型API

• window.getComputedStyle
• getBoundingClientRect

相关库

• python的scray内置了两个dom解析器，一个是xml，一个是html，即xpath与css方法。裸用的还是bs4
• golang的爬虫框架colly, ferret一静一动，前者封装了一个类似jquery的goQuery对象，后者则用声明式语言fql
• nodejs这边比较常用的cheerio，一个听起来喜庆的名字，简单易上手，也是类jquery的存在

本作品采用《CC 协议》，转载必须注明作者和本文链接