Why does not DocumentFragment has getElementsByName?

Question

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.

Toothwort

DocumentFragment is intended to be very lightweight, it doesn't implement the full Document interface. It doesn't have any of the getElementsByXXX methods, just getElementById. – Radiculitis

Note also that regular HTML elements don't implement getElementsByName, either. It's only available on the document element. – Radiculitis

I think querySelector(All) would be heavier? Am I misunderstanding "lightweight"? – Toothwort

Thanks for pointing out "regular HTML elements don't implement getElementsByName". I did not know it at all. But regardless of your former comment concerning lightweight, regular HTML elements have getElementsByClassName and getElementsByTagName which are not owned by DocumentFragment. I will edit my question... – Toothwort

Emmm. It seems that the question is not good. I think it would be better to close it. Thanks again! – Toothwort

Answer 1

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

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

Radiculitis

Thanks for the reply! I did notice that there is querySelector. But I am just wondering: now that there is querySelector(All) and getElementById method implemented on DocumentFragment, why isn't there getElementsBy* also? Is there any specific considerations to prevent the standard/implementation or am I missing something (as a newbie in DOM/JavaScript)? – Toothwort

Answer 2

Document object is used to access and edit any HTML element getElementbyId(), getElementbyTagName() and getElementsByClassName() are method used by document object.

as you are trying to access Nodes of Template element using method of document object it will not work. you can implement the same code to append in your filelist object.

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>

Michaeu

There is getElementsByName(): developer.mozilla.org/en-US/docs/Web/API/Document/… – Mylor

Thanks. In HTML5, the "name" attribute is deprecated and has been replaced by the "id" attribute for many elements. Use the document.getElementById() method where it is appropriate. Also look at the getElementsByClassName() and getElementsByTagName() methods. – Michaeu

id doesn't replace name for form inputs. – Radiculitis