-1

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.

jhpratt
  • 6,841
  • 16
  • 40
  • 50
hoffie4
  • 99
  • 4

1 Answers1

6

You can use a combination of CSS selectors and 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`? – NewToJS May 10 '19 at 20:33
  • 1
    this works with jquery also – Jacob Thomas May 10 '19 at 20:37
  • @NewToJS Yes. You select elements by using a CSS selector. –  May 10 '19 at 20:44
  • @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 May 10 '19 at 20:49
  • 2
    @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. –  May 11 '19 at 00:14
  • Sounds right to me. In my opinion it is pretty obvious what he meant... – Aaron3219 May 11 '19 at 00:17
  • @Aaron3219 look at the original post before the many edits. I only pointed this out because it could mislead people to thinking `[data-mc-conditions='MyTag']` in the `querySelector` is some `css` selector which it isn't. – NewToJS May 11 '19 at 11:13