为什么 DocumentFragment 没有 getElementsByName?
Why does not DocumentFragment has getElementsByName?
我正在关注 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);
// ...
但是,item
,其中__proto__
是DocumentFragment
,似乎没有getElementsByName
方法。
现在有 getElementById
和 querySelector
.
是不是让我很困惑
有什么原因吗?
以防万一,我的浏览器是 FireFox Quantum 69.0.1 是 Chrome Canary 79.0.3918.0.
DocumentFragment
没有实现任何 getElementsBy*
方法。但是,它确实实现了 querySelector()
,因此您可以使用
item.querySelector("[name=name]").textContent = token;
文档对象用于访问和编辑任何 HTML 元素 getElementbyId()、getElementbyTagName() 和 getElementsByClassName() 是文档对象使用的方法。
当您尝试使用文档对象的方法访问模板元素的节点时,它将不起作用。您可以实现相同的代码以附加到您的文件列表对象中。
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>
我正在关注 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);
// ...
但是,item
,其中__proto__
是DocumentFragment
,似乎没有getElementsByName
方法。
现在有 getElementById
和 querySelector
.
有什么原因吗?
以防万一,我的浏览器是 FireFox Quantum 69.0.1 是 Chrome Canary 79.0.3918.0.
DocumentFragment
没有实现任何 getElementsBy*
方法。但是,它确实实现了 querySelector()
,因此您可以使用
item.querySelector("[name=name]").textContent = token;
文档对象用于访问和编辑任何 HTML 元素 getElementbyId()、getElementbyTagName() 和 getElementsByClassName() 是文档对象使用的方法。
当您尝试使用文档对象的方法访问模板元素的节点时,它将不起作用。您可以实现相同的代码以附加到您的文件列表对象中。
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>