[快速入门前端 60] JavaScript：DOM (2) 如何获取元素节点

元素节点

在前篇中我们说明了节点的种类和属性，而本篇会介绍如何利用 JavaScipt「获取节点」，其实这跟 CSS 选择器的概念有点相似，当我们需要动态改变页面上的元素时，我们需要先「抓到」那个元素，才能进行修改。

获取元素节点的方法

以 ID 获取
语法为 document.getElementById('id名称');，会寻找 DOM 中符合此 id 的元素并回传该 element。

<h1 id="title">Content Start</h1>

以 Tag 获取
语法为 document.getElementsByTagName('标籤名称');，会寻找 DOM 中所有为该标籤的元素，并回传 element 的集合 (HTMLCollection)。

<h1 id="title">Content Start</h1><h1 class="black">Contaaaa</h1>

以 Name 获取
语法为 document.getElementsByName('name 属性值');，会寻找 DOM 中所有 Name 值符合的元素，并回传。

<h1 class="black" name="context">Contaaaa</h1><div class="black" name="context"><a>Go to google</a></div>

以 Class 获取
语法为 document.getElementsByClassName('class名称');，会寻找 DOM 中拥有此 Class 的所有元素，并回传 element 的集合 (HTMLCollection)。

<h1 class="black">Contaaaa</h1><div class="black"><a>Go to google</a></div>

以 Selector 获取
1. querySelector
语法为 document.querySelector('selector');，selector 中填写的值与 CSS 选择器写法相同，也可以使用複合选择器，该方法会寻找符合的第一个元素，并回传该 element。
-> 关于选择器的部分可以参考 CSS 选择器简介

<h1 id="title">Content Start</h1><h1 class="black">Contaaaa</h1><div class="black"><a>Go to google</a></div>

2. querySelectorAll
语法为 document.querySelectorAll('all selector');，一样使用选择器，会寻找所有符合的元素并回传。

通过树状结构获取节点

之前我们提过在 HTMl 中，每个元素都存在父子、兄弟关係，而在 JavaScript 中我们同样能透过这些关係获取到特定元素的父、子、或前后节点。

childNodes - 获取所有子节点
语法为 element.childNodes，会回传该元素的所有子节点，也可以用 element.childNodes.length 来取得子节点数量。firstChild - 获取第一个子节点lastChild - 获取最后一个子节点parentNode - 获取父节点previousSibling - 获取前一个兄弟节点nextSibling - 获取后一个兄弟节点

值得注意的是上述这些取得节点的方法都会回传所有类型的子节点，包含元素、文字、属性节点等，而在 HTML 中空格或空行会被视为一个文字节点，所以在使用时需注意排版是否会影响取得的值。

<!-- 範例结构 --><div>    <div id="block"> <a>this is title</a>        <div>another div</div>    </div></div>

在此 HTMl 结构下，无论是换行，或是 block div 和 <a> 间的空格都会成为一个 text node，而这也会影响所有获取节点的结果。

可以看到下图不管是要获取 block 的第一/最后一个子节点，或是兄弟节点，得到的都是由于程式排版所产生的空白文字节点。

只在结构中获取元素节点

为了解决一抓就是「所有类型的节点」的问题，衍生出了下列几种「只会抓取 HTMl 结构中为 element 类型的节点」，这样可以确保我们在操作时不会误抓不必要的 Node。

children - 获取所有子元素节点firstElementChild - 获取第一个子元素节点lastElementChild - 获取最后一个子元素节点previousElementSibling - 获取前一个兄弟元素节点nextElementSibling - 获取后一个兄弟元素节点

以同样的程式结构为例，我们可以看到使用这几种方法只会获取到 元素节点，大大解决了之前的问题。

<div>    <div id="block"> <a>this is title</a>        <div>another div</div>    </div></div>

---

上一篇：[快速入门前端 59] JavaScript：DOM (1) Document Object Model 简介
下一篇：[快速入门前端 61] JavaScript：DOM (3) 取得元素的属性值
系列文章列表：[快速入门前端] 系列文章索引列表