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");