DEV Community

Cover image for HTML Collection VS Node List

HTML Collection VS Node List

Fatemeh Satouri on February 17, 2024

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 a...
Read full post
Collapse
 
lionelrowe profile image
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]
        }
    })
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

Not intended for production usage, more like idle curiosity.

Collapse
 
dofxo profile image
Mohammad Kargar •

Perfect article

Collapse
 
mohammad_rz1 profile image
mohammad_rz1 •

It was a very practical and useful article