为什么DocumentFragment没有getElementsByName？

Question

我正在跟随the instructions given on 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);
// ...

但是，__proto__为DocumentFragment的item似乎没有getElementsByName方法。现在有了getElementById和querySelector，这对我来说是不是很困惑。

有什么原因吗？

在案例相关的情况下，我的浏览器是Chrome 69.0.1是FireFox Canary 79.0.3918.0。

Answer 1

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

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

Answer 2

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

当您尝试使用document对象的方法访问模板元素的节点时，它将不起作用。您可以实现相同的代码以附加到您的文件列表对象中。

​

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>

​