JavaScript--更新DOM

Posted 2021-08-12 Z && Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript--更新DOM相关的知识，希望对你有一定的参考价值。

1. 更新DOM

1.1 更新节点

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

一种是修改 innerhtml 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

使用innerHTML设置文本

<body>
	<div id="item"></div>
</body>
<script>
    let item = document.getElementById('item');
    //    设置文本为 abc
    item.innerHTML = 'abc';
</script>

在这里插入图片描述

使用innerHTML设置HTML

<body>
	<div id="item"></div>
</body>
<script>
    let item = document.getElementById('item');
    //    设置HTML
    item.innerHTML = 'ABC<span style="color: red;font-size: 24px;">RED</span>XYZ'
</script>

在这里插入图片描述

第二种是修改 innerText 属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

示例一:

<body>
<div id="item"></div>
</body>
<script>
    let item = document.getElementById('item');
    //    设置文本为 abc
    item.innerText = 'abc';
</script>

示例二:
在这里插入图片描述

<body>
	<div id="item"></div>
</body>
<script>
    let item = document.getElementById('item');
    //    设置HTML
    item.innerText = 'ABC<span style="color: red;font-size: 24px;">RED</span>XYZ'
</script>

在这里插入图片描述

小结

使用innerText和innerHTML去更新DOM，都是直接重写DOM，不是追加。

1.2 更新CSS样式

在这里插入图片描述

以上是关于JavaScript--更新DOM的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 将片段附加到DOM而不是每个节点。

更改页面javascript代码（TamperMonkey）以将键盘笔触发送到父DOM

Javascript 强制浏览器渲染Dom文档

高性能JavaScript（DOM编程）快速响应的用户界面

保留对附加节点 javascript 的引用

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段