这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。
创建HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p id="app">我是一段文字</p>
<span>我是另外一段文字</span>
</div>
</body>
</html>
innerHTML
定义：属性设置或获取HTML语法表示的元素的后代。
语法：html 页面上有一个 id 为 app的标签，我们获取这个标签，打印他的 innerHTML
const element = document.getElementById('app');
const content = element.innerHTML;
console.log('content', content); // content 我是一段文字
如何更新这段内容呢
element.innerHTML = '我是一段更新的内容';
设置元素的innerHTML将会删除所有该元素的后代并以给出的新内容替代
注意点：
- 当
HTML没有被正确标记时，设置innerHTML将会抛出语法错误 - 当父元素是
Document时，设置innerHTML将会提示不允许修改。 结论：获取的innerHTML是由元素后代组成的HTML或者XML，返回结果为字符串。
安全问题：用innerHTML插入文本到网页中，有可能造成XSS攻击。
element.innerHTML = "<img src='x' onerror='alert(11)'>";
textContent
基于innerHTML插入的内容为纯文本时，可能造成XSS攻击。我们可以使用textContent。
定义：表示一个节点及其后代的文本内容。和innerHTML容易混淆，但这两个属性在重要方面有不同之处。
语法：html 页面上有一个 id 为 app的标签，我们获取这个标签，打印他的 textContent
const element = document.getElementById('app');
const textContent = element.textContent;
console.log('textContent', textContent); // textContent 我是一段文字
返回值和innerHTML是一样的，返回值是一个字符串或null，textContent的值取决于具体情况
- 如果节点是一个document，或者一个DOCTYPE，则返回值是null
- 如果节点是个特殊字符，注释，text node，则返回节点内部的文本内容
- 对于其他节点类型，则返回所有子节点的内容合并后，除了注释。 我们把html的内容修改下，在看看两者的打印区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p id="app">我是一段文字<br><span>我的一段新加入的文字</span></p>
<span>我是另外一段文字</span>
</div>
<script>
const element = document.getElementById('app');
const content = element.innerHTML;
console.log('content', content); // content 我是一段文字<br><span>我的一段新加入的文字</span>
// const element = document.getElementById('app');
const textContent = element.textContent;
console.log('textContent', textContent); // textContent 我是一段文字我的一段新加入的文字
</script>
</body>
</html>
与innerHTML的区别
可以看出innerHTML不仅打印了里面的内容，甚至连标签都一块被显示。而textContent返回指定节点的文本内容，以及它的所有后代。
innerHTML会返回HTML。通常，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。
此外，使用textContent可以防止XSS攻击。
nodeValue
语法：nodeValue属性返回或设置当前节点的值
const element = document.getElementById('app');
const nodeValue = element.nodeValue;
console.log('nodeValue', nodeValue); // nodeValue null
值对于文档节点来说，nodeValue返回的是null。
const element = document.getElementById('app');
const nodeValue = element.childNodes;
console.log('element', element.childNodes); // 返回所有的节点
console.log('element', element.firstChild); // 返回第一个节点
console.log('element', element.lastChild); // 返回最后一个的节点
