Is there a way to get elements by specific values [duplicate]

Question

I am trying to code a toggler that will show/hide all of the content on any given page that has a specific tag. The problem I am facing is that I cannot figure out how to identify the elements.

The web pages are created using a program called MadCap Flare. In Flare, you can add Conditional Text Tags to elements that help determine what is and isn't built (among other things). In the final HTML output, these Conditional Text Tag are still present. So a paragraph with a Conditional Text Tag called MyTag would show as:

<p data-mc-conditions="MyTag">Here is my paragraph text.</p>

Given that these Conditional Text Tags are native to Flare, I am trying to find a way to identify all elements with specific Conditional Text Tags.

I looked at GetElementByID, GetElementsByTagName, GetElementsByClassName, and was hoping there was something similar to query and find all elements with a given Conditional Text Tag.

score 6 · Accepted Answer · 2019-05-10 20:39:31Z

You can use a combination of CSS selectors and javascript for this:
document.querySelector("p[data-mc-conditions='MyTag']");

document.querySelector("p[data-mc-conditions='MyTag']").style.border = "5px solid yellow";

<p data-mc-conditions="MyTag">Here is my paragraph text.</p>

The querySelector is described by w3schools.com:

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

However, you probably have multiple elements and, therefore, you want to use
querySelectorAll().
But you will have to loop through the elements individually:

var elements = document.querySelectorAll("p[data-mc-conditions='MyTag']"); for (var i = 0; i < elements.length; i++) { elements[i].style.border = "5px solid yellow"; }

<p data-mc-conditions="MyTag">Here is my paragraph text.</p> <p data-mc-conditions="MyTag">Here is my paragraph text.</p> <p data-mc-conditions="MyTag">Here is my paragraph text.</p> <p data-mc-conditions="MyTag">Here is my paragraph text.</p>

CSS selectors? Are those just element and attribute selectors in the querySelector?
@BWonder CSS = Cascading Style Sheets Your queryselector has nothing to do with styles. data-mc-conditions='MyTag' is a attribute/property known as a data-set not CSS
@NewToJS I think you got me wrong there. What I meant was we use CSS selectors to determine the elements to select. This is literally the definition of querySelector, as posted above. So you are right: it has nothing to do with style, but I never said so.

Collectives™ on Stack Overflow

Is there a way to get elements by specific values [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related