用 DOM 選到想要的元素

選我選我選我。

列表

備註：

• HTMLCollection 和 NodeList 都是 array-like-object
• 注意 Element 有 S 跟沒有 S 的差別，有 S 通常代表陣列（多個結果）

getElementsByTagName(tagName) 回傳「陣列」結果

const element = document.getElementsByTagName('div')
console.log(element) // HTMLCollection(2) [div, div]

getElementById(id) 回傳「節點」（id 只會有一個）

const element = document.getElementById('yo')
console.log(element) // <div id="hi">yoyoyo</div>

getElementsByClassName(className) 回傳「陣列」結果

const element = document.getElementsByClassName('block')
console.log(element) // HTMLCollection(2) [div.block, div.block]

querySelector(selector) 回傳第一個找到的「節點」

備註：注意參數是 「css selector」

const element = document.querySelector('.block')
console.log(element) // <div class="block">yoyoyo</div>

querySelectorAll(selector) 回傳所有符合結果的「陣列」

備註：注意參數是 「css selector」

const element = document.querySelectorAll('.block')
console.log(element) // NodeList(2) [div.block, div.block]

element.childNodes 取出所有子節點（注意文字跟註解節點）

<div class="block">
  <p>123</p>
  <!-- yo -->
  <p>123</p>
  <!-- yo -->
  <p>123</p>
</div>

const parent = document.querySelector('.block')
const childrens = parent.childNodes
console.log(childrens)
// NodeList(7) [text, p, comment, text, p, comment, text, p, text]

element.firstChild 取出第一個子節點（注意文字跟註解節點）

<div class="block">
  <!-- yo -->
  <p>123</p>
  <!-- yo -->
  <p>123</p>
  <!-- yo -->
  <p>123</p>
</div>

const parent = document.querySelector('.block')
const commentNode = parent.firstChild // #text
const commentNode = parent.firstChild.nextSibling // #comment
const p = parent.firstChild.nextSibling.nextSibling.nextSibling // <p>

element.firstElementChild 取出第一個「元素」子節點（不會選到文字或註解節點）

<div id="foo">
  <!-- This comment won't be selected -->
  <span>Hello</span>
</div>

console.log(document.getElementById('foo').firstElementChild)
// <span>...</span>

element.lastElementChild 取出第一個「元素」子節點（不會選到文字或註解節點）

<div id="foo">
  <span>Hello</span>
  <p>yoyoyo</p>
</div>

console.log(document.getElementById('foo').lastElementChild)
// <p>...</p>

element.closest(selector) 找到「上層第一個」符合選取器的父元素

<ul>
  <li><a href="#">abc</a></li>
  <li><a href="#">abc</a></li>
  <li><a href="#">abc</a></li>
  <li><a href="#">abc</a></li>
</ul>

const parent = document.querySelector('a').closest('li')
console.log(parent) // 第一個 <li>

element.parentNode 找到父元素

const parent = document.querySelectorAll('li')[3].parentNode
console.log(parent) // <ul>

getElementsByName 透過 name 的值來取得元素（陣列）

<div class="block">
  <p name="gender">123</p>
  <p name="gender">123</p>
  <p name="gender">123</p>
  <input type="radio" name="gender" />
  <input type="radio" name="gender" />
  <input type="radio" name="gender" />
</div>

console.log(document.getElementsByName('gender'))
// NodeList(6) [p, p, p, input, input, input]