Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple not() DOM Selectors

I want to select a particular node with two not clauses, but I had no success so far. What I need to do is, select an element whose div contains the string 0008, but it's not 10008 and also it does not contain the tag "style", so, in theory it should work like that:

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

However, as you might suspect, it doesn't work that way.

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

Both of them work perfectly individually, of course.

like image 227
Aloc1234 Avatar asked Feb 14 '13 21:02

Aloc1234


People also ask

How do I select multiple classes in DOM?

Use the getElementsByClassName method to get elements by multiple class names, e.g. document. getElementsByClassName('box green') . The method returns an array-like object containing all the elements that have all of the given class names. Here is the HTML for the examples in this article.

What are multiple selectors?

Description: Selects the combined results of all the specified selectors.

How do I select multiple elements in a query?

Use the querySelectorAll() method to select elements by multiple ids, e.g. document. querySelectorAll('#box1, #box2, #box3') . The method takes a string containing one or more selectors as a parameter and returns a collection of the matching elements. Here is the HTML for the examples in this article.

What are selectors in DOM?

DOM element selectors are a group of JavaScript methods that you can use on the document object to access elements in a web page. DOM element selectors have two categories—single and multiple selectors. These functions act in a similar way to CSS selectors.


1 Answers

not 10008 and also it does not …

That's not what your current selector checks, it test whether it has not ( the id and a style attribute ) . Use this instead:

div[id*='0008']:not([id='10008']):not([style])

Your original solution also was not a valid selector, since :not() may only contain one simple selector, while you had two of them. Yet, selector libraries like jQuery's sizzle engine might support them. So with jQuery, the following would work as well:

div[id*='0008']:not([id='10008'],[style])
like image 66
Bergi Avatar answered Oct 31 '22 21:10

Bergi