image.png

NODE

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  • 文档是一个文档节点。
  • 所有的HTML元素都是元素节点。
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。are text nodes。
  • 注释是注释节点。

hasChildNodes()是否包含子节点

childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

DOM属性

  1. activeElement 属性返回文档中当前获得焦点的元素。

语法：document.activeElement

  1. function myFunction() {
  2.     var x = document.activeElement.tagName;
  3.     document.getElementById("demo").innerHTML = x;
  4. }

DOM应用程序编程接口（常用方法（API）、属性等的整理）

查：

查找 HTML 元素，通过选择器获取元素,常用的就是通过ID、CLASS、tagname获取元素

  1. document.getElementById("idname")
  2. document.getElementByClassName("classname")
  3. document.getElementByByTagName("p")

HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法，都可以接收三种类型的参数：id(#)，class(,)，标签，就像jquery选择器，参数需要是合法的CSS选择语法。

用起来更方便的从DOM中选取元素，功能类似于jquery的选择器，这样在写原生js代码的时候就方便了许多。

document.querySelector()
返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。

  1. element = document.querySelector(selectors);

querySelectorAll
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是
NodeList 。

  1. document.querySelectorAll('ul')[0]

NodeList 对象是一个节点的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的.

根据HTML字符串解析为dom上下文节点

  1. const setLevels = (str: string) => {
  2.   let frag: any = document.createRange().createContextualFragment(str)
  3.     setDocsLevels(frag.querySelector('h1'), frag.querySelectorAll('h2'))
  4. }