为何h.style返回undefined而h[0].style可访问？DOM操作疑问

嘿，我来帮你把这个问题掰明白！

首先得搞清楚document.getElementsByTagName("h1")这个方法的返回值——它返回的是一个HTMLCollection（类数组对象），哪怕页面里只有一个<h1>标签，它也会把这个元素放进集合里返回给你，而不是直接返回单个DOM元素。

所以你用var h = document.getElementsByTagName("h1")拿到的h是包含那个h1元素的集合，集合本身并没有.style属性，自然会返回undefined。而h[0]是从这个类数组集合里取出第一个（也是唯一一个）元素，这个才是真正的<h1> DOM节点，DOM元素本身自带.style属性，所以你能通过它修改样式。

补充两种更省心的单个元素获取方法 #

如果你确定页面里只有一个<h1>，可以用下面两种方法直接拿到单个元素，不用再通过索引取值：

• document.querySelector("h1")：返回匹配选择器的第一个元素
• document.getElementById("your-h1-id")：如果给h1加了id（比如<h1 id="main-title">Hello</h1>），用这个方法能直接定位到对应元素

举个实际使用的例子：

// 用querySelector直接获取单个h1元素
var h = document.querySelector("h1");
h.style.color = "red"; // 这时候就能直接修改样式啦

再看你控制台里的输出，h的打印结果是HTMLCollection [h1]，这也能直接证明它是一个集合，不是单个元素哦~

内容的提问来源于stack exchange，提问作者Tanveer Brar