第2章 JavaScript操作DOM物件
2.1 window物件
瀏覽器物件模型(BOM)是JavaScript的組成之一，它提供了獨立於內容與瀏覽器視窗進行互動的物件，使用瀏覽器物件模型可以實現與HTML的互動。它的作用是將相關的元素組織包裝起來，提供給程式設計人員使用，從而降低開發人員的勞動量，提高設計Web頁面的能力。
BOM的分層結構：
window：history document location
document：link form anchor
form：button checkbox text …… textarea radio select
window物件是整個BOM的核心，在瀏覽器中開啟網頁後，首先看到的是瀏覽器視窗，即頂層的window物件；其次是網頁文件內容，即document(文件)。它的內容包括一些超連結(link)、表單(form)、錨(anchor)等，表單由文字框(text)、單選按鈕(radio)、按鈕(button)等表單元素組成。在瀏覽器物件結構中，除了document物件外，window物件之下還有兩個物件：地址物件(location)和歷史物件(history)，它們對應於瀏覽器位址列和前進/後退按鈕。
使用BOM可以實現的功能：
→ 彈出新的瀏覽器視窗
→ 移動、關閉瀏覽器視窗及調整視窗的大小
→ 在瀏覽器視窗中實現頁面的前進、後退功能
window物件也稱為瀏覽器物件。當瀏覽器開啟HTML文件時，通常會建立一個window物件，如果文件定義了一個或多個框架時，瀏覽器將為原始文件建立一個window物件，同時為每個框架另外建立一個window物件。
2.1.1 常用的屬性
window物件的常用屬性
| 名稱 |
說明 |
| history |
有關客戶訪問過的URL的資訊 |
| location |
有關當前URL的資訊 |
| screen |
只讀屬性，包含有關客戶端顯示螢幕的資訊 |
語法：
window.屬性名=”屬性值”
例：window.location=”http://www.baidu.com”，表示跳轉到百度搜索頁面；screen.height返回顯示瀏覽器的螢幕的高度，單位為畫素。
2.1.2 常用的方法
window物件的常用方法
| 名稱 |
說明 |
| prompt() |
顯示可提示使用者輸入的對話方塊 |
| alert() |
顯示一個帶有提示資訊和一個“確定”按鈕的警示對話方塊 |
| confirm() |
顯示一個帶有提示資訊、“確定”和“取消”按鈕的對話方塊 |
| close() |
關閉瀏覽器視窗 |
| open() |
開啟一個新的瀏覽器視窗，載入給定URL所指定的文件 |
| setTimeout() |
在指定的毫秒數後呼叫函式或計算表示式 |
| setInterval() |
按照指定的週期(以毫秒計)來呼叫函式或表示式 |
語法：
window.方法名();
window物件是全域性物件，所以在使用window物件的屬性和方法時，window可以省略。例：使用的alert()，相當於寫成了window.alert()。
1、 confirm()
confirm()將彈出一個確認對話方塊。
語法：
window.confirm(“對話方塊中顯示的純文字”);
在confirm()彈出的確認對話方塊中，有一條提示資訊、一個“確定”按鈕和一個“取消”按鈕。如果使用者單擊“確定”按鈕，則confirm()返回true；如果單擊“取消”按鈕，則confirm()返回false。
在使用者單擊“確定”按鈕或“取消”按鈕將對話方塊關閉之前，它將阻止使用者對瀏覽器的所有操作，也就是說，當呼叫confirm()時，在使用者做出應答（單擊按鈕或關閉對話方塊）之前，不會執行下一條語句。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>確認對話方塊</title>
</head>
<body>
<script type="text/javascript">
var flag=confirm("確認要刪除此條資訊嗎？");
if(flag==true){
alert("刪除成功！");
}else{
alert("你取消了刪除");
}
</script>
</body>
</html>
在瀏覽器中執行
如果單擊“確定”按鈕
如果單擊“取消”按鈕
prompt()方法、alert()方法和confirm()方法的異同：
相同處：它們都是在頁面上彈出對話方塊
不同處：作用不相同。
→ alert()只要一個引數，僅顯示警告對話方塊的資訊，無返回值，不能對指令碼產生任何改變。
→ prompt()有兩個引數，是輸入對話方塊，用來提示使用者輸入一些資訊，單擊“取消”按鈕則返回null，單擊“確定”按鈕則返回使用者輸入的值，常用於收集使用者關於特定問題而反饋的資訊。
→ confirm()只有一個引數，是確認對話方塊，顯示提示對話方塊的訊息、“確定”按鈕和“取消”按鈕，單擊“確定”按鈕返回true，單擊“取消”按鈕返回false，因此與if-else語句搭配使用。
2、 close()
close()方法用於關閉瀏覽器視窗。
語法：
window.close();
close()方法可用在網站頁面中可以對當前視窗進行關閉的按鈕。
3、 open()
在頁面上彈出一個新的瀏覽器視窗。
語法：
window.open(“彈出視窗的url”,”視窗名稱”,”視窗特徵”)
視窗的特徵屬性
| 名稱 |
說明 |
| height、width |
視窗文件顯示區的高度、寬度，以畫素計 |
| left、top |
視窗的x座標、y座標，以畫素計 |
| toolbar=yes|no|1|0 |
是否顯示瀏覽器的工具欄，預設是yes |
| scrollbars=yes|no|1|0 |
是否顯示滾動條，預設是yes |
| location=yes|no|1|0 |
是否顯示位址列，預設是yes |
| status=yes|no|1|0 |
是否新增狀態列，預設是yes |
| menubar=yes|no|1|0 |
是否顯示選單欄，預設是yes |
| resizable=yes|no|1|0 |
視窗是否可調節尺寸，預設是yes |
| titlebar=yes|no|1|0 |
是否顯示標題欄，預設是yes |
| fullscreen=yes|no|1|0 |
是否使用全屏模式顯示瀏覽器，預設是no |
open()方法通常用在開啟一個網頁彈出廣告頁面或網站的資訊宣告頁面等。
2.2 history物件與location物件
2.2.1 history物件
history物件提供使用者最近瀏覽過的URL列表。但出於隱私方面的原因，history物件不再允許指令碼訪問已經訪問過的實際URL，可以使用history物件提供的逐個返回訪問過的頁面方法。
history物件的方法
| 名稱 |
描述 |
| back() |
載入history物件列表中的前一個URL |
| forward() |
載入history物件列表中的後一個URL |
| go() |
載入history物件列表中的某個具體URL |
→ back()方法會讓瀏覽器載入前一個瀏覽過的文件，history.back()等效於瀏覽器中的“後退”按鈕。
→ forward()方法會讓瀏覽器載入後一個瀏覽過的文件，history.forward()等效於瀏覽器中的“前進”按鈕。
→ go(n)方法中的n是一個具體的數字，當n>0時，裝入歷史列表中往前數的第n個頁面；當n=0時，裝入當前頁面；當n<0時，裝入歷史列表中往後數的第n個頁面。
◇history.go(1)代表前進1頁，相當於瀏覽器中的“前進”按鈕，等價於forward()方法。
◇history.go(-1)代表後退1頁，相當於瀏覽器中的“後退”按鈕，等價於back()方法。
2.2.2 location物件
location物件提供當前頁面的URL資訊，並且可以重新裝載當前頁面或裝入新頁面。
location物件的屬性
| 名稱 |
描述 |
| host |
設定或返回主機名和當前URL的埠號 |
| hostname |
設定或返回當前URL的主機名 |
| href |
設定或返回完整的URL |
location物件的方法
| 名稱 |
描述 |
| reload() |
重新載入當前文件 |
| replace() |
用新的文件替換當前文件 |
location物件常用的屬性是href，通過對此屬性設定不同的網址，可以實現跳轉功能。也可以直接寫成location=”url”來實現頁面跳轉，省略了href。
使用<a href=”url”>的方法實現頁面跳轉，是固定頁面；location物件的href屬性可以動態地改變連結的頁面。
2.3 document物件
document物件既是window物件的一部分，又代表了整個HTML文件，可用來訪問頁面中的所有元素。所以在使用document物件時，除了要適用於各瀏覽器外，也要符合W3C（全球資訊網聯盟）的標準。
2.3.1 document物件的常用屬性
document物件的常用屬性
| 屬性 |
描述 |
| referrer |
返回載入當前文件的URL |
| URL |
返回當前文件的URL |
referrer語法：
document.referrer
當前文件如果不是通過超連結訪問的，則document.referrer的值為null。
URL語法：
document.URL
上網瀏覽某個頁面時，由於不是由指定的頁面進入的，因此係統將會提醒不能瀏覽本頁面或者直接跳轉到其他頁面，這樣的功能實際上就是通過referrer屬性來實現的。
☆示例
index.html頁面關鍵程式碼：
<body>
<h1><a href="示例4-praise.html">馬上去領獎啦！</a></h1>
</body>
</html>
在index.html中單擊“馬上去領獎啦！”連結，進入praise.html頁面，在praise.html頁面中使用referrer屬性獲得連結進入本頁的頁面地址，然後判斷是否從領獎頁面進入，如果不是，則頁面自動跳轉到登入頁面(login.html)，praise.html頁面關鍵程式碼：
<body>
<script type="text/javascript">
var preUrl = document.referrer;//載入本頁面文件的地址
if(preUrl==""){
document.write("<h2>您不是從領獎頁面進入，5秒後將自動跳轉到登入頁面</h2>")
setTimeout("location.href='示例4-login.html'",5000);//使用setTimeout延遲5秒後自動跳轉
}else{
document.write("<h2>大獎趕快拿啦！筆記本！數碼相機！</h2>");
}
</script>
</body>
注意：praise.html頁面的關鍵程式碼中使用setTimeout()是定時函式，作用是延遲5秒後自動跳轉到login.html。
如果HTML頁面直接在本地執行，則無論是否從本頁面進入，referrer獲取的地址都將是一個空字串，因此需要在伺服器環境下開啟HTML頁面。
提示：由於webStorm具有模擬網站伺服器的功能，因此使用webStorm開啟index.html頁面，單擊“馬上去領獎啦！”連結，進入praise.html頁面，才能夠獲取當前文件的url。
2.3.2 document物件的常用方法
document物件的常用方法
| 方法 |
描述 |
| getElementById() |
返回對擁有指定id的第一個物件的引用 |
| getElementsByName() |
返回帶有指定名稱的物件的集合 |
| getElementsByTagName() |
返回帶有指定標籤名的物件的集合 |
| write() |
向文件寫文字、HTML表示式或JavaScript程式碼 |
→ getElementById()方法一般用於訪問div、圖片、表單元素、網頁標籤等，但要求訪問物件的id是唯一的。
→ getElementsByName()方法與getElementById()方法相似，但它訪問的是具體name屬性的元素，由於一個文件中的name屬性可能不唯一，因此getElementsByName()方法一般用於訪問一組相同name屬性的元素，如具有相同name屬性的單選按鈕、複選框等。
→ getElementsByTagName()方法是按標籤來訪問頁面元素的，一般用於訪問一組相同的元素，如一組<input>、一組圖片等。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>島上書店</title>
</head>
<body>
<div class="content">
<div id="book">書名：島上書店</div>
<input type="button" name="changeBox" value="換換名稱" onclick="alterBook()";/>
<br/>四季名稱：
<input type="text" name="season" value="春"/>
<input type="text" name="season" value="夏"/>
<input type="text" name="season" value="秋"/>
<input type="text" name="season" value="冬"/><br/><br/>
<input name="b2" type="button" value="input內容" onclick="all_input()"/>
<input name="b3" type="button" value="四季名稱" onclick="s_input()"/>
<input name="b4" type="button" value="清空頁面內容" onclick="clearAll()"/>
<p id="replace"></p>
</div>
<script type="text/javascript">
function alterBook(){
document.getElementById("book").innerHTML="現象級全球暢銷書";
}
function all_input(){
var aInput = document.getElementsByTagName("input");
var sStr = "";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function s_input(){
var aInput = document.getElementsByName("season");
var sStr = "";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function clearAll(){
document.write("");
}
</script>
</body>
</html>
提示：innerHTML是幾乎所有的HTML元素都有的屬性。它是一個字串，用來設定或獲取當前物件的開始標籤和結束標籤之間的HTML。
2.4 JavaScript內建物件
在JavaScript中，系統的內建物件有Date物件、Array物件、String物件和Math物件等。
→ Date：用於操作日期和時間。
→ Array：用於在單獨的變數名中儲存一系列的值。
→ String：用於支援對字串的處理。
→ Math：使我們有能力執行常用的數學任務，它包含了若干個數字常量和函式。
2.4.1 Date物件
語法：
var 日期例項 = new Date(引數);
→ 日期例項是儲存Date物件的變數。可以省略引數，如果沒有引數，則表示當前日期和時間，例：var today = new Date();//將當前日期和時間儲存在變數today中。
→ 引數是字串格式“MM DD, YYYY, hh:mm:ss”，表示日期和時間，例：var tdate = new Date(“July 15, 2013,16:34:28”);。
Date物件有大量用於設定、獲取和操作日期的方法，從而實現在頁面中顯示不同型別的日期時間。其中最常用的是獲取日期的方法。
Date物件的常用方法
| 方法 |
說明 |
| getDate() |
返回Date物件的一個月中的每一天，其值為1~31 |
| getDay() |
返回Date物件的星期中的每一天，其值為0~6 |
| getHours() |
返回Date物件的小時數，其值為0~23 |
| getMinutes() |
返回Date物件的分鐘數，其值為0~59 |
| getSeconds() |
返回Date物件的秒數，其值為0~59 |
| getMonth() |
返回Date物件的月份，其值為0~11 |
| getFullYear() |
返回Date物件的年份，其值為四位數 |
| getTime() |
返回自某一時刻（1970年1月1日）以來的毫秒數 |
→ getFullYear()返回四位數的年份，getYear()返回二位或四位的年份，常用於獲取年份getFullYear()。
→ 獲取星期幾使用getDay()：0表示週日，1表示週一，6表示週六。
→ 各部分時間表示的範圍：除號數（一個月中的每一天）外，其他均從0開始計時。例如，月份0~11,0表示1月份，11表示12月份。
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>時鐘特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
function disptime(){
var today = new Date();//獲得當前時間
var hh = today.getHours();//獲得小時
var mm = today.getMinutes();//獲得分鐘
var ss = today.getSeconds();//獲得秒
//設定div的內容為當前時間
document.getElementById("myclock").innerHTML="現在是："+hh+":"+mm+":"+ss;
}
disptime();
</script>
</body>
</html>
2.4.2 Math物件
Math物件提供了許多與數學相關的功能，它是JavaScript的一個全域性物件，不需要建立，直接作為物件使用就可以呼叫其屬性和方法。
Math物件的常用方法
| 方法 |
說明 |
示例 |
| ceil() |
對數進行上舍入 |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
| floor() |
對數進行下舍入 |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
| round() |
把數四捨五入為最接近的數 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
| random() |
返回0~1中的隨機數 |
Math.random();例如，0.627360881412312 |
random()方法返回的隨機數包括0，不包含1，且都是小數，如果想選擇一個1~100中的整數（包括1和100），則程式碼如下：
var iNum = Math.floor(Math.random()*100+1);
如果希望返回的整數為2~99，只有98個數字，第一個值為2，則程式碼如下：
var iNum = Math.floor(Math.random()*98+2);
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用ceil()和random()隨機選擇顏色</title>
</head>
<body>
<div>
本次選擇的顏色是：<span id="color"></span>
<input type="button" value="選擇顏色" onclick="selColor();"/>
</div>
<script type="text/javascript">
function selColor(){
var color = new Array("紅色","黃色","藍色","綠色","橙色","青色","紫色");
var num = Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
2.5 定時函式
2.5.1 常用定時函式
1、setTimeout()
setTimeout()用於在指定的毫秒後呼叫函式或計算表示式。
語法：
setTimeout(“呼叫的函式名稱”,等待的毫秒數);
☆示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定時函式</title>
</head>
<body>
<input name="s" type="button" value="顯示提示訊息" onclick="timer()"/>
<script type="text/javascript">
function timer(){
setTimeout("alert('3 seconds')",3000);
}
</script>
</body>
</html>
→ 3000表示3000毫秒，即3秒。
→ 單擊“顯示提示訊息”按鈕呼叫timer()函式時，彈出一個警示對話方塊，由於使用了setTimeout()函式，因此呼叫函式timer()後，需要等待3秒，才能彈出警示對話方塊。
2、setInterval()
setInterval()可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
語法：
setInterval(“呼叫的函式名稱”，週期性呼叫函式之間間隔的毫秒數);
setInterval()會不停地呼叫函式，直到視窗被關閉或被其他方法強制停止。
經驗：setTimeout()只執行一次函式，如果要多次呼叫函式，則需要使用setInterval()或者讓被呼叫的函式再次呼叫setTimeout()。
3、clearTimeout()和clearInterval()
clearTimeout()函式用來清除由setTimeout()函式設定的定時器。
語法：
clearTimeout(setTimeout()返回的ID值);
clearInterval ()函式用來清除由setInterval()函式設定的定時器。
語法：
clearInterval(setInterval()返回的ID值);
補充：
1、 URL 統一資源定位符
2、 open(“彈出視窗的url”,”視窗名稱”,”視窗特徵”)
特徵以“,”分隔
例：open(“http://www.baidu.com”,”百度搜索”,” width=250,height=250,left=250,top=250”);
3、 對話方塊使用“\n”進行換行。
4、 屬性cursor
值：pointer:IE6.0和hand一樣。豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。
5、 表單元素，value，代表取值，value=內容，代表賦值。
普通元素，innerHTML可以用於賦值和取值操作。
賦值，例如：元素.innerHTML=內容，HTML標籤會被自動解析；
取值，例如：元素.innerHTML，會將該元素的內容全部獲取，HTML標籤頁會獲取展示。