JavaScript 概述

目錄

id屬性

由于歷史原因，HTML元素的id屬性的名字，會(huì)自動(dòng)成為全局變量，指向該HTML元素。

// HTML元素為
// <div id="example"></div>

example // [object HTMLDivElement]

上面代碼中，有一個(gè)id屬性等于example的div元素，結(jié)果就自動(dòng)生成了全局變量example，指向這個(gè)div元素。

如果已有同名全局變量，則id元素不會(huì)自動(dòng)生成全局變量。

<script>
var example = 1;
</script>

<div id="example"></div>

<script>
console.log(example) // 1
</script>

上面代碼中，已有全局變量example，這時(shí)id屬性就不會(huì)自動(dòng)變成全局變量。另一情況是，DOM生成以后，再對(duì)全局變量example賦值，這時(shí)也會(huì)覆蓋example原來(lái)的值。

由于這種原因，默認(rèn)的全局變量名（比如，history、location、navigator等），最好不要設(shè)為id屬性的名字。

另外，由于原則上，網(wǎng)頁(yè)之中不應(yīng)該有同名id屬性的HTML元素，所以，這種機(jī)制產(chǎn)生的全局變量不會(huì)重名。

name屬性

由于歷史原因，以下HTML元素的name屬性，也會(huì)成為全局變量。

• <applet>
• <area>
• <embed>
• <form>
• <frame>
• <frameset>
• <iframe>
• <img>
• <object>

// HTML代碼為
// <form name="myForm" />

myForm // [object HTMLFormElement]

上面代碼中，form元素的name屬性名myForm，自動(dòng)成為全局變量myForm。

如果name屬性同名的HTML元素不止一個(gè)，或者某個(gè)元素的id屬性與另一個(gè)元素的name屬性同名，這時(shí)全局變量會(huì)指向一個(gè)類似數(shù)組的對(duì)象。

// HTML代碼為
// <div id="myForm" />
// <form name="myForm" />

myForm[0] // [object HTMLDivElement]
myForm[1] // [object HTMLFormElement]

上面代碼中，全局變量myForm的第一個(gè)成員指向div元素，第二個(gè)成員指向form元素。

這些元素的name屬性名，也會(huì)成為document對(duì)象的屬性。

// HTML代碼為<img name="xx" />
document.xx === xx // true

上面代碼中，name屬性為xx的img元素，自動(dòng)生成了全局變量xx和document對(duì)象的屬性xx。

如果有多個(gè)name屬性相同的元素，那么document對(duì)象的該屬性指向一個(gè)類似數(shù)組的對(duì)象（NodeList對(duì)象的實(shí)例）。

這樣設(shè)計(jì)的原意是，通過(guò)引用document.elementName就可以獲得該元素。但是，由于這些屬性是自動(dòng)生成的，既不規(guī)范，也不利于除錯(cuò)，所以建議不要使用它們。

另外，如果iframe元素有name屬性或id屬性，那么生成的全局變量，不是指向iframe元素節(jié)點(diǎn)，而是指向這個(gè)iframe代表的子頁(yè)面window對(duì)象。

除了自動(dòng)成為window和document的屬性，帶有id或name屬性的HTML元素，還會(huì)自動(dòng)成為集合對(duì)象的屬性。舉例來(lái)說(shuō)，如果有一個(gè)表單元素<form>。

<form name="myform">

它會(huì)自動(dòng)成為集合對(duì)象document.forms的屬性。

document.forms.myforms;

表單主要用于收集用戶的輸入，送到服務(wù)器或者在前端處理。

選中表單元素

如果<form>元素帶有name或者id屬性，這個(gè)元素節(jié)點(diǎn)會(huì)自動(dòng)成為window和document的屬性，并且可以從document.forms上取到。<form name="myForm">節(jié)點(diǎn)用下面幾種方法可以拿到。

window.myForm
document.myForm
document.forms.myForm
document.forms[n]

document.forms返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection的實(shí)例），包含了當(dāng)前頁(yè)面中所有表單（<form>元素）。HTMLCollection的實(shí)例都可以使用某個(gè)節(jié)點(diǎn)的id和name屬性，取到該節(jié)點(diǎn)。

表單對(duì)象本身也是一個(gè)HTMLCollection對(duì)象的實(shí)例，它里面的各個(gè)子節(jié)點(diǎn)也可以用id屬性、name屬性或者索引值取到。舉例來(lái)說(shuō)，myForm表單的第一個(gè)子節(jié)點(diǎn)是<input type="text" name="address">，它可以用下面的方法取到。

