有没有办法通过特定值获取元素[重复]

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() 方法返回与document 中指定的 CSS 选择器匹配的第一个元素。

但是，您可能有多个元素，因此您想使用
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>