Почему DocumentFragment не имеет getElementsByName? - PullRequest
Новая
       57

Почему DocumentFragment не имеет getElementsByName?

2 голосов
/ 21 сентября 2019

Я следую инструкциям, данным на 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Канарейка 79.0.3918.0.

Ответы [ 2 ]

2 голосов
/ 21 сентября 2019

DocumentFragment не реализует ни один из методов getElementsBy*.Тем не менее, он реализует querySelector(), поэтому вы можете использовать 

item.querySelector("[name=name]").textContent = token;
0 голосов
/ 21 сентября 2019

Объект документа используется для доступа и редактирования любого HTML-элемента getElementbyId (), getElementbyTagName () и getElementsByClassName () являются методом, используемым объектом документа.

при попытке доступа к узлам элемента Template с помощью методаобъекта документа это не будет работать.вы можете реализовать тот же код для добавления в ваш список файлов. 

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>
...