JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 JavaScript 按名稱選擇元素

HTML 元素可能有可選的 name 屬性。例如,以下一組單選按鈕具有 name 值為 animal 的屬性 :

<input type="radio" name="animal" value="🦄"> Unicorn
<input type="radio" name="animal" value="🦁"> Lion
<input type="radio" name="animal" value="🦊"> Fox
<input type="radio" name="animal" value="🦌"> Deer

通過 name 選擇上述元素 屬性,你可以使用 getElementsByName() 方法。

getElementsByName() 方法返回文檔中具有指定名稱的所有元素的集合作為 HTMLCollection 對象。

HTMLCollecton object 是一個類似數組的節點集合,可以通過它們的索引號訪問。

以下示例演示瞭如何使用 getElementsByName() 選擇所有單選按鈕並將其值作為數組返回:

const buttons = document.getElementsByName('animal');

const animals = Array.from(buttons).map(btn => btn.value);

console.log(animals);

您應該會看到以下輸出:

["🦄", "🦁", "🦊", "🦌"]

以下是它的工作原理:

  • 首先,使用 getElementsByName() 按名稱選擇所有單選按鈕 方法。
  • 然後,使用Array.from()方法轉換HTMLCollection 對象放入數組。這是必要的,因為 HTMLCollection 不是真正的 JavaScript 數組。
  • 最後,map() 方法用於將單選按鈕的值轉換為數組。

查看本指南,了解更多關於在 JavaScript 中獲取 DOM 元素的不同方法。


Tutorial JavaScript 教程
  1. 在 TypeScript 中編寫 Node.js 模塊

  2. 我的 Gatsby 網站從 Contentful 遷移到 MDX

  3. Gatsby Typescript 和 Sass 配置文件

  4. 使用 Array.sort() 對兩個對象屬性進行排序

  5. 如何在 Swift 中創建框架

  6. render-bpmn:上傳和顯示 BPMN | CMMN | Github 上的 DMN 圖

  7. 單頁 JavaScript Web 應用程序的架構?

  1. 使用 Jest 和 Typescript 開始測試

  2. 檢查 iframe 內容是否已經加載

  3. 同步調用異步 Javascript 函數

  4. 如何使用 JavaScript 在 localStorage 中保存數據

  5. 代碼和 Scrum 100 天的第 97 天:MySQL 中的聚合函數

  6. JS如何根據另一個數組的排序排序()一個數組

  7. 與 Learnable 和 Ryan Seddon 一起成為 Modernizr 大師

  1. 了解 Express 中間件{初學者指南}

  2. 2021 年你需要知道的頂級 React 庫

  3. React Apollo:使用 useQuery 理解 Fetch Policy

  4. 使用 Typescript 構建 Vue 3 組件