JavaScript – DOM 查找節點

document 物件是 DOM tree 的根節點，表示整份 HTML 文件，要存取 HTML 都是從 document 物件開始。

document.getElementById(id)

根據 id 取得一個 HTML 元素。

document.getElementsByTagName(tagName)

根據 HTML 標籤 (tag) 取得所有這個標籤的集合，回傳一個陣列。

var allP = document.getElementsByTagName('p');

document.getElementsByName(name)

取得特定 name 屬性的 HTML 元素集合，回傳一個陣列。

var users = document.getElementsByName('user');

document.getElementsByClassName(className)

取得特定 className 的 HTML 元素集合，回傳一個陣列。

// 取得同時有 person 和 tester 兩個 class name 的所有元素
document.getElementsByClassName('person tester');

document.querySelector(selector)

selector : 可以用 CSS 選擇器來尋找符合條件的第一個元素。

// 找出 className 是 user 的 HTML 元素
document.querySelector('.user');

name 屬性是 user 的 <input> 子元素 
document.querySelector('input[name=user]');

document.querySelectorAll(selector)

selector : 可以用 CSS 選擇器來尋找所有符合條件的元素，回傳一個陣列。

document.querySelectorAll('p');

Node.children

用來取得該元素下的所有子元素的集合(元素節點名稱，不包含文字節點)，回傳一個陣列。

<div id="user">
   <p>user123</p>
   <p>user456</p>
</div>

<script>
    let user = document.getElementById('user');
    var child = user.children;

    console.log(child);   // [p, p]
</script>

Node.childNodes

用來取得該元素下的所有子元素集合，回傳一個陣列。

<div id="user">
   <p>user123</p>
   <p>user456</p>
</div>

<script>
    let user = document.getElementById('user');
    var child = user.childNodes;

    console.log(child);   // [text, p, text, p, text]
</script>

Node.firstChild

取得該元素下的第一個子節點或返回 null 表示沒有任何子節點。

<div id="user">
   <p>user123</p>
   <p>user456</p>
</div>

<script>
    let user = document.getElementById('user');
    var child = user.children[0].firstChild;

    console.log(child);   // user123
</script>

Node.lastChild

取得該元素下的最後個子節點或返回 null 表示沒有任何子節點。

Node.parentNode

取得該元素的父元素節點。

<div id="user">
    <p>user123</p>
    <p>user456</p>
</div>

<script>
    let user = document.getElementById('user');
    var child = user.parentNode.nodeName;

    console.log(child);   // BODY
</script>

Node.previousSibling

取得該元素前面的元素節點，回傳 null 表示已是第一個節點。

<div id="user">
    <p id="user1">user123</p>
    <p>user456<span id="user2">-789</span></p>
</div>

<script>
    let user1 = document.getElementById('user1');
    let user2 = document.getElementById('user2');

    var child1 = user1.previousSibling;
    var child2 = user2.previousSibling

    console.log(child1);   // #text
    console.log(child2);   // user456
</script>

Node.nextSibling

取得該元素後面的元素節點，回傳 null 表示已是最後一個節點。