GetElementBy仅适用于ID不适用于类

Question

使用下面的代码我想在用户单击<button>时插入一些<content>。

之前我与this代码工作完全正常。然后，我将id="content"更改为class="content"，将JavaScript代码的document.getElementById更改为getElementsByClassName，现在该功能不再有效。

我有什么要改变我的代码，所以它也适用于类？

您还可以找到我的代码here。

window.myFunction = function() { 
 
    var x = document.getElementsByClassName("content"); 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
}

.content { 
 
    width: 80%; 
 
    padding: 10% 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
}

<button onclick="myFunction()">Button</button> 
 

 
<div class="content"> 
 
Content of element 
 
</div>

Answer 1

方法getElementsByClassName

返回其具有所有的 给定的类名的所有子元素的阵列状物体。

详情请点击here。出于这个原因，你必须得到你的数组的第一个元素，以获得相同的结果。您可以通过使用0

window.myFunction = function() { 
 
    var x = document.getElementsByClassName("content")[0]; 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
}

.content { 
 
    width: 80%; 
 
    padding: 10% 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
}

<button onclick="myFunction()">Button</button> 
 

 
<div class="content"> 
 
Content of element 
 
</div>

Answer 2

一种更好的方式索引做这个访问是：在本地JavaScript提供

var x = document.querySelector(".content");

Answer 3

你有不同的方法（对于那些不使用jQuery）来获取页面上的任何元素。 这些是

1. document.querySelectorAll（）

   document.querySelectorAll("div.classNameOne, div.classNameTwo");

2. document.querySelector（选择器）

   document.querySelector("div.className")

3. 的document.getElementById（元件的idname）

   document.getElementById("element_id")

4. document.getElementsByTagName（标记名 - 让网页上的所有股利或跨度）

   document.getElementsByTagName("div")

5. 文件。getElementsByClassName方法（类名 - 获取特定类名的所有元素）

   document.getElementsByClassName("your_css_class_name")

6. 您还可以通过

   document.getElementsByTagName("H1")[0].getAttribute("class");

得到元素的任何属性，当它返回多个元素，它像数组一样返回它们。你可以对其进行索引使用从0