DOM(document object model)翻译过来就是文档对象模型,既然说是模型,模型是某种现实事物的表现形式,就像一个建筑施工的模型,它就代表着某个建筑。而DOM代表的是加载到浏览器窗口的当前网页。换个角度理解就是,网页像是我们需要建设的建筑而DOM像是施工的图纸,我们可以通过修改DOM来调整网页。
DOM把一份文档表示为一棵树,并使用parent(父亲),child(儿子),sibling(兄弟)这些术语描述各个节点之间的关系。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>你好<a href="http://www.baidu.com.">Baidu</a></h2> <p>这是段落</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>这份文档可以用下面的图1表示
图1
上面图中html就是根,它有两个分支包括head元素和body元素,<head>元素 有两个子元素:<meta>和<title>,这两个元素又互为兄弟关系。
在DOM中,DOM是由节点构成的集合,节点分为元素节点,文本节点和属性节点;
元素节点:标签的名字就是元素的名字,比如:文本段落的元素的名字是“P”,无序清单元素的名字是“ul”,列表项元素的名字是“li”。元素可以包含其他元素,事实上,有html元素没有包含在其他元素中,它是我们节点树的根节点。
文本节点:绝大多数的内容由文本提供,比如<p>元素包含文本“Hello World”,他就是一个文本节点,在html中文本节点总是被包含在元素节点内部,但不是所有的元素节点都包含有文本节点
属性节点:属性节点用来对元素做出更具体的描述,例如几乎所有的元素都有一个title属性,我们可以利用这个属性对包含在元素里的东西做出准确的描述。比如:<p title="hello">hello</p>.在DOM中,title=“hello”是一个属性节点
class和id:为了把某一个元素和其他元素区别开,我们通常使用class属性和id属性。
1、class属性
<p class="special">this paragraph has the special class</p>
<h2 class="special">this headline also has the special class<h2>在样式表里,可以像下面这样为class属性值相同的所有元素定义同一种样式
.special{
font-style: italic;
}
或者
h2.special{
font-style:italic;
}
2、id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符,如下所示:
<ul id = "purchases">
在样式表里,可以像这样为有特定的的id属性值元素定义一种独享的样式
#purchases{
border: 1px solid white;
}
DOM获取元素:有三种DOM方法可以获取元素节点,分别是通过元素ID、通过标签名字、通过类名字来获取
1、getElementById
document.getElementById(id),这个方法只有一个参数:就是你想获得那个元素的属性id值,但是这个id必须放在单引号或双引号里。比如:
document.getElementById("purchases"),这个调用将返回一个对象(Object),这个对象对应着document对象里的一个独一无二的元素,那个元素的HTML id属性值是purchase。
2、getElementByTagName
document.getElementByTagName(tag)这个方法只有一个参数,比如document.getElementByTagName("li"),这个方法返回的是一个对象数组,每个对象分别对应着文档有着给定标签的一个元素 。
3、getElementByClassName
这个方法可以让我们通过class属性中的类名来访问元素
4、获取和设置属性getAttribute和setAttribute
通过getElenment的方法我们可以获得元素,但是我们得到元素之后,我们需要获得和设置元素的属性,然后就用到了我们的getAttribute和SetAttribute两个方法
object.getAttribute(attribute),getAttribute方法不属于document对象,不能通过document对象调用,它只能通过元素节点对象调用如,它可以与getElementByTagName方法合用,获取<p>元素的title属性,如下所示:
var paras = document.getElementsByTagName("p"); for(var i=0;i<paras.length;i++) { alert(paras[i].getAttribute("title")); }
5、setAttribute()是用来对属性节点 做出修改的,它和getAttribute一样只能用于元素节点
object.setAttribute(attribute,value)
比如:
var shopping = document.getElementById("purchase"); shopping.setAttribute("title", "a list of goods");