有没有一种方法可以通过特定值获取元素

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>