HTML 中重複使用 ID 的影響：新手指南

更新日期： 2024 年 10 月 25 日

在 HTML 中，每個元素都有可能會有不同的屬性，其中一個非常重要的屬性就是 id。

id 的目的是幫助我們唯一地標識頁面中的某個元素，但如果在 HTML 中放重複的 id 名稱會怎麼樣呢？

這篇文章將帶你了解重複使用 id 名稱的影響，以及它可能引發的問題。

什麼是 id 屬性？

在 HTML 中，id 屬性用於唯一地標識網頁中的某個元素。

id 的值應該是獨一無二的，這樣我們就可以通過它，精確地找到該元素並對其進行操作。

通常，id 被用於 JavaScript 或 CSS 中來選取特定的元素，並應用一些行為或樣式。

範例：

<div id="header">這是頁首</div>

在這個範例中，id="header" 唯一地標識了頁首這個 div 元素。

重複使用 id 名稱會如何？

根據 HTML 標準，id 應該是唯一的，這意味著在同一個 HTML 文件中，id 不能重複。

如果在網頁中放了重複的 id 名稱，雖然瀏覽器不會阻止你這麼做，但這可能會引起一些問題，特別是在 JavaScript 操作和 CSS 選取的過程中。

重複使用 id 的影響

1. JavaScript 行為混亂

在 JavaScript 中，我們通常會使用 document.getElementById() 方法來根據 id 選取特定的元素。

然而，如果網頁中存在多個具有相同 id 的元素，JavaScript 會只返回找到的第一個匹配的元素，其餘的元素會被忽略。

範例：

<div id="example">第一個元素</div>
<div id="example">第二個元素</div>

<script>
  const element = document.getElementById('example');
  console.log(element.textContent);  // 結果是：第一個元素
</script>

在這個例子中，儘管我們在頁面上有兩個 id 為 example 的元素，但 getElementById() 只會選擇第一個 div。這意味著無論頁面上有多少個重複的 id，JavaScript 都只會操作第一個，導致我們無法精確地控制其他元素。

2. CSS 選取問題

CSS 中使用 id 來選取元素時，也可能會遇到類似的問題。id 通常具有較高的選取器優先級，因此用它來選取元素並應用樣式可能會影響到所有重複的元素，甚至出現樣式衝突。

範例：

<style>
  #example {
    color: red;
  }
</style>

<div id="example">第一個元素</div>
<div id="example">第二個元素</div>

在這個例子中，因為我們重複使用了 id，所有具有 id="example" 的元素都會被應用相同的樣式。

這破壞了 id 的唯一性，並且也讓樣式的應用變得混亂和難以預測。

3. 無法通過 HTML 驗證

HTML 標準要求 id 在整個文檔中是唯一的，因此如果你在文檔中多次使用相同的 id，那麼這個文檔就無法通過 HTML 驗證工具的檢查。

雖然這不會直接阻止你的網頁運行，但它可能會帶來兼容性和可維護性的問題。

正確的做法：使用 class 代替重複的 id

如果你需要在多個元素上應用相同的樣式或 JavaScript 操作，最好的做法是使用 class 而不是 id。

class 可以用於多個元素，而 id 則應該是唯一的。

範例：使用 class

<div class="example">第一個元素</div>
<div class="example">第二個元素</div>

<style>
  .example {
    color: blue;
  }
</style>

<script>
  const elements = document.querySelectorAll('.example');
  elements.forEach(element => {
    console.log(element.textContent);  // 結果是：第一個元素、第二個元素
  });
</script>

在這裡，我們使用 class="example"，這樣可以在多個元素上應用相同的樣式，並且可以使用 document.querySelectorAll('.example') 來選取所有具有該類別的元素，進行批量操作。

什麼時候使用 id，什麼時候使用 class？

• id：用於唯一的元素，例如頁首（header）、頁尾（footer）或某些獨特的元素。每個 id 在整個頁面中只能使用一次。
• class：用於一組相似的元素，例如多個按鈕、列表項目等，可以重複使用同一個 class。使用 class 更靈活，特別是當你需要對多個元素應用相同的樣式或操作時。

總結

在 HTML 中，id 屬性應該是唯一的，以便精確地標識某一個元素。

如果重複使用 id 名稱，可能會導致 JavaScript 操作錯誤、CSS 樣式混亂，以及無法通過 HTML 驗證等問題。

因此，當需要標識多個元素時，應該使用 class 屬性，這樣可以保持代碼清晰易維護，並確保網頁的功能按預期運行。

希望這篇文章能幫助你理解在 HTML 中 id 的重要性，以及正確使用 id 和 class 的方法。學會這些基礎知識將有助於你更好地編寫結構清晰、易於維護的網頁代碼！