函数
假如须要屡次应用统一段代码，可以把它们封装成一个函数。函数就是一组许可在你的代码里随时挪用的语句。事实上，每一个函数现实是一个短小的剧本。
先对函数做出定义再挪用是一个优越的编程习气。下面是一个简朴的示例函数：
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");
