如何使用JavaScript修改<div>内指定<h1>元素的样式？

用户提供的相关代码如下：

HTML 代码 #

<div id="mydiv"> Text inside div <h1> Header inside div </h1> </div> <h1> Header outside div </h1>

CSS 代码 #

#mydiv h1 { color: blue; }

用户已掌握修改<div>内文本颜色的方法：

document.getElementById("mydiv").style.color = "red";

需求：仅修改<div>内<h1>元素的颜色，不改动原有HTML、CSS，且不影响<div>外的<h1>元素。

解决方案 #

这里有几种实用的实现方式，完全符合你的要求：

方法1：用 querySelector 精准定位 #

querySelector 支持直接使用CSS选择器语法，和你现有CSS的匹配逻辑一致，非常直观：

// 选中mydiv内部的h1，将颜色改为你需要的（示例用绿色）
document.querySelector('#mydiv h1').style.color = 'green';

这种方式只会匹配<div id="mydiv">内部的<h1>，对外部标题完全无影响。

方法2：通过父元素定位子元素 #

如果你偏好先获取父元素再找子元素的方式，可以这样写：

// 先拿到mydiv元素
const myDiv = document.getElementById('mydiv');
// 从mydiv中取出第一个h1并修改颜色
myDiv.getElementsByTagName('h1')[0].style.color = 'green';

注意getElementsByTagName返回的是元素集合，[0]用来选取第一个匹配项；如果你的div里有多个<h1>，可以循环遍历这个集合批量修改。

方法3：处理多个内部

如果<div id="mydiv">内有多个<h1>，想要一次性修改所有，可以用querySelectorAll：

// 获取mydiv内部所有h1元素
const innerH1s = document.querySelectorAll('#mydiv h1');
// 遍历每个元素修改颜色
innerH1s.forEach(h1 => {
  h1.style.color = 'green';
});

以上几种方法都不需要修改原有代码，且只会作用于目标范围内的<h1>元素~

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