5

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.

Dummmy
  • 688
  • 1
  • 5
  • 11
  • `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`. – Barmar Sep 21 '19 at 08:36
  • 2
    Note also that regular HTML elements don't implement `getElementsByName`, either. It's only available on the `document` element. – Barmar Sep 21 '19 at 08:36
  • I think `querySelector(All)` would be heavier? Am I misunderstanding "lightweight"? – Dummmy Sep 22 '19 at 01:43
  • 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... – Dummmy Sep 22 '19 at 01:45
  • Emmm. It seems that the question is not good. I think it would be better to close it. Thanks again! – Dummmy Sep 22 '19 at 01:52

2 Answers2

4

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

item.querySelector("[name=name]").textContent = token;
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • 1
    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)? – Dummmy Sep 22 '19 at 01:35
0

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>
Manisha Sharma
  • 86
  • 8
  • There is getElementsByName(): https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName – agrm Sep 21 '19 at 09:24
  • 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. – Manisha Sharma Sep 21 '19 at 10:21
  • `id` doesn't replace `name` for form inputs. – Barmar Sep 22 '19 at 01:56