获取节点

Yang2022年10月14日大约 3 分钟

属性

对 DOM 的所有操作都是以 document 对象开始。它是 DOM 的主“入口点”，从它可以访问任何节点

documentElement

获取 <html> 标签节点

document.documentElement

body

获取 <body> 标签

document.body

head

获取 <head> 标签节点

document.head

childNodes

获取直系子节点

document.body.childNodes

children

获取元素类型直系子节点

document.body.children

firstChild

获取第一个直系子节点

document.body.firstChild

firstElementChild

获取第一个元素类型直系子节点

document.body.firstElementChild

lastChild

获取最后一个直系子节点

document.body.lastChild

lastElementChild

获取最后一个元素类型直系子节点

document.body.lastElementChild

previousElementSibling

获取元素的上一个元素类型兄弟节点

document.body.previousElementSibling

previousSibling

获取元素的上一个兄弟节点

document.body.previousSibling

nextSibling

获取元素的下一个兄弟节点

document.body.nextSibling

nextElementSibling

获取元素的下一个元素类型兄弟节点

document.body.nextElementSibling

parentNode

返回父节点

alert(document.documentElement.parentNode) // document

parentElement

返回元素类型父节点

alert(document.documentElement.parentElement) // null

// 当我们想从任意节点 elem 到 <html> 而不是到 document 时，这个细节可能很有用
while ((elem = elem.parentElement)) {
  // 向上，直到 <html>
  alert(elem)
}

table 相关

<table> 元素支持 (除了上面给出的，之外) 以下属性
【规范文档】

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

<thead>、<tfoot>、<tbody> 元素提供了 rows 属性

tbody.rows ：表格内部 <tr> 元素的集合

<tr>

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

<td> 和 <th>

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

方法

方法名	搜索方式	是否可以在元素上调用	是否实时更新
`getElementById`	`id`	-	-
`getElementsByName`	`name`	-	✔
`getElementsByTagName`	tag or `'*'`	✔	✔
`getElementsByClassName`	class	✔	✔
`querySelector`	css - selector	✔	-
`querySelectorAll`	css - selector	✔	-

getElementById(id)

根据 id 获取元素节点，id 必须唯一，且只能有一个元素有此 id
找到返回该元素，未找到返回 null

<div id="header">Header</div>
<script>
  // 获取 id 为 header 的元素
  var dom = document.getElementById('header')
  console.log(dom)

  // 如果 JavaScript 中没有与当前元素 id 同名的变量，择可以通过此 id 作为该元素的引用来直接访问该元素（但尽量不要这样使用）
  console.log(header) // 或者 window['header']
</script>

getElementsByTagName(tag)

查找具有给定标签的元素，并返回它们的集合
tag 参数也可以是对于“任何标签”的星号 "*"。

document.getElementsByTagName('div')

getElementsByClassName(className)

返回具有给定 CSS 类的元素

<div class="class1 class2">className</div>
<script>
  // 查找具有某个类名的元素
  document.getElementsByClassName('class1')

  // 查找具有多个类名的元素
  document.getElementsByClassName('class1 class2')
</script>

getElementsByName(name)

返回在文档范围内具有给定 name 值的元素集合，很少使用

<div nam="test">Name</div>
<script>
  document.getElementsByName('test')
</script>

querySelectorAll(css)

返回指定元素内与给定 CSS 选择器匹配的所有元素，支持 CSS 的伪类

document.querySelectorAll('div')

querySelector(css)

返回指定元素内与给定 CSS 选择器匹配的第一个元素

document.querySelector('div')

matches(css)

检查指定元素与给定的 CSS 选择器是否匹配，返回 true 或 false

<div id="test">Test</div>
<script>
  var dom = document.getElementById('test')
  test.matches('div') // true
  test.matches('span') // false
</script>

closest(css)

查找指定元素与 CSS 选择器匹配的最近的祖先元素，elem 自己也会被搜索
找到便停止搜索并返回该祖先元素，未找到择返回 null

elem.closest('div')

检查父子级关系

如果 elemB 在 elemA 内（elemA 的后代）或者 elemA==elemB，elemA.contains(elemB) 将返回 true，否则返回 false

<div id="div">
  <span id="span">SPAN</span>
</div>
<div id="out">OUT</div>
<script>
  var oDiv = document.getElementById('div')
  var oSpan = document.getElementById('span')
  var outDiv = document.getElementById('out')
  var bool_1 = oDiv.contains(oSpan) // true
  var bool_2 = oDiv.contains(outDiv) // true
  console.log(bool_1) // true
  console.log(bool_2) // false
</script>