created at 2023/08/03 03:37:54
updated at 2023/08/03 05:16:27
Node.textContent 是用于获取或设置节点及其后代节点的文本内容的属性。它返回一个字符串，其中包含所有节点的子节点的文本内容，包括文本节点和注释节点。当设置 Node.textContent 时，节点的任何子节点都会被删除，并替换为包含指定文本的单个文本节点。
以下是一个使用 Node.textContent 设置元素文本内容的示例：
html
<div id="my-div"></div>
javascript
const myDiv = document.getElementById('my-div');
myDiv.textContent = 'Hello, world!';
在这个示例中，我们使用 document.getElementById 获取到 id 为 'my-div' 的 <div> 元素的引用。然后，我们将元素的 textContent 属性设置为 'Hello, world!'，这将用一个包含指定文本的单个文本节点替换 <div> 元素的任何子节点。
你也可以使用 Node.textContent 获取节点的文本内容。以下是一个示例：
javascript
const myDiv = document.getElementById('my-div');
const textContent = myDiv.textContent;
console.log(textContent); // 输出: "Hello, world!"
在这个示例中，我们使用 document.getElementById 获取到 id 为 'my-div' 的 <div> 元素的引用。然后，我们检索元素的 textContent 属性并将其记录到控制台，这将输出字符串 'Hello, world!'。
Node.textContent 与 Node.innerText 在获取和设置文本内容时有所不同。
Node.textContent 返回的文本内容包括所有子节点的文本，而 Node.innerText 则只返回可见文本。这意味着 Node.innerText 会忽略某些元素，例如 <script> 和 <style> 标签中的内容。此外，当元素包含 CSS 样式时，Node.innerText 还会考虑这些样式的影响，而 Node.textContent 则不会。
以下是一个示例，演示了 Node.textContent 和 Node.innerText 的区别：
html
<div id="my-div">Hello, <span style="display: none;">hidden </span>world!</div>
javascript
const myDiv = document.getElementById('my-div');
console.log(myDiv.textContent); // 输出: "Hello, world!"
console.log(myDiv.innerText); // 输出: "Hello, world!"
在这个示例中，我们创建了一个包含一个隐藏的 <span> 元素的 <div> 元素。该 <div> 元素包含两个文本节点，一个是 "Hello, "，另一个是 "world!"。其中 "hidden " 文本在隐藏的 <span> 元素中。我们可以看到，Node.textContent 返回的文本包括所有子节点的文本，包括隐藏的 <span> 元素中的文本。而 Node.innerText 只返回可见文本，因此它忽略了隐藏的 <span> 元素中的文本。
总的来说，Node.textContent 更适合获取和设置元素的文本内容，因为它返回所有子节点的文本，而不仅仅是可见文本，而且不受 CSS 样式的影响。但是，如果您只需要可见文本，那么使用 Node.innerText 也是一个不错的选择。
Node.textContent 与 Element.innerHTML 在获取和设置元素内容时有所不同。
Node.textContent 获取和设置的是元素的文本内容，而 Element.innerHTML 获取和设置的是元素的 HTML 内容，包括元素本身和其所有子元素、属性、事件等等。通过设置 Element.innerHTML，您可以动态地修改元素的 HTML 内容。
以下是一个示例，演示了 Node.textContent 和 Element.innerHTML 的区别：
html
<div id="my-div">Hello, <b>world</b>!</div>
javascript
const myDiv = document.getElementById('my-div');
myDiv.textContent = 'Hi,there!';
myDiv.innerHTML = '<p>Hello, <i>world</i>!</p>';
在这个示例中，我们创建了一个包含一个粗体文本的 <div> 元素。我们使用 Node.textContent 将元素的文本内容设置为 'Hi, there!'，这将替换所有子节点，包括 <b> 元素。然后，我们使用 Element.innerHTML 将元素的 HTML 内容设置为一个包含段落和斜体文本的新 HTML 字符串，这将替换整个 <div> 元素的内容。
总的来说，Node.textContent 更适合获取和设置元素的文本内容，而 Element.innerHTML 更适合获取和设置元素的 HTML 内容。如果您只需要更改元素的文本内容，那么使用 Node.textContent 是更好的选择。如果您需要动态地修改元素的 HTML 内容，包括添加或删除子元素、修改元素属性和事件等等，那么使用 Element.innerHTML 可能会更方便。但需要注意的是，Element.innerHTML 可能存在安全风险，因为它允许动态插入任意 HTML 内容，包括恶意代码。
以下是一些常见的使用场景，其中 Node.textContent 可能会更适合：
Node.textContent 是更好的选择。Node.textContent 返回元素及其所有子节点的文本内容，因此它可用于在元素中搜索和替换文本。Node.textContent 可以更方便。以下是一些常见的使用场景，其中 Element.innerHTML 可能会更适合：
Element.innerHTML 可能会更方便。Element.innerHTML 可能会更方便。Element.innerHTML 可能会更方便。DOM 树中的节点类型之间存在一定的继承关系，如下所示：
在 DOM 树中，节点类型之间的继承关系决定了它们所拥有的属性和方法。例如，所有的节点类型都有 parentNode 和 childNodes 属性，但只有元素节点才有 getAttribute 和 setAttribute 方法。理解节点类型之间的继承关系可以更好地理解和使用 DOM API。
在 DOM 中，所有节点都继承自 Node 接口。Element 是 Node 接口的一种具体类型，表示一个元素节点。
Node 接口是 DOM 树中所有节点类型的基础接口，它定义了所有节点类型都具有的通用属性和方法，例如 parentNode、childNodes、textContent 等。其他节点类型，如 Document、DocumentFragment、Attr 等，也是 Node 的子类型。
而 Element 接口则是具体的节点类型，表示 HTML 或 XML 文档中的元素节点。元素节点包含标签名称、属性、文本内容和子节点等信息，例如 <div>、<p>、<a> 等都是元素节点。
因此，Node 接口和 Element 接口在 DOM 树中的位置和作用是不同的，Node 接口是 DOM 树中所有节点类型的基础接口，而 Element 接口则表示元素节点的具体类型，包含了更具体的属性和方法，例如 getAttribute、setAttribute、innerHTML 等。
虽然 Element 接口是 Node 接口的子类型，但是它们具有不同的用途，需要根据具体的需求来选择使用哪个接口。如果您需要操作元素节点，如获取或设置元素的属性或内容，那么使用 Element 接口是更好的选择。如果您需要操作任何类型的节点，例如获取或设置节点的父节点或子节点，那么使用 Node 接口是更好的选择。