HTML | DOM 元内容属性

HTML中的每个元素都是一份数据，它们存储的信息可以通过 JavaScript 访问和修改。DOM API 是访问和操作 HTML 文档的标准方式，其中之一是元素的元内容属性。

元内容属性和元素的内容

元素的内容是指标签和标签之间的所有东西，包括它们之间的文本和其他元素。

<p>
  This is some <strong>text</strong>.
</p>

在上面的例子中，<p> 元素的内容是 "This is some text."，包括 This is some 和 text 之间的空格、<strong> 元素及其内容。

元内容属性是元素的子集，它只包括匹配标签之间的文本内容：

<p id="demo">
  This is some <strong>text</strong>.
</p>

在上例中，元内容属性是 This is some text.。另外值得一提的是, 如果某个元素没有文本内容，那么它的元内容属性将返回一个空字符串。

访问和修改元内容属性

DOM 元素的元内容属性可以通过JS来访问和修改。通过JavaScript访问该属性可以使用以下语法：

var content = element.textContent;

例如，上面的示例中，可以使用以下代码行来访问 <p> 元素的元内容：

var content = document.getElementById("demo").textContent;

在此处， content 的值将为 This is some text.。

DOM还提供了修改元内容属性的方法。可以使用以下方式：

element.textContent = newContent;

例如，要将 <p> 元素的元内容更改为 "Hello, World!"，可以使用以下代码行：

document.getElementById("demo").textContent = "Hello, World!";

innerText属性

除了元素的元内容属性外，DOM 还提供了 innerText 属性。innerText 属性与 textContent 属性非常相似，但是它回应的是渲染出来的文本内容。比如，如果一个元素包含了一个不可见的元素，如下：

<div id="example">
    This is some text. <div style="display:none;">This is some other text</div>
</div>

使用 innerText 属性读取此元素的内容，则可以得到以下值：

var example = document.getElementById("example");
console.log(example.innerText); //输出 'This is some text.'

而使用 textContent 则会将不可见元素的内容也读取：

var example = document.getElementById("example");
console.log(example.textContent); //输出 'This is some text. This is some other text'

总结

DOM 元内容属性提供了访问和修改元素文本内容的能力，它只会返回与标签匹配的文本内容，而不包括在元素内部可见的元素。与之相比，innerText 属性返回已经渲染出来的内容。根据需要，程序员可以选择合适的属性来访问和修改文本内容。