JS趴趴往上走-JS選取DOM元素

-

DOM

DOM (Document Object Model，文件物件模型)可以讓JavaScript存取網頁內的元素，是一個將HTML文件的元件轉換成樹狀結構，我們稱之為「DOM Tree」
我們可以透過JavsScript與DOM新增、搜尋、刪除網頁元素

在網頁中，我們會看到的HTML樣子是

 <html>
  <head>
    <title>網頁標題</title>
  </head>

  <body>
    <h1>Header</h1>
    <a href="#">快速連結</a>
  </body>

 </html>

而對應的DOM


DOM節點類型

DOM節點類型常見有幾種:
  • Node.ELEMENT_NODE(HTML元素節點),對應數值:1
    例如:<h1>、<p>
    範例:
    
//這些都是元素節點
<body>
 <p></p>
 <div>
  <a href=""></a>
  <span></span>
 </div>
</body>
  • Node.TEXT_NODE(文字節點),對應數值:3
    除了文字外，它還包含換行與空格
    範例:
    
  <p>//這邊是換行
   我是文字 //這邊是文字+換行
 </p>
  • Node.COMMENT_NODE(註解節點),對應數值:8
    範例:
    
  //就這是註解
  • Node.DOCUMENT_NODE(跟節點),對應數值:9
    就是document
  • Node.DOCUMENT_TYPE_NODE(文件類型的DocumentType節點),對應數值:10
    例如 HTML5 的 <!DOCTYPE html>
  • Node.DOCUMENT_FRAGMENT_NODE(DocumentFragment 節,對應數值:1

DOM節點選取

每個載入瀏覽器的HTML文件都會成為document對象，顧名思義document是DOM Tree的根節點，當們要存取節點時，都會從document物件開始

以下是DOM選取常見方法:

 // 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById('xxx');

// 針對給定的 tag 名稱，回傳所有符合條件的元素集合
document.getElementsByTagName('xxx');

// 根據傳入的值，找到 DOM 中 Class 為 'xxx' 的元素集合。
document.getElementsByClassName('xxx');

// 針對給定的 Selector 條件，回傳第一個符合條件的元素。
document.querySelector('xxx');

// 針對給定的 Selector 條件，所有符合條件的元素集合。
document.querySelectorAll('xxx');

其中document.querySelector、document.querySelectorAll所選出來的元素屬於靜態，不會因選出的元素當文件有更改時會跟著一起改變

document.querySelector和document.getElementsBy的差異

document.querySelector、document.querySelectorAll:
  • 靜態
  • 返回NodeList

    • NodeList

    NodeList物件包含文件中的所有節點例如HTML元素、屬性節點、文字節點..等，屬性除了length還有五個方法分別是:entries、forEach、item、keys、 values，可藉由Node.childNodes以及document.querySelectorAll方式取得 有些情況下為動態(立即更新)，如使用Node.childNodes，而透過document.querySelector/ document.querySelectorAll的話是靜態

document.getElementsBy
  • 動態(立即更新):若有修改文件此也會立即更改
  • 返回HTMLCollection

    • HTMLCollection

    HTMLCollection和NodeList屬於類似規格，因為是比較早期的模型，所以和NodeList比，HTMLCollection只能回傳HTML元素(HTML element)，而方法只有length、item和namedItem

留言

張貼留言