DOM (文档对象模型)

参考：w3cschool

DOM说明

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找HTML元素方法(三种)

• 通过 id 找到 HTML 元素

  var x = document.getElementById('id')

• 通过标签名找到 HTML 元素

  var x = document.getElementsByTagName("标签名");

• 通过类名找到 HTML 元素

  var x = document.getElementsByClassName("类名");

使用DOM改变 HTML

• 改变 HTML 输出流

例如：

document.write()；

• 改变 HTML 内容

例如：

document.getElementById(id).innerHTML='内容';
//实例
document.getElementById("p1").innerHTML="New text!";

• 改变 HTML 属性

例如：

document.getElementById(id).attribute=new value;
//实例
document.getElementById("image").src="landscape.jpg";

使用DOM改变 CSS

• 改变 HTML 样式

例如：

document.getElementById(id).style.property=new style
//实例
document.getElementById("p2").style.color="blue";