《JavaScript Dom编程艺术》读书笔记(五)
函数
如果需要多次使用同一段代码,可以把它们封装成一个函数。函数就是一组允许在你的代码里随时调用的语句。事实上,每个函数实际是一个短小的脚本。
先对函数做出定义再调用是一个良好的编程习惯。下面是一个简单的示例函数:
function shout() { var beatles = Array("John","Paul","George","Ringo"); for (var count = 0; count Shopping list # What to buy Don't forget to buy this stuff. 1. A tin of beans Cheese Milk alert(typeof document.getElementById("purchases"))
在浏览器中加载这个例子时,会弹出一个alert对话框,报告document.getElementById("purchases")的类型————它是一个对象。
事实上,文档中的每一个元素都是一个对象。利用DOM提供的方法能够得到任何一个对象。
getElementsByTagName
getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,这个方法也是只有一个参数的函数,它的参数是标签的名字:
element.getElementsByTagName(tag)
它与getElementById方法有许多相似之处,但它返回的是一个数组。下面是一个例子:
document.getElementsByTagName("li")
这个调用将返回一个对象数组,每个对象分别对应着document对象中的一个列表项元素。与任何其他的数组一样,我们可以利用length属性查出这个数组里的元素个数。
在之前的例子中将标签中的alert语句替换为下面这条语句:
alert(document.getElementsByTagName("li").length);
可以看到这份示例文档里的列表项元素的个数:3.这个数组里的每个uyansu都是一个对象。可以通过利用一个循环语句和typeof操作符去遍历这个数组来验证这一点。例如,下面这个for循环:
for(var i=0; i 标签中添加下面这行alert代码:
alert(document.getElementsBuClassName("important sale").length);
弹出框显示1,表示只有一个元素匹配,因为只有一个元素同时带有“important”和“sale”类名。即使在元素的class属性中,类名的顺序是“sale import”而非参数中指定的“import sale”也照样会匹配该元素。不仅类名的实际顺序不重要,就算元素还带有更多类名也没有关系。与使用getElementsByTagName一样,也可以组合使用getElementsByClassName和getElementById。如果想知道在id为“purchases”的元素中有多深类名包含“sale”列表项,可以先找到那个特定的对象,然后再调用getElementsByClassName:
var shopping = document.getElementById(“purchases”);
var sales = shopping.getElementsByClassName("sale");
这样,sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。运行下面这行代码,就会看到sales数组中包含两项:
alert(sales.length);
这个getElementsByTagName的方法非常有用,但只有较新的浏览器才支持它。为了弥补这一不足,DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。而多数情况下,他们的实现过程都与下面这个getElementsByClassName大致相似,这个函数能适用于新老浏览器:
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
//使用现有方法
return node.getElementsByClassName(classname);
} else {
var results = new Array();
var elems = node.getElementsByTagName("*");
for (elems[i].className.indexOf(classname)!= -1){
results[results.length] = elems[i];
}
}
return results;
}
这个getElementsByClassName函数接受两个参数。第一个node表示DOM树中的搜索起点,第二个classname就是要搜索的类名了。如果传入节点上已经存在了适当的getElementsByClassName函数,那么这个新函数就直接返回相应的节点列表。如果getElementsByClassName函数不存在,这个新函数就循环遍历所有标签,查找带有相应类名的元素(不适用于多个类名)。如果使用这个函数来模拟前面取得购物列表的操作,可以如下写:
var shopping = document.getElementById("purchases");
var sales = getElementsByClassName(shopping, "sale");
#JavaScript#
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!