如何使用JavaScript将标题（h1、h2、h3等）文本转换为大写？

没问题，这事儿很容易搞定！下面给你两种可靠的实现方式，都可以直接放到独立的.js文件中使用：

基础实现（静态页面） #

如果你的页面内容是静态的（不会动态加载新标题），直接用这段代码就行：

// 获取所有h1到h6标题元素
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// 遍历每个标题，将文本转换为大写
headings.forEach(heading => {
  heading.textContent = heading.textContent.toUpperCase();
});

这段代码会找到页面中所有的标题标签，把它们的文本内容全部转换成大写格式——比如the white cat就会变成THE WHITE CAT，完全符合你的需求。

稳妥版（兼容动态内容） #

如果你的页面会通过JS动态添加新的标题，或者想确保代码在DOM完全加载后再执行，建议用DOMContentLoaded事件包裹代码：

// 等待DOM加载完成后再执行操作
document.addEventListener('DOMContentLoaded', () => {
  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  headings.forEach(heading => {
    heading.textContent = heading.textContent.toUpperCase();
  });
});

这样可以避免因为DOM还没加载完导致找不到标题元素的问题。

使用方式 #

把上面的代码保存成一个.js文件（比如heading-to-uppercase.js），然后在你的HTML文件的</body>标签前引入它：

<script src="heading-to-uppercase.js"></script>

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