第三章 DOM的基本
- 节点分为不同的类型:元素节点、属性节点和文本节点
- getElementById()方法
这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。注意大小写。该方法只有一个参数。这个参数也就是这个id值必须放在单引号或双引号里。
语法:document.getElementById(id)
- getElementByTagName()方法
这个方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的元素。
语法:document.getElementByTagName(tag)
可以利用length属性查出这个数组里的元素个数。document.getElementByTagName()方法允许把通配符作为参数,通配符作参数也必须放在引号里。如果你想知道某份文档里总共有多少个元素节点:
alert(document.getElementByTagName("*").length);
- getAttribute()方法
只有一个参数就是你打算查询的属性的名字,语法:object.getAttribute(attribute)
getAttribute()方法不能通过document对象调用,只能通过一个元素节点对象调用它。所以,我们可以利用getAtrribute()方法把它的各种属性的值查询出来。
<body>
<h1>what to buy</h1>
<p title="tips">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<script type="text/javascript">
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
alert(paras[i].getAttribute("title")); //tips
}
</script>
</body>
- setAtrribute()方法
这个方法允许我们队属性节点的值做出修改。setAtrribute()方法也是一个只能通过元素节点对相关调用,但setAtrribute()方法需要向它传递两个参数:
object.setAtrribute(attribute,value)
<script type="text/javascript">
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
paras[i].setAttribute("title","new tips");
alert(paras[i].getAttribute("title")); //new tips
}
</script>
setAtrribute()方法做出的修改不会反映在文档源代码里。
因为DOM的工作模式是:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容。