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

版权声明

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