使用JavaScript querySelector选择嵌套h2标签无效问题求助

问题原因 #

• 语法错误：JavaScript 中操作 style 对象修改样式时，带中划线的 CSS 属性需要转换为驼峰命名，background-color 需改为 backgroundColor；同时代码中使用的 := 是非法赋值语法，正确赋值仅需使用 =。
• DOM 加载时机问题：如果 JS 代码执行时机早于目标 DOM 节点渲染完成的时间，querySelector 会返回 null，后续样式操作无法执行甚至抛出报错。

修复方案 #

首先修正代码语法，同时增加非空判断避免空值报错：

var changeTextForBundle = document.querySelector('.picky-bundler-container .picky-custom-html h2');
if (changeTextForBundle) {
  changeTextForBundle.style.backgroundColor = '#363636';
}

如果修正语法后仍然不生效，调整 JS 执行时机，二选一即可：

• 将 JS 代码放到 HTML 文件的 </body> 标签之前，保证所有 DOM 渲染完成后再执行代码
• 将代码包裹在 DOM 加载完成的事件回调中：

document.addEventListener('DOMContentLoaded', function () {
  var changeTextForBundle = document.querySelector('.picky-bundler-container .picky-custom-html h2');
  if (changeTextForBundle) {
    changeTextForBundle.style.backgroundColor = '#363636';
  }
})

内容的提问来源于stack exchange，提问作者Frontend Dev Web Accessibility