如何使用香草JavaScript选择所有p标签

Question

我想了解如何使用JavaScript选择所有p个标签。因此，如果条件为真或假，我可以对它们进行样式设置。

Answer 1

这将获得页面上的所有p个标签，您可以根据的要求使用它

var list = document.getElementsByTagName("p");
alert(list.length);

但是，根据要求，您需要从暗模式更改为亮模式。我的建议是坚持到底。基于标志状态。您可以通过css加载css并根据需要制作视图p标记。

p {
some css property
}
p:hover {
some css property
}

Answer 2

这是因为当您选择elementsByTagName时，它将为您提供一个HTML集合。大多数情况下，使用起来不太舒服，或者不太容易解释，也许你应该使用document.querySelector((，然后你可以循环或映射它而不会出错。

如果这不起作用。尝试对结果使用Array.from((，如下所示：

let p_elements = Array.from(document.getElementsByTagName('p'));
p_elements.map(p_element => {
p.style.color = "red";
})

Answer 3

我已经确定了我的问题，问题出现在我的JS中。我选择了像这样的<p>标签

const p = document.getElementsByTagName("p");

然后改成

const ps = document.getElementsByTagName("p");

然后

for(p of ps){
p.style.color = "#0f0";
}

之后，文档中的所有<p>标签都成功更改了颜色。

const divs = document.getElementsByTagName("div");
const ps = document.getElementsByTagName("p");
for (div of divs) {
div.style.borderBottom = "black 1px solid";
}
for (p of ps) {
p.style.color = "#0f0";
}

* {
margin: 0;
}
div {
height: 100vh;
}

<div>
<p>hi</p>
<p>hello</p>
<p>hey</p>
</div>
<div></div>
<div></div>
<div></div>