在 JavaScript 中按名稱獲取元素

若要選取所有 HTML name 屬性符合指定值的元素，可搭配 CSS 屬性選擇器使用 document.getElementsByName() 或 document.querySelectorAll()。第一種方法專為比對 name 屬性而設；若選取條件還需要其他 CSS 條件，第二種方法會更實用。兩者都會傳回 NodeList，因此使用第一個項目前請先檢查集合長度；若需要所有符合項目，則逐一走訪集合。

使用 getElementsByName() 依名稱取得元素

document.getElementsByName(name) 會找出文件中 name 屬性等於指定字串的元素。即使沒有任何符合項目，它仍會傳回 NodeList；此時長度為 0，而不是 null。傳回的集合是即時集合，因此文件中符合條件的元素日後若有變動，集合內容也可能隨之改變。

例如，以下 HTML 有兩個名稱相同的控制項：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<label><input type="checkbox" name="interest" value="music" checked> Music</label>
<label><input type="checkbox" name="interest" value="reading"> Reading</label>

以下是示範結果處理方式的完整 JavaScript 範例。範例使用簡易的 document 替代物，因此可以在瀏覽器之外執行；在網頁中，請使用內建的 document 物件呼叫相同的方法。

const controls = [
  { name: "interest", value: "music", checked: true },
  { name: "interest", value: "reading", checked: false },
];
const document = {
  getElementsByName(name) {
    return controls.filter((control) => control.name === name);
  },
};

const interests = document.getElementsByName("interest");
const firstInterest = interests.length > 0 ? interests[0].value : "No matches";
console.log(firstInterest);

for (const interest of interests) {
  if (interest.checked) {
    console.log(interest.value);
  }
}

music
music

第一個值取自第一個符合條件的控制項，不論它是否已勾選；迴圈則只會列印已勾選的值。在瀏覽器中，document.getElementsByName("interest") 會傳回符合條件的元素，並可使用相同的長度檢查與走訪方式。若 name 屬性是唯一的選取條件，這個方法就很方便。

使用 querySelectorAll() 依名稱選取元素

document.querySelectorAll(selectors) 接受 CSS 選擇器，並傳回包含所有符合元素的靜態 NodeList。若要依名稱選取元素，可以使用 input[name="interest"] 這類屬性選擇器；標籤條件會將結果限制為輸入元素，屬性條件則負責比對名稱。有需要時，選擇器也可以組合其他 CSS 條件，或以逗號分隔多個選項。

在瀏覽器中，使用 document.querySelectorAll('input[name="interest"]') 選取所有符合條件的輸入元素，再透過長度檢查或迴圈讀取傳回的 NodeList。單獨使用 [name="interest"] 可以比對任何元素上的該名稱；若要排除其他類型的控制項，則在前面加上 input。在選擇器中，引號用來括住屬性值；它們不會跳脫值內的引號或反斜線。請勿直接將任意動態值插入這個選擇器。若要根據某個值組成選擇器，請使用正確的 CSS 字串跳脫程序，為 CSS 字串情境跳脫該值。若值來自使用者輸入，而你手邊沒有這種程序，請避免組合選擇器：改用 document.getElementsByName(value)，再以 JavaScript 根據標籤或其他屬性篩選傳回的元素。

由於沒有瀏覽器 DOM，以下執行範例會模擬上方顯示的兩個輸入元素。在網頁中，請使用內建的 document 物件呼叫相同的選擇器。執行此範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const inputs = [
  { tagName: "INPUT", name: "interest", value: "music" },
  { tagName: "INPUT", name: "interest", value: "reading" },
];
const document = {
  querySelectorAll(selector) {
    if (selector !== 'input[name="interest"]') return [];
    return inputs.filter(
      (input) => input.tagName === "INPUT" && input.name === "interest",
    );
  },
};

const interests = document.querySelectorAll('input[name="interest"]');
if (interests.length === 0) {
  console.log("No matching inputs.");
} else {
  console.log(`Matches: ${interests.length}`);
  for (const input of interests) {
    console.log(input.value);
  }
}

Matches: 2
music
reading

這會依照標籤與名稱選取兩個輸入元素、回報數量並列印其值。長度檢查也能確保沒有符合輸入元素時，讀取第一個項目的操作仍然安全。

這個方法會傳回靜態 NodeList。若沒有任何元素符合選擇器，集合就是空的。選擇器必須是有效的 CSS；格式錯誤的選擇器會引發 SyntaxError。如需了解選擇器細節，請參閱 querySelectorAll() documentation。

處理並比較結果

這兩種方法都會傳回集合，而不是單一元素或 null。讀取第一個項目前先檢查 length；若需要處理多個符合項目，則使用走訪方式。querySelectorAll() 傳回靜態快照：之後文件發生變動時，該集合不會更新。getElementsByName() 則傳回即時集合，內容可能隨文件變動而改變。

若 name 屬性已完整表達選取條件，請使用 getElementsByName()。若 CSS 選擇器能更清楚地表達條件，例如將名稱比對限制為輸入元素，或加入另一項屬性條件，則使用 querySelectorAll()。若只需要一個符合條件的元素，querySelector() 會傳回第一個符合項目或 null，不會傳回集合。如需了解更多選擇器語法與行為，請參閱 querySelectorAll() documentation。