函数
如果需要多次使用同一段代码，可以把它们封装成一个函数。函数就是一组允许在你的代码里随时调用的语句。事实上，每个函数实际是一个短小的脚本。
先对函数做出定义再调用是一个良好的编程习惯。下面是一个简单的示例函数：
function shout() {var beatles = Array("John","Paul","George","Ringo");for (var count = 0; count < beatles.length; count++ ) {alert(beatles[count]);}
}
这个函数里的循环语句将依次弹出对话框来显示Beatles乐队成员的名字。如果想在自己的脚本里执行这一动作，可以随时使用如下的语句来调用这个函数：
shout();
每当需要反复做一件事，都可以利用函数来避免重复键入大量的相同内容。可以将不同的数据传递给它们，而它们将使用这些数据去完成预定的操作。传递给函数的数据称为参数（argument）。
定义一个函数的语法：
function name(arguments) {statements;
}
JavaScript提供了许多内建函数，在前面多次出现过的alert就是一例。这个函数需要我们提供一个参数，它将弹出一个对话框来显示这个参数的值。
在定义函数时，可以为它声明任意多个参数，只要用逗号把它们分隔开来就行。在函数额内部，你可以像使用普通变量那样使用它的任何一个参数。
下面是一个需要传递两个参数的函数。如果把两个数值传递给这个函数，这个函数将对它们进行乘法运算：
function multiply(num1,num2) {vartotal = num1 * num2;alert(total);
}
在定义了这个函数的脚本里，我们可以从任意位置去调用这个函数，如下所示：
multiply(10,2);
屏幕上会立刻弹出一个显示乘法运算结果（20）的alert对话框。函数不仅能够（以参数的形式）接收数据，还能够返回数据。
可以创建一个函数并让它返回一个数值、一个字符串、一个数组或一个布尔值。这需要用到return语句：
function multiply(num1,num2) {var total = num1 * num2;return total;
}
下面这个函数只有一个参数（一个华氏温度值），它将返回一个数值（同一温度的摄氏温度值）：
function converToCelsius(temp) {var result = temp - 32;result = result / 1.8;return result;
}
还可以把函数当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
var temo_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
把华氏温度值95转换为摄氏温度值。这个例子中，变量temp_celsius的值将是35，这个数值由convertToCelsius函数返回。
变量的作用域
比如下面这个例子：
function square(num) {total = num * num;return total;
}
var total = 50;
var number = square(20);
alert(total);全局变量total的值变成了400。本意是让square()函数只把它计算出来的平方值返回给变量number，但因为未把这个函数内部的total变量明确地声明为局部变量，这个函数把名字同样是total的那个全局变量的值也改变了。
把这个函数写成如下所示的样子才是正确的：
function square(num) {var total = num * num;return total;
}
现在，全局变量total变得安全了，再怎么调用square()函数也不会影响到它、
请记住，函数在行为方面应该像一个自给自足的脚本，在定义一个函数式，一定要把它内部的变量全部明确地声明为局部变量。如果你总是在函数里使用var关键字来定义变量，就能避免任何形式的二定义隐患。
获取元素
有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名字和通过类名字来获取。
getElementById
DOM提供了一个名为getElementById的方法，这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。
它是document对象特有的函数。在脚本代码里，函数名的后面必须跟有一对圆括号，这对圆括号包含着函数的参数。getElementById方法只有一个参数：你想获得的那个元素的id属性的值，这个id值必须防止单引号或双引号里。
document.getElementById(id)下面是一个例子：
document.getElementById("purchases")
这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTMLid属性值是purchases。你可以用typeof操作符来验证这一点。typeof操作符可以告诉我们它的操作数是一个字符串、数值、函数、布尔值还是对象，例如：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Shopping list</title>
</head>
<body><h1>What to buy</h1><p title="a gentle reminder">Don't forget to buy this stuff.</p><ul id="purchases"><li>A tin of beans</li><li class="sale">Cheese</li><li class="sale important">Milk</li></ul><script>alert(typeof document.getElementById("purchases"))</script>
</body>
</html>
在浏览器中加载这个例子时，会弹出一个alert对话框，报告document.getElementById("purchases")的类型————它是一个对象。
事实上，文档中的每一个元素都是一个对象。利用DOM提供的方法能够得到任何一个对象。
getElementsByTagName
getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,这个方法也是只有一个参数的函数，它的参数是标签的名字：
element.getElementsByTagName(tag)
它与getElementById方法有许多相似之处，但它返回的是一个数组。下面是一个例子：
document.getElementsByTagName("li")
这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项元素。与任何其他的数组一样，我们可以利用length属性查出这个数组里的元素个数。
在之前的例子中将<script>标签中的alert语句替换为下面这条语句:
alert(document.getElementsByTagName("li").length);
可以看到这份示例文档里的列表项元素的个数：3.这个数组里的每个uyansu都是一个对象。可以通过利用一个循环语句和typeof操作符去遍历这个数组来验证这一点。例如，下面这个for循环：
for(var i=0; i < document.getElementsByTagName("li").length; i++ ) {
alert(typeof document.getElementsByTagName("li")[i]);
}
特别要注意的是，即使在整个文档里这个标签只有一个元素，getElementsByTagName也返回一个数组，数组的长度为1。
用键盘反复敲入 document.getElementsByTagName("li")是件很麻烦的事情，而这些长长的字符串会让代码变得越来越难以阅读。有个简单的办法可以减少不必要的打字量并改善代码的可读性：只要把 document.getElementsByTagName("li")赋值给一个变量即可。
var items = document.getElementsByTagName("li");
for (var i=0; i < items.length; i++) {alert(typeof items[i]);
}
现在可以看到alert对话框，显示的消息都是“object”。
getElementsByTagName允许把一个通配符作为它的参数，意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符（星号字符“*”）必须放在引号里，是为了让通配符与乘法操作符有所区别。如果想知道某份文档里总共有多少个元素节点，像下面这样使用通配符即可：
alert(ducoment.getElementsByTagName("*").length);
还可以把getElementById和getElementByTagName结合起来运用。例如，之前的几个例子都是通过document对象调用getElementByTagName的，如果只想知道id属性值是purchase的元素包含着多少个列表项，必须通过一个更具体的对象去调用这个方法，如下所示：
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
这两条语句执行完毕后，items数组将只包含id属性值是purchase的无序清单里的元素。具体到这个例子，items数组的长度刚好与这份文档里的列表项元素的总数相等：
alert (items.length);
如果还需要更多的证据，下面这些语句将证明items数组里的每个值确实是一个对象：
for(var i=0; i < items.length; i++) {alert(typeof items[i]);
}
getElementsByClassName
getELementsByClassName这个方法让我们能够通过class属性中的类名来访问元素。与getElementsByTagName方法类似，getElementByClassName也只接受一个参数，就是类名：
getElementsByClassName(class)
这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。下面这行代码返回的就是一个数组，其中包含类名为“sale”的所有元素：
document.getElementsByClassName("sale")
使用这个方法还可以查找哪些带有多个类名的元素。要指定多个类名，只需要在字符串参数中用个空格分隔类名即可。例如，在<script>标签中添加下面这行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");
