javascriptdocumentfragmenthtml-templates

Why does not DocumentFragment has getElementsByName?

I am following the instructions given on MDN to use <template>. Slightly different those give in example, my code is:

<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);
// ...

However, it appears that item, of which the __proto__ is DocumentFragment has no getElementsByName method. Is it very confusing for me now that there is getElementById and querySelector.

Is there any reason why?

In case related, my browsers are FireFox Quantum 69.0.1 are Chrome Canary 79.0.3918.0.

Solution

  • DocumentFragment doesn't implement any of the getElementsBy* methods. However, it does implement querySelector(), so you can use

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