Question

有人能解释一下为什么 h.style 返回未定义，而 h[0].style 已定义吗？[重复]

2020-06-19

165

javascript html css dom

我是初学者，正在学习 DOM 操作，并且已在变量 h 中选择了标签。我的在线讲师可以访问 h.style，但对我来说它不起作用。我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Manipulation Basics
    </title>
</head>
<body>
    <h1> Hello </h1>

</body>
</html>

以下是控制台中发生的情况：

var h=document.getElementsByTagName("h1");
undefined
h
HTMLCollection [h1]0: h1length: 1__proto__: HTMLCollection
h.style;
undefined
h[0].style;
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
h.style.color="red";
VM999:1 Uncaught TypeError: Cannot set property 'color' of undefined
    at <anonymous>:1:14
(anonymous) @ VM999:1
h[0].style.color="red";
"red"

Answer 1

getElementsByTagName() 始终返回一个由具有匹配标签名称的所有元素组成的数组。因此，“h”包含一个数组，这就是为什么 h.style 未定义但 h[0].style 已定义的原因。

Answer 2

当您使用许多 h1 标签时，您将需要访问每个 h1 标签。因此 getElementsByTagName() 会以数组形式返回每个 h1 标签。如果您想私下访问元素，您可以为您的 h1 标签指定 id，然后使用 getElementById("id")

例如

var h = document.getElementById("privateTag");
console.log(h);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="privateTag">Hello</h1>
</body>
</html>