JavaScript 概述

2018-07-24 11:53 更新

目錄

元素與變量名

id屬性

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

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

example // [object HTMLDivElement]

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

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

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

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

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

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

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

另外,由于原則上,網(wǎng)頁之中不應(yī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屬性為xximg元素,自動生成了全局變量xxdocument對象的屬性xx。

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

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

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

除了自動成為windowdocument的屬性,帶有idname屬性的HTML元素,還會自動成為集合對象的屬性。舉例來說,如果有一個表單元素<form>

<form name="myform">

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

document.forms.myforms;

Form 元素(表單)

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

選中表單元素

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

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

document.forms返回一個類似數(shù)組的對象(HTMLCollection的實例),包含了當(dāng)前頁面中所有表單(<form>元素)。HTMLCollection的實例都可以使用某個節(jié)點的idname屬性,取到該節(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屬性,包含了當(dāng)前表單的所有子元素,所以也可以用下面的方法取到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>元素對應(yīng)的DOM節(jié)點是一個Form對象。這個對象除了上一小節(jié)提到的elements屬性,還有以下屬性,分別對應(yīng)元素標(biāo)簽中的同名屬性。

  • 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ù)提交到服務(wù)器
  • reset():重置表單數(shù)據(jù)

表單控件對象

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

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

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

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

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

Select元素

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

<select size="3">

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

<select>元素默認(rèn)只能選中一個選項,如果想選中多個選項,必須指定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屬性可讀寫,可以通過設(shè)置options.length,控制向用戶顯示的下拉選項的值。將options.length設(shè)為0,可以不再顯示任何下拉屬性。將options里面某個位置的Option對象設(shè)為null,將等于移除這個選項,后面的Option對象會自動遞補這個位置。

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

Option元素

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

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

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

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

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

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

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

image元素

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屬性返回一個布爾值,true表示當(dāng)前圖像屬于瀏覽器支持的圖形類型,并且加載完成,解碼過程沒有出錯,否則就返回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);
});

table元素

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

  • insertRow():在指定位置插入一個新行(tr)。
  • deleteRow():在指定位置刪除一行(tr)。
  • insertCell():在指定位置插入一個單元格(td)。
  • deleteCell():在指定位置刪除一個單元格(td)。
  • createCaption():插入標(biāo)題。
  • deleteCaption():刪除標(biāo)題。
  • 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);

這些代碼相當(dāng)易讀,其中需要注意的就是insertRowinsertCell方法,接受一個表示位置的參數(shù)(從0開始的整數(shù))。

table元素有以下屬性:

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

audio元素,video元素

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:瀏覽器準(zhǔn)備好播放,即使只有幾幀,readyState屬性變?yōu)镃AN_PLAY。
  • canplaythrough:瀏覽器認(rèn)為可以不緩沖(buffering)播放時觸發(fā),即當(dāng)前下載速度保持不低于播放速度,readyState屬性變?yōu)镃AN_PLAY_THROUGH。

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

事件 觸發(fā)條件
abort 播放中斷
emptied 媒體文件加載后又被清空,比如加載后又調(diào)用load方法重新加載。
ended 播放結(jié)束
error 發(fā)生錯誤。該元素的error屬性包含更多信息。
pause 播放暫停
play 暫停后重新開始播放
playing 開始播放,包括第一次播放、暫停后播放、結(jié)束后重新播放。
ratechange 播放速率改變
seeked 搜索操作結(jié)束
seeking 搜索操作開始
stalled 瀏覽器開始嘗試讀取媒體文件,但是沒有如預(yù)期那樣獲取數(shù)據(jù)
suspend 加載文件停止,有可能是播放結(jié)束,也有可能是其他原因的暫停
timeupdate 網(wǎng)頁元素的currentTime屬性改變時觸發(fā)。
volumechange 音量改變時觸發(fā)(包括靜音)。
waiting 由于另一個操作(比如搜索)還沒有結(jié)束,導(dǎo)致當(dāng)前操作(比如播放)不得不等待。

tabindex屬性

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

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

b1.tabIndex = 1;

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

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

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號