DOM是什么?
DOM本质上是一种接口(API),是专门操作网页内容的API标准 。DOM把整个页面映射为一个多层节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API,可以删除、添加、替换或修改任何节点网页上的标签是一层层嵌套的,最外面的一层是,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。树根之下(这棵树的图通常是倒着画,就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
下面是一张树形图
网页中每项内容(元素,文本,属性,注释…),都是树上的一个节点对象。
唯一的树根节点: document 所有节点都有的三个属性:
nodeType: 节点类型
document 9
element(元素) 1
attribute(属性) 2
text(文本) 3
注释 8
nodeName: 节点名称
document #document
element (元素) 全大写标签名
attribute (属性) 属性名——不常用!
text (文本) #text
注释 #comment
nodeValue: 节点值 ——不常用
document null
element (元素) null
attribute(属性) 属性值
text(文本) 文本内容
注释 注释里面的内容
查找HTML里面的内容
按id查找:
var id = document.getElementById(“id”)
返回值: 一个元素如果找不到返回null! 只能在document上调用
按标签名查找:
var tagname = parent.getElementsByTagName(“标签名”)
返回值: 多个元素的集合如果找不到返回空集合可在任意父元素上调用
按name查找:
var name = document.getElementsByName(“name”)
返回值: 多个元素的集合 如果找不到返回空集合只能在document上调用
按class查找:
var class = parent.getElementsByClassName(“class”)
返回值: 多个元素的集合 如果找不到返回空集合
可在任意父元素上调用只要元素的一个class名匹配,就能找到该元素