Why is there no "element.idList.contains" in Javascript?

JavaScript
1

Sometimes I use a similar code:

if ( !document.body.classList.contains(!"logged-in") ) { //content... }

Why is there only classList.contains but no idList.contains (I know a similar behavior is possible with jQuery but I’m asking about vanilla).

I found zero direct results on “element.idList.contains” in Google.

As a beginner I ask, just to improve general knowledge of the language: Why is there no such feature and are there plans to add this to ES7?

2

What is element.idList supposed to be?

3

It’s a general example for like:

document.body.classList.contains(!"logged-in")

But with:

document.body.idList.contains(!"logged-in")

4

Reading the link below, I’m guessing it doesn’t exist because it doesn’t need to. An element can only have one <id> attribute, whereas it could have multiple classes associated with it. classList will return a comma separated list of all classes on an element.

4 Likes
5

there is simply no such DOM property named idList. Wouldn’t make any sense either as IDs must be unique throughout the document.

A simple test for a document-wide ID were:

null === document.getElementById('logged-in')

The same test for an element’s ID:

this.id !== 'logged-in'
4 Likes
6

So if I want the absence of a “logged-in” ID, as a condition, I could make:

if ( document.body.id != "logged-in" ) { //do... }

Or rather

if ( !body.document.querySelector(#logged-in) ) { //do... }

Is that accurate?

7

the first only checks the id in <body> itself.

the second call throws an error (body.document is null or not an object).

1 Like
8

Yes, the first then is what I need. Do you know a way to do this also with querySelector? Checking if body has this ID with querySelector?

9 
document.querySelector('body#logged-in')
1 Like
10

Amazing!!! I’ve learned much Dor, thanks!!!

11

I believe the fundamental to focus on here is the fact that ids are unique, there is only one per page. Hence, you should never need to look for body#logged-in (if put a timer on that + queryselector, you will also see it is much less performant than getElementById), you should only have to look for that one id ‘logged-in’.

To determine if user is logged in, I would definitely used a class on the body, since it is a state, it’s not identifying anything. Or a fancier way might be to have a data attribute: data-user=“{logged-in: true, email: some@one.com}” and get that via JSON.parse(document.body.getAttribute(‘data-user’))… good way

12

But that only works, if the ID only ever appears on <body>. If it for whatever reason appears somewhere else, it gives an invalid result.

I second that.

13

But that only works, if the ID only ever appears on . If it for whatever reason appears somewhere else, it gives an invalid result.
Exactly! There should never be duplicate IDs on the page. a) it won’t validate on w3c, penalizing your SEO and b) causes issues like this.

I worked a large e-comm company, lots of devs, and this was something we faced a lot. Finally, we had to make a standard to make 100% sure that ID didn’t exist on the page already, and that they are specific to a certain idea.

14

nevertheless, the false result would even appear if there were said (indeed unique) ID, just not on the element you expect.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.