JavaScript 函數(shù)定義
JavaScript 使用關(guān)鍵字 function 定義函數(shù)。
函數(shù)可以通過聲明定義，也可以是一個(gè)表達(dá)式。
函數(shù)聲明
在之前的教程中，你已經(jīng)了解了函數(shù)聲明的語法 :
function functionName(parameters) {
執(zhí)行的代碼
}
函數(shù)聲明后不會(huì)立即執(zhí)行，會(huì)在我們需要的時(shí)候調(diào)用到。
function myFunction(a, b) {
return a * b;
}
分號(hào)是用來分隔可執(zhí)行JavaScript語句。
由于函數(shù)聲明不是一個(gè)可執(zhí)行語句，所以不以分號(hào)結(jié)束。
函數(shù)表達(dá)式
JavaScript 函數(shù)可以通過一個(gè)表達(dá)式定義。
函數(shù)表達(dá)式可以存儲(chǔ)在變量中：
var x = function (a, b) {return a * b};
在函數(shù)表達(dá)式存儲(chǔ)在變量后，變量也可作為一個(gè)函數(shù)使用：
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函數(shù)實(shí)際上是一個(gè) 匿名函數(shù) (函數(shù)沒有名稱)。
函數(shù)存儲(chǔ)在變量中，不需要函數(shù)名稱，通常通過變量名來調(diào)用。
上述函數(shù)以分號(hào)結(jié)尾，因?yàn)樗且粋€(gè)執(zhí)行語句。
Function() 構(gòu)造函數(shù)
在以上實(shí)例中，我們了解到函數(shù)通過關(guān)鍵字 function 定義。
函數(shù)同樣可以通過內(nèi)置的 JavaScript 函數(shù)構(gòu)造器（Function()）定義。
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
實(shí)際上，你不必使用構(gòu)造函數(shù)。上面實(shí)例可以寫成：
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);
嘗試一下 ?
在 JavaScript 中，很多時(shí)候，你需要避免使用 new 關(guān)鍵字。
函數(shù)提升（Hoisting）
在之前的教程中我們已經(jīng)了解了 "hoisting(提升)"。
提升（Hoisting）是 JavaScript 默認(rèn)將當(dāng)前作用域提升到前面去的的行為。
提升（Hoisting）應(yīng)用在變量的聲明與函數(shù)的聲明。
因此，函數(shù)可以在聲明之前調(diào)用：
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表達(dá)式定義函數(shù)時(shí)無法提升。
自調(diào)用函數(shù)
函數(shù)表達(dá)式可以 "自調(diào)用"。
自調(diào)用表達(dá)式會(huì)自動(dòng)調(diào)用。
如果表達(dá)式后面緊跟 () ，則會(huì)自動(dòng)調(diào)用。
不能自調(diào)用聲明的函數(shù)。
通過添加括號(hào)，來說明它是一個(gè)函數(shù)表達(dá)式：
(function () {
var x = "Hello!!"; // 我將調(diào)用自己
})();
以上函數(shù)實(shí)際上是一個(gè) 匿名自我調(diào)用的函數(shù) (沒有函數(shù)名)。
函數(shù)是對(duì)象
在 JavaScript 中使用 typeof 操作符判斷函數(shù)類型將返回 "function" 。
但是JavaScript 函數(shù)描述為一個(gè)對(duì)象更加準(zhǔn)確。
JavaScript 函數(shù)有 屬性 和 方法。
arguments.length 屬性返回函數(shù)調(diào)用過程接收到的參數(shù)個(gè)數(shù)：
function myFunction(a, b) {
return arguments.length;
}
toString() 方法將函數(shù)作為一個(gè)字符串返回:
function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toString();
箭頭函數(shù)
ES6 新增了箭頭函數(shù)。
箭頭函數(shù)表達(dá)式的語法比普通函數(shù)表達(dá)式更簡(jiǎn)潔。
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 } (參數(shù)1, 參數(shù)2, …, 參數(shù)N) => 表達(dá)式(單一) // 相當(dāng)于：(參數(shù)1, 參數(shù)2, …, 參數(shù)N) =>{ return 表達(dá)式; }
當(dāng)只有一個(gè)參數(shù)時(shí)，圓括號(hào)是可選的：
(單一參數(shù)) => {函數(shù)聲明} 單一參數(shù) => {函數(shù)聲明}
沒有參數(shù)的函數(shù)應(yīng)該寫成一對(duì)圓括號(hào):
() => {函數(shù)聲明}
// ES5
var x = function(x, y) { return x * y; }
// ES6
const x = (x, y) => x * y;
有的箭頭函數(shù)都沒有自己的 this。 不適合頂一個(gè) 對(duì)象的方法。
當(dāng)我們使用箭頭函數(shù)的時(shí)候，箭頭函數(shù)會(huì)默認(rèn)幫我們綁定外層 this 的值，所以在箭頭函數(shù)中 this 的值和外層的 this 是一樣的。
箭頭函數(shù)是不能提升的，所以需要在使用之前定義。
使用 const 比使用 var 更安全，因?yàn)楹瘮?shù)表達(dá)式始終是一個(gè)常量。
如果函數(shù)部分只是一個(gè)語句，則可以省略 return 關(guān)鍵字和大括號(hào) {}，這樣做是一個(gè)比較好的習(xí)慣:
const x = (x, y) => { return x * y };
注意：IE11 及更早 IE 版本不支持箭頭函數(shù)。
JavaScript 函數(shù)參數(shù)
JavaScript 函數(shù)對(duì)參數(shù)的值沒有進(jìn)行任何的檢查。
函數(shù)顯式參數(shù)(Parameters)與隱式參數(shù)(Arguments)
在先前的教程中，我們已經(jīng)學(xué)習(xí)了函數(shù)的顯式參數(shù):
functionName(parameter1, parameter2, parameter3) {
// 要執(zhí)行的代碼……
}
函數(shù)顯式參數(shù)在函數(shù)定義時(shí)列出。
函數(shù)隱式參數(shù)在函數(shù)調(diào)用時(shí)傳遞給函數(shù)真正的值。
參數(shù)規(guī)則
JavaScript 函數(shù)定義顯式參數(shù)時(shí)沒有指定數(shù)據(jù)類型。
JavaScript 函數(shù)對(duì)隱式參數(shù)沒有進(jìn)行類型檢測(cè)。
JavaScript 函數(shù)對(duì)隱式參數(shù)的個(gè)數(shù)沒有進(jìn)行檢測(cè)。
ES6 函數(shù)可以自帶參數(shù)
ES6 支持函數(shù)帶有默認(rèn)參數(shù)，就判斷 undefined 和 || 的操作：
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y; }
myFunction(0, 2) // 輸出 2
myFunction(5); // 輸出 15, y 參數(shù)的默認(rèn)值
Arguments 對(duì)象
JavaScript 函數(shù)有個(gè)內(nèi)置的對(duì)象 arguments 對(duì)象。
argument 對(duì)象包含了函數(shù)調(diào)用的參數(shù)數(shù)組。
通過這種方式你可以很方便的找到最大的一個(gè)參數(shù)的值：
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = arguments[0];
if(arguments.length < 2) return max;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
通過值傳遞參數(shù)
在函數(shù)中調(diào)用的參數(shù)是函數(shù)的隱式參數(shù)。
JavaScript 隱式參數(shù)通過值來傳遞：函數(shù)僅僅只是獲取值。
如果函數(shù)修改參數(shù)的值，不會(huì)修改顯式參數(shù)的初始值（在函數(shù)外定義）。
隱式參數(shù)的改變?cè)诤瘮?shù)外是不可見的。
通過對(duì)象傳遞參數(shù)
在JavaScript中，可以引用對(duì)象的值。
因此我們?cè)诤瘮?shù)內(nèi)部修改對(duì)象的屬性就會(huì)修改其初始的值。
修改對(duì)象屬性可作用于函數(shù)外部（全局變量）。
修改對(duì)象屬性在函數(shù)外是可見的。
JavaScript 函數(shù)調(diào)用
JavaScript 函數(shù)有 4 種調(diào)用方式。
每種方式的不同在于 this 的初始化。
this 關(guān)鍵字
一般而言，在Javascript中，this指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象。
作為一個(gè)函數(shù)調(diào)用
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2);
以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript 中它始終是默認(rèn)的全局對(duì)象。
在 HTML 中默認(rèn)的全局對(duì)象是 HTML 頁面本身，所以函數(shù)是屬于 HTML 頁面。
在瀏覽器中的頁面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)。
myFunction() 和 window.myFunction() 是一樣的：
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20
這是調(diào)用 JavaScript 函數(shù)常用的方法， 但不是良好的編程習(xí)慣 全局變量，方法或函數(shù)容易造成命名沖突的bug。
函數(shù)作為方法調(diào)用
在 JavaScript 中你可以將函數(shù)定義為對(duì)象的方法。
以下實(shí)例創(chuàng)建了一個(gè)對(duì)象 (myObject), 對(duì)象有兩個(gè)屬性 (firstName 和 lastName), 及一個(gè)方法 (fullName):
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
fullName 方法是一個(gè)函數(shù)。函數(shù)屬于對(duì)象。 myObject 是函數(shù)的所有者。
this對(duì)象，擁有 JavaScript 代碼。實(shí)例中 this 的值為 myObject 對(duì)象。
測(cè)試以下！修改 fullName 方法并返回 this 值:
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 返回 [object Object] (所有者對(duì)象)
函數(shù)作為對(duì)象方法調(diào)用，會(huì)使得 this 的值成為對(duì)象本身。
使用構(gòu)造函數(shù)調(diào)用函數(shù)
如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。
這看起來就像創(chuàng)建了新的函數(shù)，但實(shí)際上 JavaScript 函數(shù)是重新創(chuàng)建的對(duì)象：
// 構(gòu)造函數(shù):
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"
構(gòu)造函數(shù)的調(diào)用會(huì)創(chuàng)建一個(gè)新的對(duì)象。新對(duì)象會(huì)繼承構(gòu)造函數(shù)的屬性和方法。
構(gòu)造函數(shù)中 this 關(guān)鍵字沒有任何的值。
this 的值在函數(shù)調(diào)用實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。
作為函數(shù)方法 調(diào)用函數(shù)
在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript 函數(shù)有它的屬性和方法。
call() 和 apply() 是預(yù)定義的函數(shù)方法。 兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20
兩個(gè)方法都使用了對(duì)象本身作為第一個(gè)參數(shù)。 兩者的區(qū)別在于第二個(gè)參數(shù)： apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開始）。
在 JavaScript 嚴(yán)格模式(strict mode)下, 在調(diào)用函數(shù)時(shí)第一個(gè)參數(shù)會(huì)成為 this 的值， 即使該參數(shù)不是一個(gè)對(duì)象。
在 JavaScript 非嚴(yán)格模式(non-strict mode)下, 如果第一個(gè)參數(shù)的值是 null 或 undefined, 它將使用全局對(duì)象替代。
通過 call() 或 apply() 方法你可以設(shè)置 this 的值, 且作為已存在對(duì)象的新方法調(diào)用。
this 是 JavaScript 語言的一個(gè)關(guān)鍵字。
它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。比如：
function test() {
this.x = 1;
}
隨著函數(shù)使用場(chǎng)合的不同，this 的值會(huì)發(fā)生變化。但是有一個(gè)總的原則，那就是this指的是，調(diào)用函數(shù)的那個(gè)對(duì)象。
JavaScript 閉包
變量聲明時(shí)如果不使用 var 關(guān)鍵字，那么它就是一個(gè)全局變量，即便它在函數(shù)內(nèi)定義。
變量生命周期
全局變量的作用域是全局性的，即在整個(gè)JavaScript程序中，全局變量處處都在。
而在函數(shù)內(nèi)部聲明的變量，只在函數(shù)內(nèi)部起作用。這些變量是局部變量，作用域是局部性的；函數(shù)的參數(shù)也是局部性的，只在函數(shù)內(nèi)部起作用。
JavaScript 內(nèi)嵌函數(shù)
所有函數(shù)都能訪問全局變量。
實(shí)際上，在 JavaScript 中，所有函數(shù)都能訪問它們上一層的作用域。
JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問上一層的函數(shù)變量。
該實(shí)例中，內(nèi)嵌函數(shù) plus() 可以訪問父函數(shù)的 counter 變量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JavaScript 閉包
還記得函數(shù)自我調(diào)用嗎？該函數(shù)會(huì)做什么？
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 計(jì)數(shù)器為 3
嘗試一下 ?
實(shí)例解析
變量 add 指定了函數(shù)自我調(diào)用的返回字值。
自我調(diào)用函數(shù)只執(zhí)行一次。設(shè)置計(jì)數(shù)器為 0。并返回函數(shù)表達(dá)式。
add變量可以作為一個(gè)函數(shù)使用。非常棒的部分是它可以訪問函數(shù)上一層作用域的計(jì)數(shù)器。
這個(gè)叫作 JavaScript 閉包。它使得函數(shù)擁有私有變量變成可能。
計(jì)數(shù)器受匿名函數(shù)的作用域保護(hù)，只能通過 add 方法修改。
以上代碼可以用更清晰的表達(dá)如下：
function A() {
var counter = 0;
function B() {
counter++;
}
return B;
}
var add = A();
add();
add();
add();
// 計(jì)數(shù)器為 3
詳細(xì)理解請(qǐng)點(diǎn)擊： 讓你分分鐘理解 JavaScript 閉包
JavaScript HTML DOM
通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM (文檔對(duì)象模型)
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹：
HTML DOM 樹
通過可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
查找 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
通過 id 找到 HTML 元素
通過標(biāo)簽名找到 HTML 元素
通過類名找到 HTML
通過 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最簡(jiǎn)單的方法，是通過使用元素的 id。
本例查找 id="intro" 元素：
var x=document.getElementById("intro");
如果找到該元素，則該方法將以對(duì)象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null。
通過標(biāo)簽名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
** 通過類名找到 HTML 元素**
本例通過 getElementsByClassName 函數(shù)來查找 class="intro" 的元素：
var x=document.getElementsByClassName("intro");
改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡(jiǎn)單的方法是使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語法：
document.getElementById(id).innerHTML=新的 HTML
改變 HTML 屬性
如需改變 HTML 元素的屬性，請(qǐng)使用這個(gè)語法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
實(shí)例講解：
- 上面的 HTML 文檔含有 id="image" 的 <img> 元素
- 我們使用 HTML DOM 來獲得 id="image" 的元素
- JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）
改變 HTML 樣式
如需改變 HTML 元素的樣式，請(qǐng)使用這個(gè)語法：
document.getElementById(id).style.property=新樣式
下面的例子會(huì)改變 <p> 元素的樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過腳本修改。</p>
</body>
</html>
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力對(duì) HTML 事件做出反應(yīng)。
HTML 事件屬性
如需向 HTML 元素分配 事件，您可以使用事件屬性。
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點(diǎn)這里</button>
onload 和 onunload 事件
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)。
onload 事件可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
<body onload="checkCookies()">
onchange 事件
onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用。
下面是一個(gè)如何使用 onchange 的例子。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，會(huì)調(diào)用 upperCase() 函數(shù)。
<input type="text" id="fname" onchange="upperCase()">
JavaScript HTML DOM EventListener
addEventListener() 方法
在用戶點(diǎn)擊按鈕時(shí)觸發(fā)監(jiān)聽事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會(huì)覆蓋已存在的事件句柄。
你可以向一個(gè)元素添加多個(gè)事件句柄。
你可以向同個(gè)元素添加多個(gè)同類型的事件句柄，如：兩個(gè) "click" 事件。
你可以向任何 DOM 對(duì)象添加事件監(jiān)聽，不僅僅是 HTML 元素。如： window 對(duì)象。
addEventListener() 方法可以更簡(jiǎn)單的控制事件（冒泡與捕獲）。
當(dāng)你使用 addEventListener() 方法時(shí), JavaScript 從 HTML 標(biāo)記中分離開來，可讀性更強(qiáng)， 在沒有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽。
你可以使用 removeEventListener() 方法來移除事件的監(jiān)聽。
語法
element.addEventListener(event, function, useCapture);
第一個(gè)參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。
第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。
注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
向同一個(gè)元素中添加多個(gè)事件句柄
addEventListener() 方法允許向同一個(gè)元素添加多個(gè)事件，且不會(huì)覆蓋已存在的事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
嘗試一下
你可以向同個(gè)元素添加不同類型的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
向 Window 對(duì)象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對(duì)象添加事件監(jiān)聽， HTML DOM 對(duì)象如： HTML 元素, HTML 文檔, window 對(duì)象?；蛘咂渌С龅氖录?duì)象如: xmlHttpRequest 對(duì)象。
當(dāng)用戶重置窗口大小時(shí)添加事件監(jiān)聽：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = *sometext*;
});
傳遞參數(shù)
當(dāng)傳遞參數(shù)值時(shí)，使用"匿名函數(shù)"調(diào)用帶參數(shù)的函數(shù)：
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發(fā)的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點(diǎn)擊 <p> 元素, 哪個(gè)元素的 "click" 事件先被觸發(fā)呢？
在 *冒泡 *中，內(nèi)部元素的事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點(diǎn)擊事件先觸發(fā)，然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件。
在 *捕獲 *中，外部元素的事件會(huì)先被觸發(fā)，然后才會(huì)觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點(diǎn)擊事件。
addEventListener() 方法可以指定 "useCapture" 參數(shù)來設(shè)置傳遞類型：
addEventListener(*event*, *function*, *useCapture*);
默認(rèn)值為 false, 即冒泡傳遞，當(dāng)值為 true 時(shí), 事件使用捕獲傳遞。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild()
要?jiǎng)?chuàng)建新的 HTML 元素 (節(jié)點(diǎn))需要先創(chuàng)建一個(gè)元素，然后在已存在的元素中添加它。
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - insertBefore()
以上的實(shí)例我們使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我們需要將新元素添加到開始位置，可以使用 insertBefore() 方法:
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
移除已存在的元素
要移除一個(gè)元素，你需要知道該元素的父元素。
<div id="div1">
<p id="p1">這是一個(gè)段落。
</p> <p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
替換 HTML 元素 - replaceChild()
我們可以使用 replaceChild() 方法來替換 HTML DOM 中的元素。
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
HTMLCollection 對(duì)象
getElementsByTagName() 方法返回 HTMLCollection 對(duì)象。
HTMLCollection 對(duì)象類似 HTML 元素的一個(gè)數(shù)組。
以下代碼獲取文檔所有的 <p> 元素：
var x = document.getElementsByTagName("p");
集合中的元素可以通過索引(以 0 為起始位置)來訪問。
訪問第二個(gè) <p> 元素可以是以下代碼:
y = x[1];
注意
HTMLCollection 不是一個(gè)數(shù)組！
HTMLCollection 看起來可能是一個(gè)數(shù)組，但其實(shí)不是。
你可以像數(shù)組一樣，使用索引來獲取元素。
HTMLCollection 無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。
JavaScript HTML DOM 節(jié)點(diǎn)列表
NodeList 對(duì)象是一個(gè)從文檔中獲取的節(jié)點(diǎn)列表 (集合) 。
NodeList 對(duì)象類似 HTMLCollection 對(duì)象。
一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對(duì)象，而不是 HTMLCollection 對(duì)象。
所有瀏覽器的 childNodes 屬性返回的是 NodeList 對(duì)象。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 對(duì)象。
以下代碼選取了文檔中所有的 <p> 節(jié)點(diǎn)：
var myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問。
訪問第二個(gè) <p> 元素可以是以下代碼:
y = myNodeList[1];
HTMLCollection 與 NodeList 的區(qū)別
HTMLCollection 是 HTML 元素的集合。
NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合。
NodeList 與 HTMLCollection 有很多類似的地方。
NodeList 與 HTMLCollection 都與數(shù)組對(duì)象有點(diǎn)類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
NodeList 與 HTMLCollection 都有 length 屬性。
HTMLCollection 元素可以通過 name，id 或索引來獲取。
NodeList 只能通過索引來獲取。
只有 NodeList 對(duì)象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。
節(jié)點(diǎn)列表不是一個(gè)數(shù)組！
節(jié)點(diǎn)列表看起來可能是一個(gè)數(shù)組，但其實(shí)不是。
你可以像數(shù)組一樣，使用索引來獲取元素。
節(jié)點(diǎn)列表無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。
