getElemntsByClassName无法正常工作

Question

Dom part-4

＆＃13;

＆＃13;

var h1 = document.getElementsByClassName("h1");
	h1.getAttribute("class")//shows me error getAttribute is not function

＆＃13;

<h1 class="h1" id ="h1" alt>Dom part-4</h1>

＆＃13;

＆＃13;

＆＃13;

我不知道为什么会发生这种情况

Answer 1

h1不是元素。来自docs：

  

返回具有所有给定类名的所有子元素的类数组对象...

您必须使用h1[0]。这是docs for getElementsByClassName

var h1 = document.getElementsByClassName("h1");
alert(h1[0].getAttribute("class"))

<h1 class="h1">Test</h1>

Answer 2

document.getElementsByClassName始终返回您已选择的元素对象数组。

例如，您要选择“h1” document.getElementsByClassName将返回此元素的数组。无论它是否是dom中唯一的一个。

将 document.getElementsByClassName（“selector”）[index] 从DOM中选择精确元素

var h1 = document.getElementsByClassName("h1");
console.log(h1);

console.log(h1[0]);

<h1 class="h1">my name abc</h1>

Answer 3

getElementsByClassName返回一个类似数组的对象，因此你需要引用你想要的元素，就像它是一个数组元素一样。

var h1 = document.getElementsByClassName("h1");
h1[0].getAttribute("class")

实施例

var h1 = document.getElementsByClassName("h1");
console.log( h1[0].getAttribute("class") )

<div class="h1">test</div>