document.forms.myForm[0]
document.forms.myForm.address
document.myForm.address

表單節(jié)點(diǎn)都有一個(gè)elements屬性，包含了當(dāng)前表單的所有子元素，所以也可以用下面的方法取到address子節(jié)點(diǎn)。

document.forms.myForm.elements[0]
document.forms.myForm.elements.address

表單之中，會(huì)有多個(gè)元素共用同一個(gè)name屬性的情況。

<form name="myForm">
  <label><input type="radio" name="method" value="1">1</label>
  <label><input type="radio" name="method" value="2">2</label>
  <label><input type="radio" name="method" value="3">3</label>
</form>

上面代碼中，三個(gè)單選框元素共用同一個(gè)name屬性，這時(shí)如果使用這個(gè)name屬性去引用子節(jié)點(diǎn)，返回的將是一個(gè)類似數(shù)組的對(duì)象。

document.forms.myForm.elements.method.length // 3

如果想知道，用戶到底選中了哪一個(gè)子節(jié)點(diǎn)，就必須遍歷所有的同名節(jié)點(diǎn)。

var methods = document.forms.myForm.elements.method;
var result;

for (var i = 0; i < methods.length; i++) {
  if (methods[i].checked) value = methods[i].value;
}

Form 對(duì)象

<form>元素對(duì)應(yīng)的DOM節(jié)點(diǎn)是一個(gè)Form對(duì)象。這個(gè)對(duì)象除了上一小節(jié)提到的elements屬性，還有以下屬性，分別對(duì)應(yīng)元素標(biāo)簽中的同名屬性。

• action
• encoding
• method
• target

Form對(duì)象還有兩個(gè)屬性，可以指定事件的回調(diào)函數(shù)。

• onsubmit：提交表單前調(diào)用，只要返回false，就會(huì)取消提交。可以在這個(gè)函數(shù)里面，校驗(yàn)用戶的輸入。該函數(shù)只會(huì)在用戶提交表單時(shí)調(diào)用，腳本調(diào)用submit()方法是不會(huì)觸發(fā)這個(gè)函數(shù)的。
• onreset：重置表單前調(diào)用，只要返回false，就會(huì)取消表單重置。該函數(shù)只能由真實(shí)的reset按鈕觸發(fā)，腳本調(diào)用reset()方法并不會(huì)觸發(fā)這個(gè)函數(shù)。

<form onreset="return confirm('你要重置表單嗎？')">
  <!-- ... -->
  <button type="reset">重置</button>
</form>

Form對(duì)象的方法主要是下面兩個(gè)。

• submit()：將表單數(shù)據(jù)提交到服務(wù)器
• reset()：重置表單數(shù)據(jù)

表單控件對(duì)象

表單包含了各種控件，每個(gè)控件都是一個(gè)對(duì)象。它們都包含了以下四個(gè)屬性。

• type：表示控件的類型，對(duì)于<input>元素、<button>元素等于這些標(biāo)簽的type屬性，對(duì)于其他控件，<select>為select-one，<select multiple>為select-multiple，<textarea>為textarea。該屬性只讀。
• form：指向包含該控件的表單對(duì)象，如果該控件不包含在表單之中，則返回null。該屬性只讀。
• name：返回控件標(biāo)簽的name屬性。該屬性只讀。
• value：返回或設(shè)置該控件的值，這個(gè)值會(huì)被表單提交到服務(wù)器。該屬性可讀寫。 才會(huì) form屬性有一個(gè)特別的應(yīng)用，就是在控件的事件回調(diào)函數(shù)里面，this指向事件所在的控件對(duì)象，所以this.form就指向控件所在的表單，this.form.x就指向其他控件元素，里面的x就是該控件的name屬性或id屬性的值。

表單控件之中，只要是按鈕，都有onclick屬性，用來(lái)指定用戶點(diǎn)擊按鈕時(shí)的回調(diào)函數(shù)；其他的控件一般都有onchange屬性，控件值發(fā)生變化，并且該控件失去焦點(diǎn)時(shí)調(diào)用。單選框（Radio控件）和多選框（Checkbox控件）可以同時(shí)設(shè)置onchange和onclick屬性。

表單控件還有以下兩個(gè)事件。

• focus：得到焦點(diǎn)時(shí)觸發(fā)
• blur：失去焦點(diǎn)時(shí)觸發(fā)

Select元素

