如何使用javascript隐藏内部类元素

Question

这里我需要隐藏标签内的内容。我不需要隐藏整个内容类。我可以这样做。这段代码不能正常工作

<div class="content">
        <h2>hai</h2>
</div>

 document.getElementsByClassName("content.h2")[0].style.display="none";

Answer 1

document.querySelector(".content h2").style.display="none"

Answer 2

jQuery的：

$(".content h2").hide();

JavaScript的：

document.getElementsByClassName("content")[0].firstChild.style.display = "none";

虽然第二种方法只有在你的标签中有h2作为第一个元素时才会起作用。对于vanilla javascript，你最好的选择可能是querySelector方法，很多人都发布了这种方法。

Answer 3

您想使用querySelector。

＆＃13;

＆＃13;

 document.querySelector(".content h2").style.display="none";

＆＃13;

<div class="content">
        <h2>hai</h2>
        <p>Test</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

getElementsByClassName只能在参数中有一个类名。你写了＃34; content.h2＆＃34;这并不意味着什么。你想要的是：

document.getElementsByClassName("content")[0].getElementsByTagName("h2")[0].style.display = "none";

如果您的目标是兼容的浏览器，您可能还需要查看querySelector。

document.querySelector(".content h2").style.display = "none";

Answer 5

Javascript在＆＃34; document＆＃34;中实现了一个本机方法。叫＆＃34; querySelector＆＃34;。你几乎可以使用你想要的任何html选择器。（比如在css或jQuery中）

首先，我们查询＆＃34;。＆＃34;

这个类

document.querySelector(".content");

snnipet将返回父div的dom。然后，您可以通过扩展查询来选择内部H2。

document.querySelector(".content h2");

之后你可以使用你想要的对象

document.querySelector(".content h2").style.display="none"

或从dom中删除对象

document.querySelector(".content h2").remove();

抱歉我的英文！

Answer 6

你走了 试试这个

---

HTML

<div class="content">
        <h2 id="idname">hai</h2>
</div>

---

JS

document.getElementById('idname').innerHTML="";