如何使用JavaScript获取h1的message属性值并按需注入标签内容

你可以通过以下步骤完成需求，全程不需要额外依赖：

• 定位目标元素：使用属性选择器匹配带message属性的h1标签，不会误选页面中其他h1元素
• 读取属性值：通过标准DOM方法getAttribute()获取自定义属性存储的内容
• 按需注入内容：在你需要展示的业务场景触发时，把读取到的内容赋值给h1的textContent属性即可，纯文本场景用textContent比innerHTML更安全，可避免XSS注入风险。

对应代码示例 #

你当前的HTML结构：

<h1 message = "this is the title of the page"></h1>

配套JavaScript代码：

// 精准匹配带message属性的h1元素
const h1Element = document.querySelector('h1[message]');

// 这部分替换成你自己的业务判断逻辑，比如用户操作触发、接口请求成功、状态满足条件等
function injectMessageWhenNeeded() {
  // 读取message属性存储的内容
  const messageVal = h1Element.getAttribute('message');
  // 将内容写入h1标签内部
  h1Element.textContent = messageVal;
}

// 触发示例：比如点击页面按钮时展示，你可以替换成实际需要的触发时机
document.querySelector('button')?.addEventListener('click', injectMessageWhenNeeded);

规范提示：HTML标准中自定义属性推荐使用data-前缀命名，比如将属性改为data-message，读取时可以直接通过h1Element.dataset.message获取值，是官方推荐的自定义属性写法，不会和未来HTML新增的原生属性重名，兼容性表现更好。
标准写法示例：

<h1 data-message="this is the title of the page"></h1>

const h1Element = document.querySelector('h1[data-message]');
// 直接通过dataset读取，无需调用getAttribute
const messageVal = h1Element.dataset.message;

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