<select>元素用來(lái)生成下拉列表。默認(rèn)情況下，瀏覽器只顯示一條選項(xiàng)，其他選項(xiàng)需要點(diǎn)擊下拉按鈕才會(huì)顯示。size選項(xiàng)如果大于1，那么瀏覽器就會(huì)默認(rèn)顯示多個(gè)選項(xiàng)。

<select size="3">

上面代碼指定默認(rèn)顯示三個(gè)選項(xiàng)，更多的選項(xiàng)需要點(diǎn)擊下拉按鈕才會(huì)顯示。

<select>元素默認(rèn)只能選中一個(gè)選項(xiàng)，如果想選中多個(gè)選項(xiàng)，必須指定multiple屬性。

<select multiple>

用戶選中或者取消一個(gè)下拉選項(xiàng)時(shí)，會(huì)觸發(fā)Select對(duì)象的change事件，從而自動(dòng)執(zhí)行onchange監(jiān)聽(tīng)函數(shù)。

<select>元素有一個(gè)options屬性，返回一個(gè)類似數(shù)組的對(duì)象，包含了所有的<option>元素。

// HTML 代碼為
// <select id="example">
//   <option>1</option>
//   <option>2</option>
//   <option>3</option>
// </select>

var element = document.querySelector('#example');
element.options.length
// 3

上面代碼中，<select>元素的options屬性包含了三個(gè)<option>元素。

options屬性可讀寫，可以通過(guò)設(shè)置options.length，控制向用戶顯示的下拉選項(xiàng)的值。將options.length設(shè)為0，可以不再顯示任何下拉屬性。將options里面某個(gè)位置的Option對(duì)象設(shè)為null，將等于移除這個(gè)選項(xiàng)，后面的Option對(duì)象會(huì)自動(dòng)遞補(bǔ)這個(gè)位置。

Select對(duì)象的selectedIndex屬性，返回用戶選中的第一個(gè)下拉選項(xiàng)的位置（從0開(kāi)始）。如果返回-1，則表示用戶沒(méi)有選中任何選項(xiàng)。該屬性可讀寫。對(duì)于單選的下拉列表，這個(gè)屬性就可以得知用戶的選擇；對(duì)于多選的下拉列表，這個(gè)屬性還不夠，必須逐個(gè)輪詢options屬性，判斷每個(gè)Option對(duì)象的selected屬性是否為true。

Option元素

<option>元素用于在下拉列表（<select>）中生成下拉選項(xiàng)。每個(gè)下拉選項(xiàng)就是一個(gè)Option對(duì)象，它有以下屬性。

• selected：返回一個(gè)布爾值，表示用戶是否選中該選項(xiàng)。
• text：返回該下拉選項(xiàng)的顯示的文本。該屬性可讀寫，可用來(lái)顯示向用戶顯示的文本。
• value：返回該下拉選項(xiàng)的值，即向服務(wù)器發(fā)送的那個(gè)值。該屬性可讀寫。
• defaultSelected：返回一個(gè)布爾值，表示這個(gè)下拉選項(xiàng)是否默認(rèn)選中。

瀏覽器提供Option構(gòu)造函數(shù)，用來(lái)生成下拉列表的選項(xiàng)對(duì)象。利用這個(gè)函數(shù)，可以用腳本生成下拉選項(xiàng)，然后放入Select.options對(duì)象里面，從而自動(dòng)生成下拉列表。

var item = new Option(
  'Hello World',  // 顯示的文本，即 text 屬性
  'myValue',  // 向服務(wù)器發(fā)送的值，即 value 屬性
  false,    // 是否為默認(rèn)選項(xiàng)，即 defaultSelected 屬性
  false   // 是否已經(jīng)選中，即 selected 屬性
);

// 獲取 Selector 對(duì)象
var mySelector = document.forms.myForm.mySelector;
mySelector.options[mySelector.options.length] = item;

上面代碼在下拉列表的末尾添加了一個(gè)選項(xiàng)。從中可以看到，Option構(gòu)造函數(shù)可以接受四個(gè)選項(xiàng)，對(duì)應(yīng)<Option>對(duì)象的四個(gè)屬性。

注意，用腳本插入下拉選項(xiàng)完全可以用標(biāo)準(zhǔn)的DOM操作方法實(shí)現(xiàn)，比如Document.create Element()、Node.insertBefore()和Node.removeChild()等等。

alt屬性，src屬性

alt屬性返回image元素的HTML標(biāo)簽的alt屬性值，src屬性返回image元素的HTML標(biāo)簽的src屬性值。

// 方法一：HTML5構(gòu)造函數(shù)Image
var img1 = new Image();
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

