dom获取元素的方法

---

方法名	搜索方式	可以在元素上调用？	实时的？
querySelector	CSS-selector	√	×
querySelectorAll	CSS-selector	√	×
getElementById	id	×	×
getElementsByName	name	×	√
getElementsByTagName	tag/‘*’	√	√
getElementsByClassName	class	√	√

eg：获取元素

  <div class="box">
    <span class="CLASS">1</span>
    <span class="CLASS">2</span>
    <span id="ID">3</span>
    <span name="NAME">4</span>
  </div>

1.通过选择器获取(常用)

querySelector

var classEL= document.querySelector(".CLASS")

结果：<span class="CLASS">1</span>

注意：
上下文可以是document，也可以是一个元素。
参数是选择器，如：“div .className”。
返回值只获取到一个元素。

querySelectorAll

var classEls = document.querySelectorAll(".CLASS")

结果：<span class="CLASS">1</span>
     <span class="CLASS">2</span>

注意：
上下文可以是document，也可以是一个元素。
参数是选择器，如：“div .className”。
返回值是一个类数组。

2.getElement(s)By*

getElementById

var idEl = document.getElementById("ID")

结果：<span id="ID">3</span>

注意:
上下文必须是document。
必须传参数，参数是元素的id属性。
返回值只获取到一个元素，没有找到返回null。

getElementsByName

var nameEl = document.getElementsByName("NAME")

注意:
上下文必须是document。
必须传参数，参数是元素的name属性。
返回值是一个类数组，没有找到返回空数组。

getElementsByTagName

var spanEl = document.getElementsByTagName("span")
var divEl = document.getElementsByTagName("div")

注意:
上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
参数是元素的标签名属性，不区分大小写。
返回值是一个类数组，没有找到返回空数组。

getElementsByClassName

var classnameEls = document.getElementsByClassName("CLASS")

注意:
上下文可以是document，也可以是一个元素。
参数是元素的class属性。
返回值是一个类数组，没有找到返回空数组。

3.通过导航获取

//1.拿到body
var bodyEl = document.body

//2.拿到box
var boxEl = bodyEl.firstElementChild

//3.拿到ID
var idEl = boxEl.children[2]

知识点补充：

节点之间的导航：
1.概念：
如果我们获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。
2.节点之间关系：
父节点：parentNode
前兄弟节点：previousSibling
后兄弟节点：nextSibling
子节点：childNodes
第一个子节点：firstChild
第二个子节点：lastChild

元素之间的导航:
1.概念：
如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。
2.节点之间的关系：
父元素：parentElement
前兄弟节点：previousElementSibling
后兄弟节点：nextElementSibling
子节点：children
第一个子节点：firstElementChild
第二个子节点：lastElementChild

表格元素之间的导航：
1.<table> 元素支持 (除了上面给出的，之外) 以下这些属性：
table.rows — <tr> 元素的集合；
table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>；
table.tBodies — <tbody> 元素的集合；
2.<thead>，<tfoot>，<tbody> 元素提供了 rows 属性：
tbody.rows — 表格内部 <tr> 元素的集合；
3. <tr>：
tr.cells — 在给定 <tr> 中的 <td> 和 <th> 单元格的集合；
tr.sectionRowIndex — 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）；
tr.rowIndex — 在整个表格中 <tr> 的编号（包括表格的所有行）；
4. <td> 和 <th>：
td.cellIndex — 在封闭的 <tr> 中单元格的编号。