第三章 DOM
最经刚看完JavaScript DOM编程艺术这本书,觉得很不错,所以写下读完全书后的总结。
首先是第三章DOM(文本对象模型)
1.节点的概念:
DOM将HTML文档看成是节点的集合,所以就包括(元素节点、文本节点、属性节点)如:
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
p是元素节点,title是属性节点,Don't forget to buy this stuff.是文本节点。
类似于DOM,CSS也将文档看成是节点的集合,所以为了区分网页里的元素,引入了:
class属性
class属性值相同的所有元素定义一种共享的样式
id属性
id属性的用途是给网页里的某个元素加上独一无二的标示符
2.四个实用的DOM方法:
getElementById(),返回一个与那个给定id属性值的元素节点相对应的对象,格式为:document.getElementById(id)
getElementsByTagName(),放回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。注意Elements是复数。格式为:document.getElementsByTagNmae(tag)
getAtrribute(),将所得到元素属性的值查询出来,格式为:object.getAttribute(attribute)。注意:getAttribute()方法不能通过document对象调用,必须用元素节点对象来调用。
如:
var paras = document.getElementsByTagName("p");
for (var i=0; i < paras.length; i++ ) {
alert(paras[i].getAttribute("title"));
}
上述代码将弹出p元素属性为title的值的警告框
setAtterbute(),设定属性节点的值,格式为:object.setAttribute(attribute,value)
如:
var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
上述代码将弹出两个警告框,第一个是查询属性节点title的值,第二个是设定其值为a list of goods。