本文深入探讨了Web API中`setAttribute`和`getAttribute`方法如何处理包含特殊字符的属性值，以及`outerHTML`在将DOM元素序列化为HTML字符串时，如何自动进行字符转义。我们将阐明DOM内部表示与HTML字符串表示之间的关键差异，帮助开发者理解浏览器在幕后如何确保数据完整性和HTML有效性。
在Web开发中，我们经常需要通过JavaScript操作DOM元素的属性。当属性值包含双引号（"）或连字符（&）等特殊字符时，开发者可能会疑惑这些字符是否需要手动转义，以及浏览器是如何处理的。实际上，这涉及到DOM的内部工作机制以及HTML序列化过程。
理解setAttribute和getAttribute的行为
setAttribute和getAttribute方法直接作用于DOM（文档对象模型）的内部表示。DOM是一个内存中的对象模型，它代表了文档的结构，与底层的HTML字符串表示是分离的。
当你使用setAttribute设置一个属性时，DOM会将你提供的字符串值原封不动地存储起来，而不会进行任何HTML实体转义。这意味着，如果你传递一个包含双引号或连字符的字符串，DOM会精确地保存这个字符串。随后，当你使用getAttribute获取该属性时，你会得到完全相同的原始字符串。
立即学习“前端免费学习笔记（深入）”；
以下代码示例展示了这一行为：
const e = document.createElement('i');
// 设置属性值，包含双引号和连字符
e.setAttribute('a', 'the "a" & b');
// 使用getAttribute获取属性值，得到原始字符串
console.log( 'getAttribute:', e.getAttribute('a') ); // 输出: getAttribute: the "a" & b
// 尝试从outerHTML中匹配属性值（注意这里只是为了演示，不推荐直接从outerHTML解析）
// 实际的outerHTML会进行转义，因此这里的匹配结果会是转义后的
// console.log( 'actual markup:', e.outerHTML.match(/a="(.+)"/)[1] );从上述示例可以看出，getAttribute返回的正是我们通过setAttribute设置的原始字符串。这表明DOM在内部存储属性值时，并不关心HTML转义。
outerHTML与HTML字符串的生成
字符转义的机制并非发生在setAttribute或getAttribute阶段，而是在DOM元素被序列化为HTML字符串时。outerHTML属性的作用正是提供一个元素的HTML序列化表示。
根据MDN Web Docs的定义，读取outerHTML的值会返回一个包含元素及其所有后代的HTML序列化字符串。在这个序列化过程中，浏览器会自动识别并转义那些在HTML语法中具有特殊含义的字符。例如，双引号（"）会被转义为"，连字符（&）会被转义为&。这样做是为了确保生成的HTML字符串是格式良好且有效的，以便它可以被正确地解析和渲染，或者插入到其他HTML上下文中而不会破坏结构。
考虑以下示例，它扩展了之前的代码：
const e = document.createElement('i');
e.setAttribute('a', 'the "a" & b');
// 获取元素的outerHTML，此时特殊字符已被转义
const serializedHTML = e.outerHTML;
console.log( 'outerHTML:', serializedHTML ); // 输出: outerHTML: <i a="the "a" & b"></i>
// 将这个HTML字符串插入到另一个DOM元素中
const div = document.createElement('div');
div.innerHTML = serializedHTML;
// 从新插入的DOM元素中再次获取属性值
const attr = div.querySelector('i').getAttribute('a');
console.log( 'getAttribute after re-parsing:', attr ); // 输出: getAttribute after re-parsing: the "a" & b从这个示例中，我们可以清楚地看到：
- outerHTML输出的字符串中，双引号和连字符都被正确地转义了（"和&）。
- 尽管outerHTML生成了转义后的字符串，但当这个HTML字符串被解析并重新构建成DOM时（通过div.innerHTML = serializedHTML），再使用getAttribute获取属性值，我们仍然能得到原始的、未转义的字符串'the "a" & b'。这进一步证明了getAttribute操作的是DOM的内部表示，而HTML转义是序列化过程的一部分。
核心要点与注意事项
- DOM内部存储：setAttribute和getAttribute直接操作DOM的内部数据结构。它们存储和检索的是原始的字符串值，不涉及HTML实体转义。
- HTML序列化：outerHTML、innerHTML以及浏览器在渲染DOM到屏幕时，会执行HTML序列化过程。在这个过程中，为了生成符合HTML规范的字符串，特殊字符会被自动转义。
- 无需手动转义：作为开发者，当你使用setAttribute等DOM操作方法时，通常不需要手动对属性值中的特殊字符进行转义。浏览器会在必要时（例如生成HTML字符串时）自动处理。
- outerHTML的来源：outerHTML的文本内容是根据当前的DOM结构生成的，它不关心原始创建该DOM的HTML字符串是怎样的。即使DOM是通过JavaScript动态创建和修改的，outerHTML也会生成一个有效的HTML表示。
总结来说，浏览器通过分离DOM的内部表示和HTML字符串的序列化来优雅地处理特殊字符。这使得开发者可以专注于操作DOM对象，而无需担心底层的HTML转义细节，同时保证了生成的HTML始终是有效和安全的。
