getElementsByName仅局限于Document作用域？获取指定id内同名标签的替代方案

尝试在特定id的元素内查找所有name属性为指定值的HTML标签时，使用代码document.getElementById("myid").getElementsByName("name");抛出错误getElementsByName is not a function，示例代码如下：

<!DOCTYPE html>
<html>
  <body>
    <div id="myid">
        <p name="name">first name</p>
        <p name="name">first name</p>
    </div>
    <p id="result">RESULT</p>
  <script>
    let el = document.getElementById("myid")
    let names=el.getElementsByName("fname");
    document.getElementById("result").innerHTML = elements[0].innerHTML;
  </script>
  </body>
</html>

针对以下两个问题解答：

1. "getElementsByName仅局限于Document作用域，不存在于其他作用域"的说法是否正确？ #

正确。getElementsByName是Document接口专属的方法，只能通过document对象调用，普通DOM元素节点（比如通过getElementById获取的<div>元素）并没有这个方法，直接在元素上调用必然会触发"not a function"错误。

2. 应使用什么替代方法来替代getElementsByName？ #

推荐两种常用方案：

方案一：使用querySelectorAll（优先推荐） #

这是最简洁灵活的方式，支持CSS属性选择器，可以在指定元素的范围内精准查找匹配name属性的标签：

let el = document.getElementById("myid");
// 查找el元素内所有name属性为"name"的标签
let matchedElements = el.querySelectorAll('[name="name"]');

querySelectorAll返回一个静态的NodeList，可直接遍历或通过索引访问。

方案二：遍历筛选（兼容旧环境） #

如果需要兼容不支持querySelectorAll的旧浏览器，可以先获取元素下的所有标签，再手动筛选name属性匹配的项：

let el = document.getElementById("myid");
let allParagraphs = el.getElementsByTagName("p");
let matchedElements = [];
for (let i = 0; i < allParagraphs.length; i++) {
  if (allParagraphs[i].getAttribute("name") === "name") {
    matchedElements.push(allParagraphs[i]);
  }
}

修正后的完整示例代码 #

<!DOCTYPE html>
<html>
  <body>
    <div id="myid">
        <p name="name">first name</p>
        <p name="name">second name</p>
    </div>
    <p id="result">RESULT</p>
  <script>
    let el = document.getElementById("myid");
    let names = el.querySelectorAll('[name="name"]');
    // 输出第一个匹配元素的内容
    document.getElementById("result").innerHTML = names[0].innerHTML;
  </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Damago