《JavaScript DOM 编程艺术》第3章笔记

来源：互联网发布：unity3d 雷电特效编辑：程序博客网时间：2024/05/20 06:06

第3章 DOM

<body>

<p title="a gentle reminder">Don't forget to buy this stuff.</p>

<li>A tin of beans</li>

<li class="sale">Cheese</li>

</ul>

</script>

</body>

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

关键：这是个方法

参数是类名

返回一个具有相同类名的元素的对象数组

一份文档就是一棵节点树。

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太好啦。

这是我的笔记，好好加油！

0 0

《JavaScript DOM 编程艺术》 第3章 笔记

《JavaScript DOM 编程艺术》第3章笔记