我无法使用 Javascript 中的 getElementsByClassName 方法访问 <div> 标记

Question

我是 Javascript 的新手，我正在尝试学习如何操作 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

Answer 1

问题是.getElementsByClassName returns一个节点列表而不是单个节点

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

Answer 2

'getElementsByClassName' 就像 'getElementsByTagName' 一样，所以它 returns 一个包含您指定的 class 的所有元素的数组

例如，您可能有三个具有 class 的元素，因此根据您要定位的元素，您应该使用对应于它的 DOM order -1 的数组索引来定位它； )

给你:)

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

EDIT : Added code snippet

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>

I can't access a <div> tag by using the getElementsByClassName method in Javascript