My-Notes

004.DOM：查

5分钟阅读

遍历、导航

#document      document
|__html        document.documentElement
   |__head     document.head
   |__body     document.body

DOM 元素为“空”用 null 表示

子节点

elem.childNodes

返回 elem 的子节点集合，类型是 NodeList

firstChild 和 lastChild 属性是访问第一个和最后一个 childNodes 的快捷方式：

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

elem.children

返回 elem 的子元素集合，类型是 HTMLCollection

firstElementChild 和 lastElementChild 属性是访问第一个和最后一个 children 的快捷方式：

elem.children[0] === elem.firstElementChild
elem.children[elem.children.length - 1] === elem.lastElementChild

兄弟节点

  • previousSibling 和 nextSibling 访问前一个和后一个兄弟 Node
  • previousElementSibling 和 nextElementSibling 访问前一个和后一个兄弟 Element

父节点

  • parentNode 访问父 Node
  • parentElement 访问父 Element

两者基本相同，因为父节点一般都是元素，除了：

document.documentElement.parentNode // document
document.documentElement.parentElement // null
// document 不是 Element

特殊元素

某些类型的 DOM 元素可能会提供特定于其类型的其他属性。

表格（table）

<table>

  • table.rows —— <tr> 元素的集合。
  • table.caption/tHead/tFoot —— 引用元素 <caption>，<thead>，<tfoot>。
  • table.tBodies —— <tbody> 元素的集合（根据标准还有很多元素，但是这里至少会有一个 —— 即使没有被写在 HTML 源文件中，浏览器也会将其放入 DOM 中）。

<thead>、<tfoot>、<tbody>

  • tbody.rows —— 表格内部 <tr> 元素的集合。

<tr>

  • tr.cells —— 在给定 <tr> 中的 <td> 和 <th> 单元格的集合。
  • tr.sectionRowIndex —— 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）。
  • tr.rowIndex —— 在整个表格中 <tr> 的编号（包括表格的所有行）。

<td>、<th>

  • td.cellIndex —— 在封闭的 <tr> 中单元格的编号。

表单（form）

todo

搜索

getElement*

document.getElementById

如果一个元素有 id 特性（attribute），就可以使用 document.getElementById(id) 方法获取该元素。

注意：

  • 不要使用以 id 命名的全局变量来访问元素
    • 在规范中 对此行为进行了描述，所以它是一种标准。但这是注意考虑到兼容性才支持的
    • 问题 1：可能会造成命名冲突
    • 问题 2：阅读 JS 代码变量的来源不明显
  • id 必须是唯一的
    • 如果有多个元素都带有同一个 id，document.getElementById() 的行为是不可预测的
  • 只有 document.getElementById，没有 anyElem.getElementById

getElementsBy*

  • elem.getElementsByTagName(tag)：查找具有给定标签的元素，并返回它们的集合
    • tag 参数也可以是对于“任何标签”的星号 "*"。
  • elem.getElementsByTagNameNS(namespace, tag)：查找命名空间下具有给定标签的元素，并返回它们的集合
  • elem.getElementsByClassName(className)：返回具有给定类名的元素集合
  • document.getElementsByName(name)：返回在文档范围内具有给定 name 特性的元素集合

注意：

  • 不要忘记字母 s，和 document.getElementById 不同的是返回的都是集合，而不是单个元素
  • 返回的都是 Element 集合，HTMLCollection 类型
  • 只有 document.getElementsByName，没有 anyElem.getElementsByName

elem.querySelector*

  • elem.querySelector(css)：返回 elem 中与给定 CSS 选择器匹配的第一个元素
  • elem.querySelectorAll(css)：返回 elem 中与给定 CSS 选择器匹配的所有元素，集合

注意：

  • 可以使用任何 CSS 选择器，包括伪类等
  • querySelector(css) 等同与 querySelectorAll(css)[0]，但是 querySelector 查找到一个就会停止，因此速度更快
  • querySelectorAll 返回的集合是 NodeList 类型。document.querySelectorAll 惰性机制，DOM 增删节点不会即时更新返回的集合

其他

elem.matches(css)

检查 elem 是否与给定的 CSS 选择器匹配，返回 boolean

elem.closest(css)

查找与 CSS 选择器匹配的最近的祖先节点，elem 自己也会被搜索

关系图谱