Hacker News new | ask | show | jobs
by rudian 1667 days ago
Yeah but they’re not necessary for selection. Label elements actually need an input with ID to function. The other useful use for IDs is for deep-links in articles.

But then again that doesn’t mean the id should be used for selection (in JS nor CSS) as it’s probably easier to target many elements with a class, should they ever co-exist. This is basically what you end up with if you build components anyway (even without specific frameworks)
1 comments
iKevinShah 1667 days ago
> Yeah but they’re not necessary for selection

wouldn't it be easier to select an item with ID than select one with a class name and then iterate over to find which one you want. I am talking about items which exist only once. I am still not clear on why not to use IDs in a page in your opinion.

link
throwanem 1666 days ago
In terms of convenience, there's no meaningful difference between querySelector and getElementById. Given

    <html>
      <body>
        <div id="example" class="example" />
      </body>
    </html>
we can do any of

    document.querySelector('.example');
    document.querySelector('#example');
    
    document.getElementById('example');
and get the same result, namely the Element object representing that div.

When there are multiple matching elements on the page, results differ. From document.querySelector() you get back "the first Element within the document that matches the specified selector, or group of selectors" [1], and the spec defines the search for "first" as depth-first. [2] [3] Meanwhile, the docs for document.getElementById() [4] mention that "element IDs are required to be unique if specified", and this too we find borne out in the relevant spec. [5]

If there is a specified way for DOM implementations to behave when element IDs aren't unique in the document, I haven't yet been able to find it. In any case, given the liberality with which the docs are peppered with warnings and reminders that IDs must be unique, violating that invariant takes us outside the expectation of implementation guarantees, so it's not all that easy to complain if it behaves differently across browsers or otherwise isn't predictable.

So, for elements that exist only once, it's as easy to select them by class as by ID, and using a class has the additional benefit that it's one fewer refactor if you do decide to use that element more than once - if you use ID to begin with, you have to change that when you reuse the element. This is also not a meaningful difference in convenience, I think.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Document/qu...

[2] https://drafts.csswg.org/selectors-4/#match-a-selector-again...

[3] https://dom.spec.whatwg.org/#concept-shadow-including-tree-o...

[4] https://developer.mozilla.org/en-US/docs/Web/API/Document/ge...

[5] https://html.spec.whatwg.org/multipage/dom.html#global-attri...

link