> For the complete documentation index, see [llms.txt](https://xinhe.gitbook.io/nutc-lab-frontend-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xinhe.gitbook.io/nutc-lab-frontend-tutorial/chapter4/javascript-dom.md). # 取得DOM元素節點 ## DOM簡介 DOM的核心概念是將HTML於元素轉換成一顆節點樹，而每一個標籤就是一個一個節點（Nodes），**每一個節點皆為物件(Object)且擁有各自的屬性以及方法**，並且DOM以走訪的方式來存取HTML元素。 ![DOM節點樹](/files/-LSyK0Kibs0QYu2TzAGc) ## JavaScript取得HTML元素 JavaScript要拿到HTML元素，就是利用上述DOM的方式取得節點物件， JavaScript可以用以下幾種方式拿到DOM元素： 1. getElementById() ```markup

我是Title

``` 2\. getElementByTagName() ```markup

我是Title

``` 3\. getElementByName()\ 用法與getElementById() 方法相似，但它是查詢元素的name 屬性，而不是id 屬性。 ```markup ``` 4\. getElementsByClassName() ```markup

box1

box2

box3

``` 5\. querySelector() & querySelectorAll()\ 用CSS Selector來取得「第一個」或「所有」符合條件的節點物件。 ```markup

box1

box2

box3

``` ![querySelectorAll()結果示範](/files/-LSyfEUuQRVPHi3OLf3-) ## DOM節點間查找因為DOM節點樹是分層的觀念，所以就會有父子關係和兄弟關係 ![](/files/-LSyZdRLviueOHv0BKph) * **childNodes** * **firstChild** * **lastChild** * **parentNode** * **previousSibling** * **nextSibling** ## JavaScript操作HTML元素常用方法 | 方法 Method | 描述 Description | | --------------- | ---------------- | | appendChild() | 在節點內的最後添加子節點。 | | createElement() | 創造物件。 | | click() | 點擊此節點物件。 | | focus() | 聚焦此節點物件。 | | innerHTML | 取得該節點內的HTHL。 | | remove() | 移除該節點。 | | value | 取得該節點的value屬性值。 | | style | 設置或返回元素的CSS樣式屬性。 | | setAttribute() | 設定元素的指定屬性值。 | | toString() | 將元素轉型為字串。 |