查询与遍历

如何按选择符与标识查询元素？

方法	返回
document.querySelector(selectors)	第一个匹配的 Element 或 null
document.querySelectorAll(selectors)	全部匹配的静态 NodeList
element.matches(selectors)	是否匹配
document.getElementById(id)	按 id 匹配的元素
document.getElementsByClassName(names)	按类名的实时 HTMLCollection
document.getElementsByTagName(name)	按标签名的实时 HTMLCollection
document.getElementsByName(name)	按 name 属性的 NodeList

• 实时性: getElementsBy* 返回集合实时反映 DOM 变化, querySelectorAll 返回静态快照, 见 DOM 操作与插入标记;

如何只遍历元素节点？

• 原因: childNodes 包含文本与注释节点, 直接遍历容易踩空;
• 元素视图: 使用 Element 级属性跳过非元素节点;

属性	作用
childElementCount	子元素数量
firstElementChild / lastElementChild	第一个 / 最后一个子元素
previousElementSibling / nextElementSibling	前一个 / 后一个同级元素

NodeIterator 与 TreeWalker 如何做深度优先遍历？

成员	作用
document.createNodeIterator(root, whatToShow?, filter?)	创建 NodeIterator
iterator.nextNode() / previousNode()	前后移动
document.createTreeWalker(root, whatToShow?, filter?)	创建 TreeWalker, NodeIterator 的高级版
walker.nextNode() / previousNode()	按深度优先前后移动
walker.parentNode() / firstChild() / lastChild()	跳到父 / 首子 / 末子
walker.nextSibling() / previousSibling()	跳到下一个 / 上一个同级
walker.currentNode	当前节点, 可读写
whatToShow / filter / root	过滤常量 / 过滤器 / 根节点