DOM 节点选取

前一篇文章中粗浅地介绍我对 DOM 的理解，在实际见识它的庐山真面目前先要知道几个概念：

DOM Tree 采用树状结构来储存网页元素，这种结构具有层次关系
Document 中所有的物件都算是某种节点，根节点是 Document，代表整个网页
节点有12个子类别，例如元素节点，文字节点，注解节点，属性节点等等

以下看个简单的例子：

画面上的紫色文字代表的就是元素节点，是构成 DOM Tree 的基础，灰色的文字代表文字节点，绿色的文字则是注解节点。

选取 DOM 元素

操作 DOM 元素的概念跟在 Google Sheet 上的操作很雷同，当我们要在一个特定栏位输入文字时，我们必须先用滑鼠点选到特定的框框，然後再输入文字，每当要改变文字的颜色或框框的底色时，就得再点选一次要更动的框框，当要删掉框框内的文字，一样必须再点选框框。可以观察到点选框框是一切的开始，那我们先来看看如何选取 DOM 元素。

学习CSS的时候，一定要学会CSS选择器的概念才能正确选定要调整的元素，在选取 DOM 元素时，也可以利用同样的概念选取，但必须是使用下面介绍的两个方法

querySelector() ：找出文件中符合指定CSS选择器的第一个元素，如果找不到则会回传null


document.querySelector('nav') // 选取<nav>元素 
document.querySelector('.logo') // 选取class属性中带有"logo" 的元素
document.querySelector('input[type="button"]') // 选取<input type="button">元素
document.querySelector('.copyright span') //选取class="copyright" 的元素的任何<span> 後裔

querySelectorAll()：找出文件中所有符合CSS的所有元素（会以 Nodelist 表示）

//当你在阅读这个文章时，可以试试开启console，输入以下这行程序码
document.querySelectorAll('.menu__left li')

//会回传下列资料
NodeList(7) 
[li.menu__item, li.menu__item, li.menu__item, li.menu__item, li.menu__item, li.menu__item.menu__item--ironman, li.menu__item.menu__item--ironman]

特别要注意的是Nodelist并不是阵列，而是类阵列，所以一般知道的阵列方法无法处理Nodelist的资料，但可以将Nodelist传入Array.from（），这样就可以把它转成真正的阵列了。

至於怎麽修改元素的样式呢？就留到下一篇讨论吧～

参考资料：