《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#

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部