// 方法二：DOM HTMLImageElement
var img2 = document.createElement('img');
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);

document.images[0].src
// image1.png

complete屬性

complete屬性返回一個(gè)布爾值，true表示當(dāng)前圖像屬于瀏覽器支持的圖形類型，并且加載完成，解碼過(guò)程沒(méi)有出錯(cuò)，否則就返回false。

height屬性，width屬性

這兩個(gè)屬性返回image元素被瀏覽器渲染后的高度和寬度。

naturalWidth屬性，naturalHeight屬性

這兩個(gè)屬性只讀，表示image對(duì)象真實(shí)的寬度和高度。

myImage.addEventListener('onload', function() {
	console.log('My width is: ', this.naturalWidth);
	console.log('My height is: ', this.naturalHeight);
});

表格有一些特殊的DOM操作方法。

• insertRow()：在指定位置插入一個(gè)新行（tr）。
• deleteRow()：在指定位置刪除一行（tr）。
• insertCell()：在指定位置插入一個(gè)單元格（td）。
• deleteCell()：在指定位置刪除一個(gè)單元格（td）。
• createCaption()：插入標(biāo)題。
• deleteCaption()：刪除標(biāo)題。
• createTHead()：插入表頭。
• deleteTHead()：刪除表頭。

下面是使用JavaScript生成表格的一個(gè)例子。

var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);

for (var i = 0; i <= 9; i++) {
  var rowcount = i + 1;
  tbody.insertRow(i);
  tbody.rows[i].insertCell(0);
  tbody.rows[i].insertCell(1);
  tbody.rows[i].insertCell(2);
  tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));
  tbody.rows[i].cells[1].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 2'));
  tbody.rows[i].cells[2].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 3'));
}

table.createCaption();
table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));

document.body.appendChild(table);

這些代碼相當(dāng)易讀，其中需要注意的就是insertRow和insertCell方法，接受一個(gè)表示位置的參數(shù)（從0開(kāi)始的整數(shù)）。

table元素有以下屬性：

• caption：標(biāo)題。
• tHead：表頭。
• tFoot：表尾。
• rows：行元素對(duì)象，該屬性只讀。
• rows.cells：每一行的單元格對(duì)象，該屬性只讀。
• tBodies：表體，該屬性只讀。

audio元素和video元素加載音頻和視頻時(shí)，以下事件按次序發(fā)生。

• loadstart：開(kāi)始加載音頻和視頻。
• durationchange：音頻和視頻的duration屬性（時(shí)長(zhǎng)）發(fā)生變化時(shí)觸發(fā)，即已經(jīng)知道媒體文件的長(zhǎng)度。如果沒(méi)有指定音頻和視頻文件，duration屬性等于NaN。如果播放流媒體文件，沒(méi)有明確的結(jié)束時(shí)間，duration屬性等于Inf（Infinity）。
• loadedmetadata：媒體文件的元數(shù)據(jù)加載完畢時(shí)觸發(fā)，元數(shù)據(jù)包括duration（時(shí)長(zhǎng)）、dimensions（大小，視頻獨(dú)有）和文字軌。
• loadeddata：媒體文件的第一幀加載完畢時(shí)觸發(fā)，此時(shí)整個(gè)文件還沒(méi)有加載完。
• progress：瀏覽器正在下載媒體文件，周期性觸發(fā)。下載信息保存在元素的buffered屬性中。
• canplay：瀏覽器準(zhǔn)備好播放，即使只有幾幀，readyState屬性變?yōu)镃AN_PLAY。
• canplaythrough：瀏覽器認(rèn)為可以不緩沖（buffering）播放時(shí)觸發(fā)，即當(dāng)前下載速度保持不低于播放速度，readyState屬性變?yōu)镃AN_PLAY_THROUGH。

除了上面這些事件，audio元素和video元素還支持以下事件。

tabindex屬性用來(lái)指定，當(dāng)前HTML元素節(jié)點(diǎn)是否被tab鍵遍歷，以及遍歷的優(yōu)先級(jí)。

var b1 = document.getElementById("button1");

b1.tabIndex = 1;

如果tabindex = -1，tab鍵跳過(guò)當(dāng)前元素。

如果tabindex = 0，表示tab鍵將遍歷當(dāng)前元素。如果一個(gè)元素沒(méi)有設(shè)置tabindex，默認(rèn)值就是0。

如果tabindex > 0，表示tab鍵優(yōu)先遍歷。值越大，就表示優(yōu)先級(jí)越大。