HTML | DOM 脚本文本属性

在 HTML 和 JavaScript 中，我们可以使用文本属性来访问/更改元素的文本内容。在 Document Object Model (DOM) 中，我们使用属性来访问/更改 HTML 或 XML 元素。

HTML 文本属性

innerHTML

innerHTML 属性可以获取或设置 HTML 元素的内容，包括标签和文本。

<div id="myDiv">
    <p>Hello World!</p>
</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML); // 输出 <p>Hello World!</p>

myDiv.innerHTML = '<h1>Hello World!</h1>';
console.log(myDiv.innerHTML); // 输出 <h1>Hello World!</h1>

outerHTML

outerHTML 属性可以获取或设置 HTML 元素及其内容，包括标签。

<div id="myDiv">
    <p>Hello World!</p>
</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv.outerHTML); // 输出 <div id="myDiv"><p>Hello World!</p></div>

myDiv.outerHTML = '<span id="mySpan"><p>Hello World!</p></span>';
console.log(document.getElementById('mySpan').outerHTML); // 输出 <span id="mySpan"><p>Hello World!</p></span>

textContent

textContent 属性可以获取或设置 HTML 元素的文本内容，不包括标签。

<div id="myDiv">
    <p>Hello World!</p>
</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv.textContent); // 输出 Hello World!

myDiv.textContent = 'Hello DOM!';
console.log(myDiv.textContent); // 输出 Hello DOM!

DOM 文本属性

nodeValue

nodeValue 属性可以获取或设置 XML 元素的文本内容，不包括标签。在 HTML 元素中获取该属性将返回 null。

<p id="myP">Hello World!</p>

const myP = document.getElementById('myP').firstChild;
console.log(myP.nodeValue); // 输出 Hello World!

myP.nodeValue = 'Hello DOM!';
console.log(myP.nodeValue); // 输出 Hello DOM!

data

data 属性与 nodeValue 属性类似，可以获取或设置 XML 元素的文本内容，不包括标签。

<p id="myP">Hello World!</p>

const myP = document.getElementById('myP').firstChild;
console.log(myP.data); // 输出 Hello World!

myP.data = 'Hello DOM!';
console.log(myP.data); // 输出 Hello DOM!

text

text 属性与 textContent 属性类似，可以获取或设置 XML 元素的文本内容，不包括标签。

<p id="myP">Hello World!</p>

const myP = document.getElementById('myP').firstChild;
console.log(myP.text); // 输出 Hello World!

myP.text = 'Hello DOM!';
console.log(myP.text); // 输出 Hello DOM!

总结

文本属性是一种修改元素内容的重要方式，可以使用不同属性来获取或设置 HTML 或 XML 元素的文本内容。在选择使用哪种属性时，应考虑元素类型以及是否需要保留元素标签。