HTML DOM - 修改

HTML DOM - 修改

修改 HTML = 改变元素、属性、样式和事件

➡️修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

• 改变 HTML 内容
• 改变 CSS 样式
• 改变 HTML 属性
• 创建新的 HTML 元素
• 删除已有的 HTML 元素
• 改变事件（处理程序）

➡️创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性
下面的例子改变一个

元素的 HTML 内容：

  
Hello World!

  

输出结果：

New text!

上面的段落被一段脚本改变了。

➡️改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式：

  
Hello world!

  

➡️创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

  
This is a paragraph.
  
This is another paragraph.

输出结果：

This is a paragraph.

This is another paragraph.

This is new.

---

HTML DOM - 修改 HTML 内容

通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素

➡️使用事件

HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时，浏览器就会生成事件：
→ 在元素上点击
→ 加载页面
→ 改变输入字段

下面两个例子 在按钮被点击时改变 元素的背景色 ：

点击按钮前

点击按钮后

在本例中，由函数执行相同的代码：

下面的例子在按钮被点击时改变

元素的文本：

  
Hello world!

  

  


  

文本改变前

文本改变后