HTML DOM

一、定义

HTML DOM定义了访问和操作HTML文档的方法，用来获取、修改、添加或删除HTML元素。

二、节点

HTML中的所有内容都是节点：

• 整个文档是文档节点
• 每个元素是元素节点
• 元素中的文本是文本节点
• 元素的属性是属性节点
• 注释是注释节点

所有节点均可通过JS来访问。

三、DOM对象

1、方法

• getElementById()：通过id获取元素节点

• getElementsByClassName()：通过类名获取元素节点（返回值数组）

• getElementsByTagName()：通过标签名获取元素节点（数组）

• var newE = creatElement(标签名)：创建元素节点

• element.getAttribute()：获取属性的值

• element.setAttribute(属性，值)：设置或修改属性的值，无返回值

• element.appendChild(newE)：将newE插入到element中

• element.removeChild(element)：删除节点

2、属性

（1）nodeName属性

• 元素节点的nodeName是标签名
• 属性节点的nodeName是属性名
• 文本节点的nodeName始终是#text
• 文档节点的nodeName始终是#document

（2）nodeValue属性

• 元素节点的nodeValue是undefined或null
• 属性节点的nodeValue是属性值
• 文本节点的nodeValue是文本本身

四、修改HTML元素

（1）修改内容

document.getElementById("a").innerHTML = "asdfsdf";

（2）修改样式

document.getElementById("a").style.color = "red";
//或者
document.getElementById("a").setAttribute("style","color: red;");