为什么 DocumentFragment 没有 getElementsByName 方法？

Question

我正在按照MDN上给出的说明使用<template>。与提供的示例略有不同，我的代码如下：

<template id="template">
    <tr>
        <td name="id"></td>
        <td name="name"></td>
        <td name="size"></td>
        <td name="Status">
        </td>
    </tr>
</template>

// ...
const item = document.importNode(template.content, true);
item.getElementsByName("id")[0].textContent = token;
item.getElementsByName("name")[0].textContent = file.name;
item.getElementsByName("size")[0].textContent = file.size;
fileList.appendChild(item);
// ...

然而，看起来item的__proto__为DocumentFragment的情况下没有getElementsByName方法。对我来说，现在有getElementById和querySelector非常令人困惑。是否有任何原因呢？ 如果相关的话，我的浏览器是FireFox Quantum 69.0.1和Chrome Canary 79.0.3918.0。

- Dummmy

---

DocumentFragment旨在非常轻量级，它不实现完整的Document接口。它没有任何getElementsByXXX方法，只有getElementById。 - Barmar

请注意，常规的HTML元素也不实现getElementsByName。它仅在document元素上可用。 - Barmar

我认为 querySelector(All) 会更重一些？ 我有误解“轻量级”吗？ - Dummmy

感谢指出“普通HTML元素没有实现getElementsByName”。我完全不知道。但是，无论您以前评论轻量级的方式如何，普通HTML元素都有getElementsByClassName和getElementsByTagName，它们不属于DocumentFragment。 我会编辑我的问题... - Dummmy

嗯，这个问题似乎不太好。我认为最好关闭它。再次感谢！ - Dummmy

Answer 1

DocumentFragment 没有实现任何 getElementsBy* 方法。但是，它实现了 querySelector() 方法，因此您可以使用

item.querySelector("[name=name]").textContent = token;

- Barmar

---

谢谢回复！我确实注意到有 querySelector。但我只是想知道：既然在 DocumentFragment 上已经实现了 querySelector(All) 和 getElementById 方法，为什么没有 getElementsBy* 呢？是否有特定的考虑来防止标准/实现，或者我作为 DOM/JavaScript 新手错过了什么？ - Dummmy

Answer 2

Document对象用于访问和编辑任何HTML元素，getElementById()、getElementbyTagName()和getElementsByClassName()是document对象使用的方法。

如果您尝试使用文档对象的方法访问模板元素的节点，它将无法工作。您可以将相同的代码实现为附加到您的filelist对象中。

var Node1 = document.getElementById("template");
var Node2 = document.importNode(Node1, true);
document.getElementById("Table1").appendChild(Node2);

<template id="template">
    <tr>
       <td name="id"></td>
        <td name="name"></td>
        <td name="size"></td>
        <td name="Status">
        </td>
    </tr>
</template>

<Table id="Table1">
    <tr>
        <td name="id"> 1</td>
        <td name="name"> A </td>
        <td name="size"> 20 </td>
        <td name="Status"> N
        </td>
    </tr>
</Table>

- Manisha Sharma

---

有一个叫做 getElementsByName() 的函数：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByName - agrm

在HTML5中，“name”属性已被弃用，并且已被“id”属性替代，适用于许多元素。在适当的情况下，请使用document.getElementById()方法。还可以查看getElementsByClassName()和getElementsByTagName()方法。谢谢。 - Manisha Sharma

"id"不能替换表单输入中的"name"。 - Barmar