第三章 DOM
3.1 文档:DOM中的"D"
document(文档)
3.2 对象:DOM中"O"
JavaScript语言里的对象可以分为三种类型.
用户定义对象(user-defined object):由程序员自行创建的对象.
内建对象(native-object):内建在JavaScript语言里的对象,如Array、Math和Date等.
宿主对象(host object):由浏览器提供的对象.
3.3 模型:DOM中的"M"
model(模型)
3.4 节点
文档是由节点构成的集合.
3.4.1 元素节点
DOM的原子的元素节点(element node).如:<html>,<body>,<p>,<ul>等.
3.4.2 文本节点
在XHTML文档里,文本节点(text node)总是被包含在元素节点的内部.
3.4.3 属性节点
属性节点用来对元素做出更具体的描述.例如,几乎所有的元素都有一个title属性,利用这个属性对包含在元素里的东西做出准确的描述:
<p title = "a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中,title="a gentle reminder"是一个属性节点(attribute node).
并非所有的元素都包含着属性,但所有的属性都被元素包含.
3.4.4 CSS
之前学过了,不做介绍了.
3.4.5 获取元素
1. getElementById
DOM提供了一个名为getElementById的方法,这个方法将返回一个与那个有着给定id属性的值得元素节点对应的对象.
它是document对象特有的函数.在脚本代码里,函数名的后面必须跟有一对圆括号,这对圆括号里包含着函数的参数.getElementById方法只有一个参数:你想获得的那个元素的id属性的值,这个id值必须放在单引号或双引号里.
document.getElementById(id)
//例:document.getElementById("purchases");
2. getElementByTagName
getElementByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素 .类似于getElementById,这个方法也是只有一个参数的函数,它的参数是标签的名字:
document.getElementByTagName(tag)
//例:document.getElementByTagName("li");
它返回的是一个数组.
查看某份文档里总共有多少个元素节点,即把通配符(星号字符"*")作为参数.
alert(document.getElementByTagName("*").length);
3. getElementByClassName
document.getElementByClassName(class)
//例:document.getElementByClassName("sale");
要指定多个类名,只要在字符串参数中用空格分隔类名即可.类名的实际顺序不重要,就算元素还带有更多类名也没有关系.(p41).
总结:
一份文档就是一颗节点树.
节点分为不同的类型:元素节点、属性节点和文本节点.
getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点.
getElementByTagName和getElementByClassName将返回一个对象数组,他们分别对应着文档里的一组特定的元素节点.
每个节点都是一个对象.
3.5 获取和设置属性
3.5.1 getAttribute
getAttribute是一个函数.它只有一个参数-----你打算查询的属性的名字:
object.getAttribute(attribute)
getAttribute方法不属于document对象,所以不能通过document对象调用.它只能通过元素节点对象调用.例:
var paras = document.getElementByTagName("p");
for (var i = 0; i < paras.length; i ++) {
alert(paras[i].getAttribute("title"));
}
3.5.2 setAttribute
object.setAttribute(attribute,value)
例:
var shopping = document.getElementBuId("purchases");
shopping.setAttribute("title","a list of goods");
