DOM 導航

開放

2.1 獲取元素的方法

導航 DOM(Document Object Model)是處理 web 文件時的重要任務。JavaScript 提供許多方法來搜尋和訪問文檔中的元素。這些方法讓開發人員輕鬆找到所需的元素並操作它們。

1. 方法 getElementById()

方法 getElementById() 返回擁有指定 id 屬性的元素。這是最簡單且經常使用的方法之一。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="content">This is the content</div>

    <script>
      const contentDiv = document.getElementById('content');
      console.log(contentDiv.textContent); // 顯示: This is the content
    </script>
  </body>
</html>

2. 方法 getElementsByClassName()

方法 getElementsByClassName() 返回擁有指定 class 的所有元素的集合。集合是 "活的",這意味著當 DOM 改變時,它會自動更新。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <p class="text">Paragraph 1</p>
    <p class="text">Paragraph 2</p>
    <p class="text">Paragraph 3</p>

    <script>
      const paragraphs = document.getElementsByClassName('text');
      console.log(paragraphs.length); // 顯示: 3
    </script>
  </body>
</html>

3. 方法 getElementsByTagName()

方法 getElementsByTagName() 返回擁有指定標籤的所有元素的集合。這個集合也是 "活的"。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    <script>
      const paragraphs = document.getElementsByTagName('p');
      console.log(paragraphs.length); // 顯示: 3
    </script>
  </body>
</html>

4. 方法 querySelector()

方法 querySelector() 返回匹配指定 CSS 選擇器的第一個元素。這是一個非常強大和靈活的搜尋元素的方法。

示例:

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
  <body>
    <div class="container">
      <p>Paragraph 1</p>
      <p class="highlight">Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>

    <script>
      const highlightedParagraph = document.querySelector('.highlight');
      console.log(highlightedParagraph.textContent); // 顯示: Paragraph 2
    </script>
  </body>
</html>

5. 方法 querySelectorAll()

方法 querySelectorAll() 返回靜態(不變的)集合,所有匹配指定 CSS 選擇器的元素。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <p>Paragraph 1</p>
      <p class="highlight">Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>

    <script>
      const paragraphs = document.querySelectorAll('.container p');
      console.log(paragraphs.length); // 顯示: 3
    </script>
  </body>
</html>

2.2 節點導航

DOM 也提供方法用於相對於當前元素導航節點。

1. 屬性 parentNode

屬性 parentNode 返回當前節點的父節點。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p>Paragraph</p>
    </div>

    <script>
      const paragraph = document.querySelector('p');
      const parent = paragraph.parentNode;
      console.log(parent.id); // 顯示: container
    </script>
  </body>
</html>

2. 屬性 childNodes

屬性 childNodes 返回當前節點的所有子節點的集合,包括文本節點。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const list = document.getElementById('list');
      const children = list.childNodes;
      console.log(children.length); // 顯示所有子節點的數量,包括文本
    </script>
  </body>
</html>

你可能還在想,為什麼結果是 7?

如上所述,屬性 childNodes 返回當前節點的所有子節點的集合,包括文本節點(空格、符號、新行等)。HTML 標記中包含元素 <li> 之間的空格和新行,這些也被算作單獨的節點。

在上面的例子中,標籤 <ul> 和第一個 <li> 之間有一個新行(和可能的空格)——這被算作文本節點。在所有 <li> 之間和最後一個 <li> 之後的情況相同。因此,不是三個列表項,childNodes 包括這些文本節點,導致總數為 7。

要僅獲取元素(忽略文本節點),可以使用屬性 children,它僅返回子元素:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const list = document.getElementById('list');
      const children = list.children;
      console.log(children.length); // 3
    </script>
  </body>
</html>

3. 屬性 firstChild 和 lastChild

屬性 firstChildlastChild 返回第一和最後的子節點。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const list = document.getElementById('list');
      const first = list.firstChild;
      const last = list.lastChild;
      console.log(first.textContent);
      console.log(last.textContent);
    </script>
  </body>
</html>

你可能會驚訝,控制台什麼都沒顯示。不過事實並非如此。顯示了最後的子節點 Item 1 和 Item 3(新行)。如果你卡在這個點上,應該再回去看看 p.2 屬性 childNodes

4. 屬性 nextSibling 和 previousSibling

屬性 nextSiblingpreviousSibling 返回同一層級的下一個和上一個節點。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const secondItem = document.querySelector('li:nth-child(2)');
      const next = secondItem.nextSibling;
      const prev = secondItem.previousSibling;
      console.log(next.textContent); // 顯示: Item 3
      console.log(prev.textContent); // 顯示: Item 1(如果忽略文本節點)
    </script>
  </body>
</html>

2.3 導航元素節點

5. 屬性 nextElementSibling 和 previousElementSibling

這些屬性返回下一個和上一個元素節點(跳過文本和註釋)。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const secondItem = document.querySelector('li:nth-child(2)');
      const next = secondItem.nextElementSibling;
      const prev = secondItem.previousElementSibling;
      console.log(next.textContent); // 顯示: Item 3
      console.log(prev.textContent); // 顯示: Item 1
    </script>
  </body>
</html>

6. 屬性 firstElementChild 和 lastElementChild

這些屬性返回第一和最後的子元素節點(跳過文本和註釋)。

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <script>
      const list = document.getElementById('list');
      const first = list.firstElementChild;
      const last = list.lastElementChild;
      console.log(first.textContent); // 顯示: Item 1
      console.log(last.textContent);  // 顯示: Item 3
    </script>
  </body>
</html>
1
任務
Frontend SELF TW,  等級 41課堂 1
上鎖
計算段落數量
計算段落數量
1
任務
Frontend SELF TW,  等級 41課堂 1
上鎖
第一個和最後一個節點
第一個和最後一個節點
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言