修改现有元素
让我们看看如何使用 JavaScript 在浏览器加载网页后对其进行修改。
DOM 遍历属性也可以用于更新页面中的元素。
示例页面
让我们通过下面的 HTML 代码查看页面上的文本内容。
No configuration found for ID: ff1e26b867c7ce28b9adc956d658e74597f9aa034a2c8146e501303238b21cff
HTML 内容
innerHTML 属性可用于更改 DOM 中某个元素的内容。例如，可以使用以下代码向我们的列表中添加一种新语言。我们访问 ID 为 "languages" 的 <ul> 标签，然后通过运算符（+=）和一个 <li> 元素在列表末尾添加一项。
No configuration found for ID: e912d9107bec2edb6347e3f50d4c21ac13383ded4f620e5c93f177194609cad8
innerHTML 属性常用于“清空”内容。尝试以下示例：
No configuration found for ID: 67acb3c7dddecc109400460ef68f76fd3c8fac62343f3dcc2e67503aaee6183e
在继续之前，请从你的 JavaScript 程序中移除上述代码行。否则你将没有任何内容！
使用 innerHTML 时，你需要将 HTML 内容放入字符串中。为了保持代码可读性并避免错误，建议仅用 innerHTML 进行小范围的内容修改。你将在下面发现更灵活的解决方案。
文本内容
使用 textContent 属性来修改 DOM 元素的文本内容。以下是更新我们页面上显示标题的方法。
No configuration found for ID: 8af123a8d87cd3969d78728c2d146acfe373672c2606d8aea7b51bc1a3d5f6c5
属性
setAttribute() 方法用于设置元素的属性值。你需传入属性名称和值作为参数。
No configuration found for ID: 7399d19c45dccee431e5ccc6e6b20722322c5dd4223c737dbbb5222b52189ea1
注意：某些属性以属性形式存在，可直接进行更新。
No configuration found for ID: d75a0c151bb2736bcded884de9b1a4dbd2af833fb75ff0d7e3b596ea4c372735
类名
你可以使用 classList 属性为 DOM 元素添加或移除类名！
No configuration found for ID: 9757227e9be6c4ecd0a01cbaaf5f16ccee8eecba945c1e78c495ed17a326c426