JavaScript按名称获取元素

在JavaScript中，通过名称获取HTML页面中的元素是非常常见的操作。使用JavaScript的 document.getElementsByName() 方法可以轻松地按名称获取HTML元素。

语法

document.getElementsByName(name);

其中，name 参数表示要查找的元素名称。

返回值

返回值是一个 NodeList 对象，包含所有匹配的元素。

示例

下面的示例演示了如何获取所有名称为“myInput”的input元素：

<input type="text" name="myInput">
<input type="text" name="myInput">
<input type="text" name="notMyInput">

let inputs = document.getElementsByName("myInput");
console.log(inputs.length); // 2

注意事项

• document.getElementsByName() 方法大小写敏感。
• 返回的 NodeList 对象是一个动态集合，意味着当页面的元素发生变化时，它也会随之更新。
• 如果没有找到任何匹配的元素，将会返回空的 NodeList 对象。
• 如果只需要获取单个元素（假设只有一个匹配项），可以使用 document.getElementsByName(name)[0] 或者 document.querySelector('[name="' + name +'"]')。

总结

在JavaScript中，按名称获取元素非常常见。使用 document.getElementsByName() 方法可以轻松地完成这个任务。但是需要注意大小写敏感和返回的 NodeList 对象是一个动态集合的特点。

参考资料：

• MDN web docs