HTML Collection VS Node List

Hello how are you?
Have you ever thought about this?
Or did you pay attention to it?
So now that you are reading this and I congratulate you, you are entering a sweet and interesting world.

What is Node List ?

Simply put, it contains all the nodes.

what is HTML Collection ?

It only contains elements and does not contain textual nodes

only the nodes of the elements, such as: div

querySelector or getElementBy ?

What do you use to save your elements in JavaScript?
getElementBy or querySelector?
It's interesting for you to be interesting?
The two who do a job!

In addition, it can also be selected through the queryselector
similar to the CSS.

Well let's pay as we! Dead and alive data!
I'm sure you learned the DOM and learned well because we need it a lot here.
You can get a node of the list using the querySelector, which includes the the node dead!.
But using the getElementBy you have an HTML Collection of the living elements.

So! So far we have found out what one of them is and how we can have a node list or html collection.
So what are the dead and live data now?

Dead or alive?

let li = document.createElement('li')
document.body.appendChild(li)

Remember?
We made a Li element here and then it to the Body

const item = document.getElementsByTagName("div");
// select div from the HTML page by getElementsBy
console.log(item);
let div = document.createElement("div");
document.body.append(div);
console.log(item);
// select div from the HTML page by querySelector
const item = document.querySelectorAll("div");
console.log(item);
let div = document.createElement("div");
document.body.append(div);
console.log(item);

Here we used the two ways to seize.
Please try this code too to get to the conclusion together.

If you use getElementBy, your data is alive and you can see it on the console after you have another data to the page.
But if you use the querySelector you have a dead or static list, and if more elements are added to the knot, it will not be updated.

Be sure to try this code and play with that code. I'm sure it will be a wonderful experience for you.

If you enjoy this style of posts, you can follow my articles on the following sites:

Third -party cookie
Linkedin

Comments

[lionel-rowe]

Here's an "alive" version of document.querySelectorAll:

function qsa(selector) {
    return new Proxy(Object.create(null), {
        get(t, k) {
            return document.querySelectorAll(selector)[k]
        }
    })
}

Usage:

const divs = qsa('body > div[id]:not([class])')

for (let i = 0; i < 5; ++i) {
    const id = crypto.randomUUID()

    const div = document.createElement('div')
    div.id = id
    document.body.append(div)

    console.assert([...divs].at(-1).id === id)
    div.remove()
    console.assert([...divs].at(-1).id !== id)
}

Not intended for production usage, more like idle curiosity.

[Mohammad Kargar]

Perfect article

[mohammad_rz1]

It was a very practical and useful article