Sublime Text 3 中 innerHTML 属性工作机制及代码用法示例解析

首先明确：innerHTML 是浏览器提供的DOM（文档对象模型）标准属性，和Sublime Text 3没有直接关联，Sublime Text 3仅作为你编写代码的编辑工具使用，该属性的实际运行逻辑完全由浏览器的JavaScript引擎决定。

一、innerHTML 核心工作原理 #

innerHTML 针对DOM节点提供读写两种能力：

• 读操作：读取目标DOM节点下的所有子节点内容，自动序列化为符合HTML语法规范的字符串返回
• 写操作：接收一段HTML格式的字符串作为值，首先清空目标节点原有的全部子节点，再将传入的HTML字符串解析为真实的DOM子树，挂载到目标节点下完成内容替换
• 额外注意：写操作会自动解析传入内容中的HTML标签，若传入的字符串包含可执行的恶意脚本，会直接触发执行，存在XSS安全风险，生产环境操作用户提交的内容时不建议直接使用innerHTML赋值

二、测试代码运行逻辑解析 #

你提供的代码核心逻辑如下（已移除外层无用的p标签，保留原生JS逻辑）：

var a;
document.querySelector(".header").innerHTML = "<h1>WOW</h1>";
a = document.querySelector(".header").innerHTML;
console.log(a);

逐行执行逻辑：

1. var a;：声明一个名为a的变量，未进行赋值，初始值为undefined
2. document.querySelector(".header").innerHTML = "<h1>WOW</h1>";
   • 首先通过document.querySelector(".header")方法，匹配页面上第一个class属性为header的DOM节点
   • 触发innerHTML的写操作：先清空该.header节点原有的所有内容，再将字符串<h1>WOW</h1>解析为一个真实的h1元素节点（节点文本内容为WOW），插入为.header节点的唯一子节点
3. a = document.querySelector(".header").innerHTML;
   • 触发innerHTML的读操作：将.header节点下的所有子内容序列化为HTML字符串，赋值给变量a
4. console.log(a);：将变量a的内容打印到浏览器控制台，最终输出结果为 <h1>WOW</h1>

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