第3章 DOM
<body>
<h1>What to 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>
<script src="example2.js">
</script>
</body>
1.
D:document
O:object
M:model
2.节点
DOM里有很多不同类型的节点。其中三种很主要：元素节点、文本节点和属性节点。
例：<p title="abc">def</p>
其中，<p>是元素节点，def是文本节点，title是属性节点。
3.获取元素
有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字来获取。
（1）getElementById
这个方法将返回一个与那个有着给定id属性值得元素节点对应的对象。
document.getElementById(id)
例：alert(typeof document.getElementById("purchases"));
关键：这是个方法
参数是id属性的值
返回一个对象
（2）getElementByTagName
这个方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
关键：这是个方法
参数是标签的名字
返回一个对象数组
（3）getElementByClassName
关键：这是个方法
参数是类名
返回一个具有相同类名的元素的对象数组
4.
一份文档就是一棵节点树。
getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点。
getElementByTagName和getElementByClassName 将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。每个节点都是一个对象。
5.getAttribute和setAttribute
getAttribute是一个函数。用于得到属性值，它只有一个参数——你打算查询的属性的名字
object.getAttribute(attribute)
它只能通过元素节点对象调用
例：
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++)
{
var title_text=paras[i].getAttribute("title");
if(title_text) alert(title_text);
}
setAttribute用于修改属性值
object.setAttribute(attribute，value)
例：
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++)
{
var title_text=paras[i].getAttribute("title");
if(title_text)
{
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
}
编辑时发现有错误，但在Dreamweaver中找不出来，后来发现可以在Chrome中编辑找错修改，Chrome太好啦。
这是我的笔记，好好加油！
扫一扫
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
