JavaScript 概述

目錄

id屬性

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

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

example // [object HTMLDivElement]

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

如果已有同名全局變量，則id元素不會自動生成全局變量。

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

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

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

上面代碼中，已有全局變量example，這時id屬性就不會自動變成全局變量。另一情況是，DOM生成以后，再對全局變量example賦值，這時也會覆蓋example原來的值。

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

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

name屬性

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

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

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

myForm // [object HTMLFormElement]

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

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

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

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

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

這些元素的name屬性名，也會成為document對象的屬性。

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

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

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

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

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

除了自動成為window和document的屬性，帶有id或name屬性的HTML元素，還會自動成為集合對象的屬性。舉例來說，如果有一個表單元素<form>。

<form name="myform">

它會自動成為集合對象document.forms的屬性。

document.forms.myforms;

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

選中表單元素

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

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

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

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

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

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

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

表單之中，會有多個元素共用同一個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>

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

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

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

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 對象

<form>元素對應的DOM節(jié)點是一個Form對象。這個對象除了上一小節(jié)提到的elements屬性，還有以下屬性，分別對應元素標簽中的同名屬性。

• action
• encoding
• method
• target

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

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

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

Form對象的方法主要是下面兩個。

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

表單控件對象

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

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

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

表單控件還有以下兩個事件。

• focus：得到焦點時觸發(fā)
• blur：失去焦點時觸發(fā)

Select元素

<select>元素用來生成下拉列表。默認情況下，瀏覽器只顯示一條選項，其他選項需要點擊下拉按鈕才會顯示。size選項如果大于1，那么瀏覽器就會默認顯示多個選項。

<select size="3">

上面代碼指定默認顯示三個選項，更多的選項需要點擊下拉按鈕才會顯示。

<select>元素默認只能選中一個選項，如果想選中多個選項，必須指定multiple屬性。

<select multiple>

用戶選中或者取消一個下拉選項時，會觸發(fā)Select對象的change事件，從而自動執(zhí)行onchange監(jiān)聽函數(shù)。

<select>元素有一個options屬性，返回一個類似數(shù)組的對象，包含了所有的<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屬性包含了三個<option>元素。

options屬性可讀寫，可以通過設置options.length，控制向用戶顯示的下拉選項的值。將options.length設為0，可以不再顯示任何下拉屬性。將options里面某個位置的Option對象設為null，將等于移除這個選項，后面的Option對象會自動遞補這個位置。

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

Option元素

<option>元素用于在下拉列表（<select>）中生成下拉選項。每個下拉選項就是一個Option對象，它有以下屬性。

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

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

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

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

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

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

alt屬性，src屬性

alt屬性返回image元素的HTML標簽的alt屬性值，src屬性返回image元素的HTML標簽的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屬性返回一個布爾值，true表示當前圖像屬于瀏覽器支持的圖形類型，并且加載完成，解碼過程沒有出錯，否則就返回false。

height屬性，width屬性

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

naturalWidth屬性，naturalHeight屬性

這兩個屬性只讀，表示image對象真實的寬度和高度。

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

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

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

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

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);

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

table元素有以下屬性：

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

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

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

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

tabindex屬性用來指定，當前HTML元素節(jié)點是否被tab鍵遍歷，以及遍歷的優(yōu)先級。

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

b1.tabIndex = 1;

如果tabindex = -1，tab鍵跳過當前元素。

如果tabindex = 0，表示tab鍵將遍歷當前元素。如果一個元素沒有設置tabindex，默認值就是0。

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