HTMLCollection namedItem() 方法(1)

📌 相关文章

📜 HTMLCollection namedItem() 方法(1)

📅 最后修改于: 2023-12-03 15:15:44.130000 🧑 作者: Mango

HTMLCollection namedItem() 方法

HTMLCollection namedItem() 方法用于按照元素的名称返回指定的元素。该方法只适用于命名集合，例如 document.forms 或者 document.images。

语法

collection.namedItem(name)

参数

name: 字符串类型，表示要查找元素的名称。

返回值

返回一个指定名称的元素，如果找不到则返回 null。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>HTMLCollection namedItem() 方法示例</title>
  </head>
  <body>
    <form name="myForm">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">年龄：</label>
      <input type="text" id="age" name="age">
      <br>
      <label for="gender">性别：</label>
      <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
      <br>
      <input type="button" value="提交" onclick="submitForm()">
    </form>

    <script>
      function submitForm() {
        const form = document.forms.namedItem("myForm"); // 返回 "myForm" 表单
        const name = form.elements.namedItem("name").value; // 返回 name 为 "name" 的表单元素
        const age = form.elements.namedItem("age").value; // 返回 name 为 "age" 的表单元素
        const gender = form.elements.namedItem("gender").value; // 返回 name 为 "gender" 的表单元素的值
        console.log("姓名：" + name);
        console.log("年龄：" + age);
        console.log("性别：" + gender);
      }
    </script>
  </body>
</html>

以上示例中，通过 document.forms.namedItem("myForm") 返回 name 为 myForm 的表单，再通过 form.elements.namedItem("name") 返回 name 为 name 的表单元素，以此类推，最终获取表单的数据并输出在控制台上。

兼容性

HTMLCollection namedItem() 方法在所有主流浏览器中都有良好的支持。具体信息可参考 https://caniuse.com/?search=namedItem 。