三、DOM

DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。它已成为表现和操作页面标记的真正的跨平台、语言中立的方式。

一、节点层次

　　DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为不同的类型，每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

　　文档节点是每个文档的根节点。

DOM的分类

核心DOM：提供了同时操作html文档和xml文档公共的属性和方法。

HTML DOM：针对HTML文档提供的专用的属性方法。

XML DOM：针对XML文档提供的专用的属性好方法。

CSS DOM：提供了操作CSS的属性和方法。

Event DOM：事件对象模型。如：onclick、onload等。

DOM中节点的类型

document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。

element元素节点：指任何HTML标记。每一个HTML标记就是一个“元素节点”。

attribute属性节点。指HTML标记的属性。

text节点。是节点树的最底节点。

对节点属性的操作

• setAttribute(name,value)：给某个节点添加一个属性。

• getAttribute(name)：获取某个节点属性的值。

• removeAttribute(name)：删除某个节点的属性。

节点的创建

document.createElement(tagName)：创建一个指定的HTML标记，一个节点

tagName：是指不带尖括号的HTML标记名称。

举例：var imgObj = document.createElement(“img”)

parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。

parentNode代表父节点，父节点必须存在。

childNode代表子节点。

举例：document.body.appendChild(imgObj)

parentNode.removeChild(childNode)：删除某个父节点下的子节点。

parentNode代表父节点。

childNode代表要删除的子节点。

举例：document.body.removeChild(imgObj)

DOM访问html元素的方法

getElementById("a");

getElementByTagName("div");