如何解决无法使用Javascript中的getElementsByClassName方法访问<div>标记?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (157)

我正在尝试学习如何操作DOM中的元素。 所以我在<body>标签下面有这个HTML代码:

<div class="content">
  <h1>Welcome</h1>
  <p>This is a sample website</p>
</div>
<script src="test.js"></script>

这是它的JS代码:

var contento = document.getElementsByClassName("content");
contento.getElementsByTagName("h1")[0].innerHTML = "Bienvenida";

到目前为止我尝试过: 在我的HTML代码中,我尝试将div的class属性更改为id属性,然后在我的JS代码中将getElementsByClassName更改为getElementById。它就像一个魅力。但我想知道为什么如果我使用class属性它不起作用?

DIV标签不支持它吗? 那么为什么在这个例子中使用它:http//www.w3schools.com/html/html_classes.asp

提问于
用户回答回答于

'getElementsByClassName'就像'getElementsByTagName'一样,所以它返回一个包含你指定的类的所有元素的数组

例如,你可以有三个具有该类的元素,因此根据你想要定位的那个元素,你应该使用与它的DOM顺序-1对应的数组索引来定位它;)

你去:)

var contento = document.getElementsByClassName("content")[0];
contento.getElementsByTagName("h1")[0].innerHTML = "Bienvenida";

var contento = document.getElementsByClassName("content")[0];
contento.getElementsByTagName("h1")[0].innerHTML = "Bienvenida";
<div class="content">
  <h1>Welcome</h1>
  <p>This is a sample website</p>
</div>
用户回答回答于

问题是.getElementsByClassName返回节点列表而不是单个节点

尝试做document.getElementsByClassName("content")[0];(假设只有一个,那就是你想要的那个)

扫码关注云+社区

领取腾讯云代金券