HTML | DOM 内部文本属性

HTML的DOM文档模型表示Web页面，它允许程序员通过JavaScript操作HTML元素，其中内部文本属性是其中一个值得我们关注的属性

innerHTML属性

innerHTML属性返回或设置指定元素的HTML内容。innerHTML是DOM规范中的属性，因此大多数浏览器都支持。使用innerHTML属性，可以动态生成HTML文本。下面是innerHTML属性的示例：

const element = document.getElementById("example");
element.innerHTML = "<b>Hello, world!</b>";

在这个示例中，我们用innerHTML属性设置了id为"example"的元素的文本内容为"Hello，world!"，这个文本将会以粗体格式显示在页面中。

outerHTML属性

outerHTML属性返回或设置指定元素及其所有子元素的HTML表示形式。将outerHTML属性设置为指定的值会替换整个元素。下面是outerHTML属性的示例：

const element = document.getElementById("example");
element.outerHTML = "<div id='example'><b>Hello, world!</b></div>";

在这个示例中，我们用outerHTML属性设置了id为"example"的元素及其所有子元素的文本内容为"Hello，world!"。与innerHTML属性不同的是，outerHTML将element及其内容替换为一个父级div元素，而不仅仅是替换内容。

textContent属性

textContent属性返回或设置指定元素的文本内容。与innerHTML和outerHTML属性不同，textContent仅返回当前元素的文本内容，而不包括当前元素的HTML标记。示例如下：

const element = document.getElementById("example");
element.textContent = "Hello, world!";

在这个示例中，我们用textContent属性替换了id为"example"的元素的文本内容为"Hello，world!"。页面上将没有任何HTML标记，文本将以纯文本形式显示。

innerText属性

innerText属性类似于textContent属性，它返回或设置指定元素的文本内容。但是，innerText将尝试显示元素的文本内容，而不是textContent返回的没有格式的纯文本。这意味着，innerText将保留与文本格式相关的HTML标记，并尝试将其应用于元素上。因此，innerText会快速形成松散的HTML代码，并且不会总是生成所需的结果。下面是innerText属性的示例：

const element = document.getElementById("example");
element.innerText = "<b>Hello, world!</b>";

在这个示例中，我们用innerText属性设置了id为"example"的元素的文本内容为粗体的"Hello，world!"，但是，HTML标记保留下来，而不是被应用于文本以形成粗体效果。

总结

innerHTML、outerHTML、textContent和innerText是可在JavaScript中用于HTML元素的常见文本相关属性。各个属性在HTML元素上的表现不同，程序员需要根据需求进行选择。值得注意的是，在使用任何一种属性时，始终应该考虑进行适当的HTML和JavaScript代码层面的安全性检查。