Есть ли способ получить элементы по определенным значениям

Question

Я пытаюсь кодировать переключатель, который будет показывать / скрывать весь контент на любой странице, которая имеет определенный тег. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как определить элементы.

Веб-страницы создаются с помощью программы MadCap Flare. Во Flare вы можете добавить условные текстовые теги к элементам, которые помогают определить, что есть, а что нет (среди прочего). В окончательном выводе HTML эти условные текстовые теги все еще присутствуют. Таким образом, абзац с условным текстовым тегом MyTag будет выглядеть так:

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

Учитывая, что эти условные текстовые теги являются родными для Flare, я пытаюсь найти способ идентифицировать все элементы с конкретными условными текстовыми тегами.

Я посмотрел на GetElementByID, GetElementsByTagName, GetElementsByClassName и надеялся, что было что-то похожее на запрос и найти все элементы с данным условным текстовым тегом.

Answer 1

Вы можете использовать комбинацию селекторов CSS и JavaScript для этого:
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>

querySelector описывается w3schools.com:

querySelector() Метод возвращает первый элемент, который соответствует указанному селектору (ам) CSS в document,

Тем не менее, вы, вероятно, имеете несколько элементов и, следовательно, вы хотите использовать
querySelectorAll(),
Но вам придется пройтись по элементам по отдельности:

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>