1、DOM：documentObjectModel。文档对象模型。
D:代表文档，也即当我们编写一个网页并加载到浏览器中时，它将我们的网页文档转换为一个文档对象
O:代表对象
-用户自定义的对象：程序员自行开发的对象。
-内置对象：内建在javascript语言中的对象
-宿主对象：由浏览器提供的对象
M:代表模型
DOM把一份文档表示为一颗树，如下代码：
<html>
<head>
<meta charset="utf-8" />
<title>example</title>
</head>
<body>
<h1>what to you buy?</h1>
<p title="a gentle reminder">don't forget to buy this stuff</p>
<ul id="purchases">
<li>a tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
</body>
</html>
分析一下网页的结构可以得到这样的模型
dom.jpeg
对于这个树来说，通过不同的节点来构成。节点包括：
-元素节点：例如<body> <ul> <li>等；
-文本节点：比如上面代码中<p>元素中的don't forget to buy this stuff即为文本节点；
-属性节点：属性节点被放在元素节点的起始节点中，如：代码中的title="a gentle reminder"即为属性节点；
2、获取元素：
(1)、getElementById();通过元素的id属性值来获取元素，返回一个元素对象。
<script type="text/javascript">
alert(document.getElementById("purchases"));
</script>
(2)、getElementsByTagName();通过元素节点名称来获取元素列表，返回一个对象数组。
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>
(3)、getElementsByTagName();通过元素节点classname来获取元素列表，返回一个对象数组。
<script type="text/javascript">
alert(document.getElementsByClassName("sale").length);
</script>
3、获取和设置属性
(1)、获取属性值：getAttribute()
<script type="text/javascript">
var pobjects = document.getElementsByTagName("p"); //获取元素节点为p的元素数组
for(var i=0;i<pobjects.length;i++){ //循环该数组
var title_text = pobjects[i].getAttribute("title"); //获取数组的属性title的值
if(title_text != null){ //如果title的值不为空
alert(title_text); //弹出title属性的值
}
}
</script>
(2)、设置属性值：getAttribute()
<script type="text/javascript">
var pobjects = document.getElementsByTagName("p"); //获取元素节点为p的元素数组
for(var i=0;i<pobjects.length;i++){ //循环该数组
var title_text = pobjects[i].getAttribute("title"); //获取数组的属性title的值
if(title_text != null){ //如果title的值不为空
pobjects[i].setAttribute("title","a new title"); //修改title属性值为：a new title
alert(pobjects[i].getAttribute("title"));//弹出title属性值
}
}
</script>
网友评论