如何访问<h2>子元素并修改背景色？代码问题排查求助

核心问题原因 #

你用firstChild和nextSibling遍历子节点时，会把DOM里的**空白文本节点（比如换行、空格）**也算作子节点，导致你定位到的不是目标<h2>元素，自然无法调用style属性。

可靠的解决方法 #

方法1：直接定位目标元素（最推荐）

利用querySelector在父元素范围内直接查找<h2>，无需手动遍历节点：

let parentOfMyTraining = document.getElementById('assignedTrainingWidget');  
let targetH2 = parentOfMyTraining.querySelector('h2');
// 修改背景色
targetH2.style.backgroundColor = '#your-color';
// 若要修改文字颜色，注意是color而非fontColor
targetH2.style.color = '#text-color';

方法2：只遍历元素节点

如果一定要通过子节点索引定位，用children属性（仅返回元素节点，忽略空白文本节点）替代childNodes/firstChild：

let parentOfMyTraining = document.getElementById('assignedTrainingWidget');  
// 假设<h2>是父元素下的第一个元素子节点，索引从0开始
let targetH2 = parentOfMyTraining.children[0];
targetH2.style.backgroundColor = '#your-color';

额外注意点 #

• 你注释里写的fontColor是错误的，DOM style属性中文字颜色对应color，背景色是backgroundColor。
• 如果父元素下有多个<h2>，可以给目标<h2>加更精确的选择器（比如结合class），比如querySelector('h2.widget-title')。

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