Appearance
JavaScript教程 - 16 DOM
继续讲解 DOM。
16.5 文本节点
在前面也说了文本也是节点。
下面再举个例子：
html
<body>
<div id="my-div">For技术栈</div>
<script>
const element = document.getElementById('my-div'); // 获取到div元素
console.log(element.firstChild); // 获取div下的第一个节点，也就是文本节点：For技术栈
</script>
</body>- 上面就获取到了文本节点。
但是通过获取文本节点再修改文本，太麻烦了，我们一般不这样做，我们只需要获取到文本节点的父节点进行操作就可以了。
所以在上面的代码中，获取 div 元素，就可以修改 div 中的文本了，有三种方式可以获取和修改元素中的文本内容：
- element.textContent
- element.innerText
- element.innerHTML
举个栗子：
html
<body>
<div id="box1">For技术栈</div>
<div id="box2">For技术栈</div>
<div id="box3">For技术栈</div>
<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
console.log(box1.textContent); // For技术栈
console.log(box2.innerText); // For技术栈
console.log(box3.innerHTML); // For技术栈
box1.textContent = 'For技术栈1';
box2.innerText = 'For技术栈2';
box3.innerHTML = 'For技术栈3';
</script>
</body>- 在上面的代码中，可以通过上面三种方式来获取和修改 div 中的文本内容。
问题来了，有什么区别？
在看一个例子：
html
<body>
<div id="box1">
<span>For技术栈</span>
</div>
<div id="box2">
<span>For技术栈</span>
</div>
<div id="box3">
<span>For技术栈</span>
</div>
<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
console.log(box1.textContent); //
console.log(box2.innerText); //
console.log(box3.innerHTML); // <span>For技术栈</span>
</script>
</body>textContent和innerText获取不到 html 标签，innerText就是纯文本，textContent会包括换行符。innerHTML可以获取到 html 标签内容。
执行结果如下：
再看一下修改文本内容的区别：
html
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
box1.textContent = '<b>For技术栈1</b>';
box2.innerText = '<b>For技术栈2</b>';
box3.innerHTML = '<b>For技术栈3</b>';
</script>
</body>显示如下：
可以看到 textContent 和 innerText 会对文本内容进行转义（例如，大于号转换为 > ），将 html 内容按照文本内容来显示，而 innerHTML 会将 html 内容渲染后显示，但是 innerHTML 这种方式容易存在 xss 注入风险，因为如果文本内容是用户自定义的，用户可以在文本内容中添加 html 内容（插入不和谐的内容，你的网站吃不了兜着走），而且可以添加 <script> 标签引入第三方的 js 脚本去执行，这就很危险了，所以使用 innerHTML 要确保内容是自己的。
textContent 和 innerText 还有一个区别就是 textContent 获取标签中的内容不会考虑 CSS 样式，而 innerText 会考虑 CSS 样式。
举个栗子：
html
<body>
<div id="box1">
<span style="display: none;">For技术栈</span>
</div>
<div id="box2">
<span style="display: none;">For技术栈</span>
</div>
<div id="box3">
<span style="display: none;">For技术栈</span>
</div>
<script>
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
console.log(box1.textContent); // 'For技术栈'
console.log(box2.innerText); // ''
console.log(box3.innerHTML); // <span style="display: none;">For技术栈</span>
</script>
</body>- 将内容隐藏后，
innerText是获取不到内容的；通过innerText获取内容的时候，会触发网页重排（Reflow），也就是重新结算 CSS 样式，所以textContent的性能是要好一点的。
内容未完......