Select All Elements With a "Data-Xxx" Attribute Without Using Jquery

Select all elements with a data-xxx attribute without using jQuery

You can use querySelectorAll:

document.querySelectorAll('[data-foo]');

Select elements with data attribute not using jQuery

It's simply this:

var elements = document.querySelectorAll('[data-mydata]');

JavaScript - Select all elements with [data-some] attribute not having a specific value

You can use a single, though fairly complex, selector:

[data-some]:not([data-some="abcd"])

Be careful with compatibility, you may need a simpler selector plus some script depending on the hosts you need to support.

E.g.

[data-some]:not([data-some="abcd"]) {   background-color: #ffff66;}

<p data-some="abcd">data-some="abcd"</p><p data-some="zzz">data-some="zzz"</p><p data-some="">data-some=""</p><p>no data-some attribute</p>

Selecting element by data attribute with jQuery

$('*[data-customerID="22"]');

You should be able to omit the *, but if I recall correctly, depending on which jQuery version you’re using, this might give faulty results.

Note that for compatibility with the Selectors API (document.querySelector{,all}), the quotes around the attribute value (22) may not be omitted in this case.

Also, if you work with data attributes a lot in your jQuery scripts, you might want to consider using the HTML5 custom data attributes plugin. This allows you to write even more readable code by using .dataAttr('foo'), and results in a smaller file size after minification (compared to using .attr('data-foo')).

Select all node that has certain css-rule without jQuery

You could read the loaded css rules using document.styleSheets. Then, find the rules that are setting the specific property, in your case style.color == "blue".

Then, get the selectorText from the rule, it will give you the selectors. It will be easy then to select the elements using document.querySelector() passing the obtained selectors as the parameter.

var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;for (var x = 0; x < classes.length; x++) {  var cls = classes[x];  if(cls.style.color == "blue") {    alert(cls.selectorText);        //Gets a node list of the elements matching the selector    var elements = document.querySelectorAll(cls.selectorText);  }}

html {  color: blue;}div.x {  color: blue;}

Get length of all data attributes of element, but dynamically

The data method only reads the values of custom data attributes on first invocation, as mentioned in the docs. So either add your additional data using the data method (then jQuery will handle storage internally), or, if you need them to be actual custom data attributes, use HTMLElement.dataset instead of jQuery's data method.

That is a DOMStringMap, which does not appear to have any length or size properties - so you will have to loop over all the entries, and count them while doing so. https://stackoverflow.com/a/43021996/1427878 shows how to loop over them with a simple for-in loop.

How can I hide element with the data-xxx attribute in javascript?

Pure CSS

You could set the display to none for a "data-attribute" of platform that equals "dinner".

div[data-platform="dinner"] {
  display: none;
}

<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

Select All Elements With a "Data-Xxx" Attribute Without Using Jquery