javascript
6、JavaScript进阶篇③——浏览器对象、Dom对象
一、瀏覽器對象
1、 window對象
window對象是BOM的核心，window對象指當前的瀏覽器窗口。
window對象方法:
注意:在JavaScript基礎(chǔ)篇中，已講解了部分屬性，window對象重點講解計時器。
代碼示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>window對象</title> <script type="text/javascript"> function show(){alert("歡迎來到慕課網(wǎng)！");window.open('http://www.imooc.com','_blank');} </script> </head> <body> <form> <input type="button" value="點擊我，打開新窗口" onclick="show()" /> </form> </body> </html>先彈出alert 對話框，然后點擊確定就進入新的窗口。
2、 JavaScript計時器
在JavaScript中，我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計時器類型：
一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次。
計時器方法：
?2.1、 計時器setInterval()
在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼。
語法:
setInterval(代碼,交互時間);參數(shù)說明：
1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 交互時間：周期性執(zhí)行或調(diào)用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設(shè)有一個clock()函數(shù)):
setInterval("clock()",1000) 或 setInterval(clock,1000)我們設(shè)置一個計時器，每隔100毫秒調(diào)用clock()函數(shù)，并將時間顯示出來，代碼如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計時器</title> <script type="text/javascript">var int=setInterval(clock, 100)function clock(){var time=new Date();document.getElementById("clock").value = time;} </script> </head> <body><form><input type="text" id="clock" size="50" /></form> </body> </html>?代碼練習：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>定時器</title> 6 <script type="text/javascript"> 7 var attime; 8 function clock(){ 9 var time=new Date(); 10 var HH=time.getHours(); 11 var mm=time.getMinutes(); 12 var ss=time.getSeconds(); 13 attime=HH+":"+mm+":"+ss ; 14 document.getElementById("clock").value = attime; 15 } 16 setInterval(clock,1000); 17 18 </script> 19 </head> 20 <body> 21 <form> 22 <input type="text" id="clock" size="50" style="background:#000;color:#00ff00;width:50px;" /> 23 </form> 24 </body> 25 </html>結(jié)果：
2.2、 取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時間。
語法：
clearInterval(id_of_setInterval)參數(shù)說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒調(diào)用 clock() 函數(shù),并顯示時間。當點擊按鈕時，停止時間,代碼如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>計時器</title> <script type="text/javascript">function clock(){var time=new Date(); document.getElementById("clock").value = time;} // 每隔100毫秒調(diào)用clock函數(shù)，并將返回值賦值給ivar i=setInterval("clock()",100); </script> </head> <body><form><input type="text" id="clock" size="50" /><input type="button" value="Stop" οnclick="clearInterval(i)" /></form> </body> </html>?2.3、 計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次。
語法:
setTimeout(代碼,延遲時間);參數(shù)說明：
1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 延時時間：在執(zhí)行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
當我們打開網(wǎng)頁3秒后，在彈出一個提示框，代碼如下:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript">setTimeout("alert('Hello!')", 3000 ); </script> </head> <body> </body> </html>當按鈕start被點擊時，setTimeout()調(diào)用函數(shù)，在5秒后彈出一個提示框。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function tinfo(){var t=setTimeout("alert('Hello!')",5000);} </script> </head> <body> <form><input type="button" value="start" onClick="tinfo()"> </form> </body> </html>要創(chuàng)建一個運行于無窮循環(huán)中的計數(shù)器，我們需要編寫一個函數(shù)來調(diào)用其自身。在下面的代碼，當按鈕被點擊后，輸入域便從0開始計數(shù)。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var num=0; function numCount(){document.getElementById('txt').value=num;num=num+1;setTimeout("numCount()",1000);} </script> </head> <body> <form> <input type="text" id="txt" /> <input type="button" value="Start" onClick="numCount()" /> </form> </body> </html>?代碼示例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>計時器</title> 6 </head> 7 <script type="text/javascript"> 8 var num=0; 9 function startCount() { 10 document.getElementById('count').value=num; 11 num=num+1; 12 setTimeout("startCount()",1000); 13 } 14 15 </script> 16 </head> 17 <body> 18 <form> 19 <input type="text" id="count" onclick="startCount()"/> 20 </form> 21 </body> 22 </html>結(jié)果：
?2.4、 取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:
clearTimeout(id_of_setTimeout)參數(shù)說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執(zhí)行代碼塊。
下面的例子和上節(jié)的無窮循環(huán)的例子相似。唯一不同是，現(xiàn)在我們添加了一個 "Stop" 按鈕來停止這個計數(shù)器：
<!DOCTYPE HTML> <html> <head> <script type="text/javascript">var num=0,i;function timedCount(){document.getElementById('txt').value=num;num=num+1;i=setTimeout(timedCount,1000);}setTimeout(timedCount,1000);function stopCount(){clearTimeout(i);} </script> </head> <body><form><input type="text" id="txt"><input type="button" value="Stop" onClick="stopCount()"></form> </body> </html>?代碼示例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>計時器</title> 6 </head> 7 <script type="text/javascript"> 8 var num=0; 9 var i; 10 function startCount(){ 11 document.getElementById('count').value=num; 12 num=num+1; 13 i=setTimeout("startCount()",100); 14 } 15 function stopCount(){ 16 clearTimeout(i); 17 } 18 </script> 19 </head> 20 <body> 21 <form> 22 <input type="text" id="count" /> 23 <input type="button" value="Start" onclick="startCount()"/> 24 <input type="button" value="Stop" onclick="stopCount()"/> 25 </form> 26 </body> 27 </html>結(jié)果：
3、 History 對象
history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進與后退相似導航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關(guān)聯(lián)。
語法：
window.history.[屬性|方法]注意：window可以省略。
History 對象屬性
History 對象方法
使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：
<script type="text/javascript">var HL = window.history.length;document.write(HL); </script>?3.1、 返回前一個瀏覽的頁面 back()
back()方法，加載 history 列表中的前一個 URL。
語法：
window.history.back();比如，返回前一個瀏覽的頁面，代碼如下：
window.history.back();注意：等同于點擊瀏覽器的倒退按鈕。
back()相當于go(-1),代碼如下:
window.history.go(-1);3.2、 返回下一個瀏覽的頁面 forward()
forward()方法，加載 history 列表中的下一個 URL。
如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:
window.history.forward();注意：等價點擊前進按鈕。
forward()相當于go(1),代碼如下:
window.history.go(1);3.3、 返回瀏覽歷史中的其他頁面 go()
go()方法，根據(jù)當前所處的頁面，加載 history 列表中的某個具體的頁面。
語法：
window.history.go(number);參數(shù)：
瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，代碼如下：
window.history.go(-2);注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。
同理，返回當前頁面之后瀏覽過的第三個歷史頁面，代碼如下：
window.history.go(3);4、 location對象
location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。
語法:
location.[屬性|方法]location對象屬性圖示:
location 對象屬性：
location 對象方法:
5、 navigator對象
Navigator 對象包含有關(guān)瀏覽器的信息，通常用于檢測瀏覽器與操作系統(tǒng)的版本。
對象屬性:
查看瀏覽器的名稱和版本，代碼如下:
<script type="text/javascript">var browser=navigator.appName;var b_version=navigator.appVersion;document.write("Browser name"+browser);document.write("<br>");document.write("Browser version"+b_version); </script>5.1、 userAgent屬性
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
語法
navigator.userAgent幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內(nèi)核。
使用userAgent判斷使用的是什么瀏覽器(假設(shè)使用的是IE8瀏覽器),代碼如下:
function validB(){ var u_agent = navigator.userAgent; var B_name="Failed to identify the browser"; if(u_agent.indexOf("Firefox")>-1){ B_name="Firefox"; }else if(u_agent.indexOf("Chrome")>-1){ B_name="Chrome"; }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ B_name="IE(8-10)"; }document.write("B_name:"+B_name+"<br>");document.write("u_agent:"+u_agent+"<br>"); }運行結(jié)果:
?6、 screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
window.screen.屬性對象屬性:
6.1、 屏幕分辨率的高和寬
window.screen 對象包含有關(guān)用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2. window.screen 對象在編寫時可以不使用 window 這個前綴。
我們來獲取屏幕的高和寬，代碼如下:
?6.2、 屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務(wù)欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務(wù)欄。
注意:
不同系統(tǒng)的任務(wù)欄默認高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
我們來獲取屏幕的可用高和寬度，代碼如下：
注意:根據(jù)屏幕的不同顯示值不同。
【編程練習】
制作一個跳轉(zhuǎn)提示頁面：
要求：
1. 如果打開該頁面后，如果不做任何操作則5秒后自動跳轉(zhuǎn)到一個新的地址，如慕課網(wǎng)主頁。
2. 如果點擊“返回”按鈕則返回前一個頁面。
效果:
注意: 在窗口中運行該程序時，該窗口一定要有歷史瀏覽記錄，否則"返回"無效果。
任務(wù)：
第一步： 先編寫好網(wǎng)頁布局，如下:
? ?
第二步： 獲取顯示秒數(shù)的元素，通過定時器來更改秒數(shù)。
第三步： 通過window的location和history對象來控制網(wǎng)頁的跳轉(zhuǎn)。
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>瀏覽器對象</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 6 </head> 7 <body> 8 <H4>操作成功</H4> 9 <p> 10 <b id="second">5</b>秒后回到主頁 <a href="javascript:goBack();">返回</a> 11 </p> 12 13 <script type="text/javascript"> 14 15 var sec = document.getElementById("second"); 16 var i = 5; 17 var timer = setInterval(function(){ 18 i--; 19 sec.innerHTML = i; 20 if(i==1){ 21 window.location.href = "http://www.imooc.com/"; 22 } 23 },1000); 24 25 function goBack(){ 26 window.history.go(-1); 27 } 28 </script> 29 </body> 30 </html>二、 DOM對象，控制HTML元素
1、 認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM?將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點層次圖:
HTML文檔可以說由節(jié)點構(gòu)成的集合，DOM節(jié)點有:
1.?元素節(jié)點：上圖中<html>、<body>、<p>等都是元素節(jié)點，即標簽。
2.?文本節(jié)點:向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3.?屬性節(jié)點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。
節(jié)點屬性:
遍歷節(jié)點樹:
以上圖ul為例，它的父級節(jié)點body,它的子節(jié)點3個li,它的兄弟結(jié)點h2、P。
DOM操作:
注意:前兩個是document方法。
?1.1、 getElementsByName() 方法
返回帶有指定名稱的節(jié)點對象的集合。
語法：
document.getElementsByName(name)與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過?id 屬性。
注意:
1.?因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個元素。
2.?和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
看看下面的代碼:
運行結(jié)果:
?1.2、 getElementsByTagName() 方法
返回帶有指定標簽名的節(jié)點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
getElementsByTagName(Tagname)說明:
1. Tagname是標簽的名稱，如p、a、img等標簽名。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點。
?
試一試，使用三種獲取節(jié)點的方法，完成下面的任務(wù):
在第73行補充代碼，通過ID獲取標題H1。
在第78行補充代碼，通過name獲取值為sex的元素。
在第84行補充代碼，通過標簽名獲取input元素。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>JavaScript</title> 6 </head> 7 <body> 8 9 <form name="Input"> 10 <table align="center" width="500px" height="50%" border="1"> 11 <tr> 12 <td align="center" width="100px"> 13 學號: 14 </td> 15 <td align="center" width="300px"> 16 <input type="text" id=userid name="user" onblur="validate();"> 17 <div id=usermsg></div> 18 </td> 19 </tr> 20 <tr> 21 <td align="center" width="100px"> 22 姓名: 23 </td> 24 <td align="center"> 25 <input type="text" name="name"> 26 </td> 27 </tr> 28 <tr> 29 <td align="center" width="%45"> 30 性別: 31 </td> 32 <td align="center"> 33 <input type="radio" name="sex" value="男"> 34 男 35 <input type="radio" name="sex" value="女"> 36 女 37 </td> 38 </tr> 39 <tr> 40 <td align="center" width="30%"> 41 年齡: 42 </td> 43 <td align="center" width="300px"> 44 <input type="text" name="age"> 45 </td> 46 </tr> 47 <tr> 48 <td align="center" width="100px"> 49 地址: 50 </td> 51 <td align="center" width="300px"> 52 <input type="text" name="addr"> 53 </td> 54 </tr> 55 56 </table> 57 </form> 58 <h1 id="myHead" onclick="getValue()"> 59 看看三種獲取節(jié)點的方法? 60 </h1> 61 <p> 62 點擊標題彈出它的值。 63 </p> 64 <input type="button" onclick="getElements()" 65 value="看看name為sex的節(jié)點有幾個?" /> 66 <Br> 67 <input type="button" onclick="getTagElements()" 68 value="看看標簽名為input的節(jié)點有幾個?" /> 69 70 <script type="text/javascript"> 71 function getValue() 72 { 73 var myH=document.getElementById("myhead"); 74 alert(myH.innerHTML); 75 } 76 function getElements() 77 { 78 var myS=document.getElementsByName("sex"); 79 alert(myS.length); 80 } 81 82 function getTagElements() 83 { 84 var myI=document.getElementsByTagName("input"); 85 alert(myI.length); 86 } 87 88 </script> 89 90 </body> 91 </html>1.3、?區(qū)別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。
2. Name 是他的名字，可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3.?TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結(jié)如下:
注意：方法區(qū)分大小寫
通過下面的例子(6個name="hobby"的復(fù)選項，兩個按鈕)來區(qū)分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂<input type="checkbox" name="hobby" id="hobby2"> 登山<input type="checkbox" name="hobby" id="hobby3"> 游泳<input type="checkbox" name="hobby" id="hobby4"> 閱讀<input type="checkbox" name="hobby" id="hobby5"> 打球<input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value = "全選" id="button1"><input type="button" value = "全不選" id="button1">1. document.getElementsByTagName("input")，結(jié)果為獲取所有標簽為input的元素，共8個。
2.?document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個。
3.?document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個，"跑步"這個復(fù)選項。
?代碼練習：
1.在第27行處補充完整，實現(xiàn)當點擊"全選"按鈕時，將選中所有的復(fù)選項。
提示:document.getElementsByTagName("input")獲取的是所有input標簽，包括復(fù)選項和按鈕，所以要判斷是否是復(fù)選項，如是選中。2.在第33行處補充完整，實現(xiàn)當點擊"全不選"按鈕時，將取消所有選中的復(fù)選項。
3.在第40行處補充完整，在文本框中輸入輸入1-6數(shù)值，當點擊"確定"按鈕時，根據(jù)輸入的數(shù)值，通過id選中相應(yīng)的復(fù)選項。
代碼：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <form> 9 請選擇你愛好:<br> 10 <input type="checkbox" name="hobby" id="hobby1"> 音樂 11 <input type="checkbox" name="hobby" id="hobby2"> 登山 12 <input type="checkbox" name="hobby" id="hobby3"> 游泳 13 <input type="checkbox" name="hobby" id="hobby4"> 閱讀 14 <input type="checkbox" name="hobby" id="hobby5"> 打球 15 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br> 16 <input type="button" value = "全選" onclick = "checkall();"> 17 <input type="button" value = "全不選" onclick = "clearall();"> 18 <p>請輸入您要選擇愛好的序號，序號為1-6:</p> 19 <input id="wb" name="wb" type="text" > 20 <input name="ok" type="button" value="確定" onclick = "checkone();"> 21 </form> 22 <script type="text/javascript"> 23 function checkall(){ 24 var hobby = document.getElementsByTagName("input"); 25 for(i = 0;i < hobby.length;i++){ 26 if(hobby[i].type == "checkbox"){ 27 hobby[i].checked = true; } 28 } 29 } 30 function clearall(){ 31 var hobby = document.getElementsByName("hobby"); 32 for(i = 0;i < hobby.length;i++){ 33 hobby[i].checked = false;} 34 } 35 function checkone(){ 36 var j=document.getElementById("wb").value; 37 var hobby = document.getElementById("hobby"+j); 38 hobby.checked = true; } 39 </script> 40 </body> 41 </html>結(jié)果：
?1.4、 getAttribute()方法
通過元素節(jié)點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點。
2. name：要想查詢的元素節(jié)點的屬性名字
看看下面的代碼，獲取h1標簽的屬性值：
運行結(jié)果:
h1標簽的ID ：alink
h1標簽的title ：getAttribute()獲取標簽的屬值
?代碼練習：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>getAttribute()</title> 6 </head> 7 <body> 8 <p id="intro">課程列表</p> 9 <ul> 10 <li title="第1個li">HTML</li> 11 <li>CSS</li> 12 <li title="第3個li">JavaScript</li> 13 <li title="第4個li">Jquery</li> 14 <li>Html5</li> 15 </ul> 16 <p>以下為獲取的不為空的li標簽title值:</p> 17 <script type="text/javascript"> 18 var con=document.getElementsByTagName("li"); 19 for (var i=0; i< con.length;i++){ 20 var text=con[i].getAttribute("title"); 21 if(text!=null) 22 { 23 document.write(text+"<br>"); 24 } 25 } 26 </script> 27 </body> 28 </html>1.5、 setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)說明：
1.name:?要設(shè)置的屬性名。
2.value:?要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點對象調(diào)用的函數(shù)。
2、 節(jié)點屬性
在文檔對象模型 (DOM) 中，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性 ：
1. nodeName : 節(jié)點的名稱
2. nodeValue ：節(jié)點的值
3. nodeType ：節(jié)點的類型
一、nodeName 屬性:?節(jié)點的名稱，是只讀的。
1.?元素節(jié)點的 nodeName 與標簽名相同
2.?屬性節(jié)點的 nodeName 是屬性的名稱
3.?文本節(jié)點的 nodeName 永遠是 #text
4.?文檔節(jié)點的 nodeName 永遠是 #document
二、nodeValue 屬性：節(jié)點的值
1. 元素節(jié)點的 nodeValue 是?undefined 或 null
2. 文本節(jié)點的 nodeValue 是文本自身
3. 屬性節(jié)點的 nodeValue 是屬性的值
三、nodeType 屬性:?節(jié)點的類型，是只讀的。以下常用的幾種結(jié)點類型:
元素類型?? ?節(jié)點類型
? 元素 ? ? ? ? ?1
? 屬性 ? ? ? ? ?2
? 文本 ? ? ? ? ?3
? 注釋 ? ? ? ? ?8
? 文檔 ? ? ? ? ?9
代碼示例：
試一試，在<script>的標簽內(nèi)容，獲取所有LI標簽，并輸出相應(yīng)節(jié)點的名稱、節(jié)點的值、節(jié)點的類型。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>節(jié)點屬性</title> 6 </head> 7 <body> 8 <ul> 9 <li>javascript</li> 10 <li>HTML/CSS</li> 11 <li>jQuery</li> 12 </ul> 13 <script type="text/javascript"> 14 var liArr=document.getElementsByTagName("li"); 15 for(var i=0;i<liArr.length;i++){ 16 document.write("第"+i+"個節(jié)點的名稱："+liArr[i].nodeName+"<br/>"); 17 document.write("第"+i+"個節(jié)點的值："+liArr[i].nodeValue+"<br/>"); 18 document.write("第"+i+"個節(jié)點的類型："+liArr[i].nodeType+"<br/>"); 19 } 20 21 </script> 22 </body> 23 </html>2.1、 訪問子節(jié)點childNodes
訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes注意：
如果選定的節(jié)點沒有子節(jié)點，則該屬性返回不包含節(jié)點的 NodeList。
我們來看看下面的代碼:
運行結(jié)果:
IE:
UL子節(jié)點個數(shù):3節(jié)點類型:1其它瀏覽器:
UL子節(jié)點個數(shù):7節(jié)點類型:3注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2.?節(jié)點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
UL子節(jié)點個數(shù):3節(jié)點類型:1代碼示例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <div> 9 javascript 10 <p>javascript</p> 11 <div>jQuery</div> 12 <h5>PHP</h5> 13 </div> 14 <script type="text/javascript"> 15 var x=document.getElementsByTagName("div")[0].childNodes; 16 document.write("第一個div的子節(jié)點對應(yīng)的節(jié)點類型分別為：<br/>"); 17 for(var i=0;i<x.length;i++){ 18 document.write(x[i].nodeType+"<br/>"); 19 } 20 </script> 21 </body> 22 </html>2.2、 訪問子節(jié)點的第一項(firstChild)和最后項(lastChild)
一、firstChild?屬性返回‘childNodes’數(shù)組的第一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。
語法：
node.firstChild說明：與elementNode.childNodes[0]是同樣的效果。?
二、?lastChild?屬性返回‘childNodes’數(shù)組的最后一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。
語法：
node.lastChild說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。?
注意:?上一節(jié)中，我們知道Internet Explorer 會忽略節(jié)點之間生成的空白文本節(jié)點，而其它瀏覽器不會。我們可以通過檢測節(jié)點類型，過濾子節(jié)點。?(以后章節(jié)講解)
代碼示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> </head> <body> <!--調(diào)整前--> <!--<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5> </div>--> <!--調(diào)整后--> <div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div> <script type="text/javascript">var x=document.getElementById("con");document.write(x.firstChild.nodeName+"<br/>");document.write(x.lastChild.nodeName+"<br/>"); </script> </body> </html>結(jié)果：
2.3、 訪問父節(jié)點parentNode
獲取指定節(jié)點的父節(jié)點
語法：
elementNode.parentNode注意:父節(jié)點只能有一個。
看看下面的例子,獲取 P 節(jié)點的父節(jié)點，代碼如下:
<div id="text"><p id="con"> parentNode 獲取指點節(jié)點的父節(jié)點</p> </div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.nodeName); </script>運行結(jié)果:
parentNode 獲取指點節(jié)點的父節(jié)點 DIV訪問祖節(jié)點:
elementNode.parentNode.parentNode看看下面的代碼:
<div id="text"> ?<p>parentNode ? ? ?<span id="con"> 獲取指點節(jié)點的父節(jié)點</span></p> </div>? <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.parentNode.nodeName); </script>運行結(jié)果:
parentNode獲取指點節(jié)點的父節(jié)點 DIV注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節(jié)點。
練習：
試一試，通過獲取的mylist節(jié)點，使用訪問父節(jié)點parentNode，將"HTML/CSS"課程內(nèi)容輸出。
補充第30行代碼，將"HTML/CSS"課程內(nèi)容輸出。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <ul id="con"> 9 <li id="lesson1">javascript 10 <ul> 11 <li id="tcon"> 基礎(chǔ)語法</li> 12 <li>流程控制語句</li> 13 <li>函數(shù)</li> 14 <li>事件</li> 15 <li>DOM</li> 16 </ul> 17 </li> 18 <li id="lesson2">das</li> 19 <li id="lesson3">dadf</li> 20 <li id="lesson4">HTML/CSS 21 <ul> 22 <li>文字</li> 23 <li>段落</li> 24 <li>表單</li> 25 <li>表格</li> 26 </ul> 27 </li></ul> 28 <script type="text/javascript"> 29 var mylist = document.getElementById("tcon"); 30 var f=mylist.parentNode.parentNode.parentNode; 31 document.write(f.lastChild.innerHTML); 32 </script> 33 34 </body> 35 </html>結(jié)果：
2.4、 訪問兄弟節(jié)點nextSibling和previousSibling
1.nextSibling屬性可返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.nextSibling說明：如果無此節(jié)點，則該屬性返回 null。
2.previousSibling屬性可返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.previousSibling說明：如果無此節(jié)點，則該屬性返回 null。
注意: 兩個屬性獲取的是節(jié)點。Internet Explorer 會忽略節(jié)點間生成的空白文本節(jié)點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節(jié)點nodeType是否為1, 如是為元素節(jié)點，跳過。
運行結(jié)果:
LI = javascript nextsibling: LI = jquery?示例代碼：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>nextSibling</title> 6 </head> 7 <body> 8 <ul id="u1"> 9 <li id="a">javascript</li> 10 <li id="b">jquery</li> 11 <li id="c">html</li> 12 </ul> 13 <ul id="u2"> 14 <li id="d">css3</li> 15 <li id="e">php</li> 16 <li id="f">java</li> 17 </ul> 18 <script type="text/javascript"> 19 function get_nextSibling(n){ 20 var x=n.nextSibling; 21 while (x && x.nodeType!=1){ 22 x=x.nextSibling; 23 } 24 return x; 25 } 26 27 function get_previousSibling(n){ 28 var z=n.previousSibling; 29 while(z && z.nodeType!=1){ 30 z=z.previousSibling; 31 } 32 return z; 33 } 34 35 var x=document.getElementsByTagName("li")[1]; 36 document.write(x.nodeName); 37 document.write(" = "); 38 document.write(x.innerHTML); 39 40 var y=get_nextSibling(x); 41 42 if(y!=null){ 43 document.write("<br />nextsibling: "); 44 document.write(y.nodeName); 45 document.write(" = "); 46 document.write(y.innerHTML); 47 }else{ 48 document.write("<br>已經(jīng)是最后一個節(jié)點"); 49 } 50 51 var z=get_previousSibling(x); 52 if(z!=null){ 53 document.write("<br/>previousSibling："); 54 document.write(z.nodeName); 55 document.write("="); 56 document.write(z.innerHTML); 57 }else{ 58 document.write("<br>已經(jīng)是第一個節(jié)點"); 59 } 60 61 </script> 62 </body> 63 </html>結(jié)果：
2.5、 插入節(jié)點appendChild()
在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點。
語法:
appendChild(newnode)參數(shù):
newnode：指定追加的節(jié)點。
我們來看看，div標簽內(nèi)創(chuàng)建一個新的 P 標簽，代碼如下:
運行結(jié)果:
HTML JavaScript This is a new p?2.6、 插入節(jié)點insertBefore()
insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。
語法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點。
node: 指定此節(jié)點前插入節(jié)點。
我們在來看看下面代碼，在指定節(jié)點前插入節(jié)點。
運行結(jié)果:
This is a new p JavaScript HTML注意:?otest.insertBefore(newnode,node); 也可以改為:??otest.insertBefore(newnode,otest.childNodes[0]);?
?2.7、 刪除節(jié)點removeChild()
removeChild() 方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功，此方法可返回被刪除的節(jié)點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)參數(shù):
node ：必需，指定需要刪除的節(jié)點。
我們來看看下面代碼，刪除子點。
運行結(jié)果:
HTML 刪除節(jié)點的內(nèi)容: javascript注意:?把刪除的子節(jié)點賦值給 x，這個子節(jié)點不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null?值，代碼如下:
代碼練習：
試一試，定義clearText()函數(shù)，完成節(jié)點內(nèi)容的刪除。
1. 刪除該節(jié)點的內(nèi)容，先要獲取子節(jié)點。
2. 然后使用循環(huán)遍歷每個子節(jié)點。
3. 使用removeChild()刪除節(jié)點。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 8 <body> 9 <div id="content"> 10 <h1>html</h1> 11 <h1>php</h1> 12 <h1>javascript</h1> 13 <h1>jquery</h1> 14 <h1>java</h1> 15 </div> 16 17 <script type="text/javascript"> 18 function clearText() { 19 var content=document.getElementById("content"); 20 for(var i=content.childNodes.length-1;i>=0;i--){ 21 var childNode = content.childNodes[i]; 22 content.removeChild(childNode); 23 } 24 } 25 </script> 26 27 <button onclick="clearText()">清除節(jié)點內(nèi)容</button> 28 29 30 31 </body> 32 </html>運行結(jié)果：
2.8、 替換元素節(jié)點replaceChild()
replaceChild 實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用。?
語法：
node.replaceChild (newnode,oldnew )參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。?
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
?
效果: 將文檔中的 Java 改為 JavaScript。
注意:?
1.?當 oldnode 被替換時，所有與之相關(guān)的屬性內(nèi)容都將被移除。?
2. newnode 必須先被建立。?
代碼練習：
試一試，補充函數(shù)?replaceMessage() 代碼，實現(xiàn)將 b 標簽替換成 i 標簽。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 9 10 <div><b id="oldnode">JavaScript</b>是一個很常用的技術(shù)，為網(wǎng)頁添加動態(tài)效果。</div> 11 <a href="javascript:replaceMessage()"> 將加粗改為斜體</a> 12 13 <script type="text/javascript"> 14 function replaceMessage(){ 15 var newnode=document.createElement("i"); 16 var oldnode=document.getElementById("oldnode"); 17 var oldHTML=oldnode.innerHTML; 18 oldnode.parentNode.replaceChild(newnode,oldnode); 19 newnode.innerHTML=oldnode.innerHTML; 20 } 21 </script> 22 23 </body> 24 </html>運行結(jié)果：
2.9、 創(chuàng)建元素節(jié)點createElement
createElement()方法可創(chuàng)建元素節(jié)點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)參數(shù):
tagName：字符串值，這個字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
我們來創(chuàng)建一個按鈕，代碼如下：
<script type="text/javascript">var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "創(chuàng)建一個按鈕"; body.appendChild(input); </script>效果：在HTML文檔中，創(chuàng)建一個按鈕。
我們也可以使用setAttribute來設(shè)置屬性，代碼如下：
<script type="text/javascript"> var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert('This is a text!');"); body.appendChild(btn); </script>效果：在HTML文檔中，創(chuàng)建一個文本框，使用setAttribute設(shè)置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。
?代碼練習：
試一試，實現(xiàn)在HTML文檔中創(chuàng)建一個鏈接，并設(shè)置相應(yīng)屬性。
1. 在右邊編輯器補充代碼，完善createa(url,text)創(chuàng)建鏈接函數(shù)，參數(shù)1為鏈接地址，參數(shù)2為鏈接文本。函數(shù)中添加鏈接地址、文本、文字顏色屬性。
2. 調(diào)用createa函數(shù)，鏈接地址 http://www.imooc.com，文本為:慕課網(wǎng)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var main = document.body; 10 //創(chuàng)建鏈接 11 function createa(url,text) 12 { 13 var a=document.createElement("a"); 14 // a.setAttribute("href",url); 15 a.href = url; 16 a.innerHTML=text; 17 a.style.color="red"; 18 main.appendChild(a); 19 } 20 // 調(diào)用函數(shù)創(chuàng)建鏈接 21 createa("http://www.imooc.com","慕課網(wǎng)"); 22 23 </script> 24 </body> 25 </html>運行結(jié)果：
2.10、 創(chuàng)建文本節(jié)點createTextNode()
createTextNode() 方法創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的 Text 節(jié)點。
語法：
document.createTextNode(data)參數(shù)：
data :?字符串值，可規(guī)定此節(jié)點的文本。
我們來創(chuàng)建一個<div>元素并向其中添加一條消息，代碼如下：
運行結(jié)果:
3、 瀏覽器
3.1、 瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
?? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
?? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
?? document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
?? document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標簽
?? document.body.clientHeight
?? document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth|| document.body.clientWidth; var h= document.documentElement.clientHeight|| document.body.clientHeight;?3.2、 網(wǎng)頁尺寸：scrollHeight、scrollWidth
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth|| document.body.scrollWidth; var h=document.documentElement.scrollHeight|| document.body.scrollHeight;注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實際占用的高度和寬度。
3.3、 網(wǎng)頁尺寸offsetHeight、offsetWidth
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth|| document.body.offsetWidth; var h= document.documentElement.offsetHeight|| document.body.offsetHeight;3.4、 網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離?，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離?，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標的計算左側(cè)位置?。
offsetTop:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標的計算頂端位置 。
注意:
1. 區(qū)分大小寫
2.?offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點開始，一層層向上找，直到HTML的body。
示例代碼：
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <script type="text/javascript"> 5 function req(){ 6 var div = document.getElementById("div1"); 7 document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離 8 document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離 9 document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動條滾動的距離 10 document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動條滾動的距離 11 } 12 </script> 13 </head> 14 <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"> 15 <div style="width:60%;border-right:1px dashed red;float:left;"> 16 <div style="float:left;"> 17 <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto"> 18 <div style="height:500px;width:400px">請調(diào)整橫豎滾動條后，點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div> 19 </div> 20 <input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/> 21 </div> 22 23 </div> 24 <div style="width:30%;float:left;"> 25 <ul style="list-style-type: none; line-height:30px;">結(jié)果： 26 <li>offsetTop : <span id="li1"></span></li> 27 <li>offsetLeft : <span id="li2"></span></li> 28 <li> scrollTop : <span id="li3"></span></li> 29 <li>scrollLeft : <span id="li4"></span></li> 30 </ul> 31 32 </div> 33 <div style="clear:both;"></div> 34 </body> 35 </html>演示：調(diào)整橫豎滾動條后，點擊按鈕后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的變化。
?三、編程練習
制作一個表格，顯示班級的學生信息。
要求：
1. 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復(fù)為原背景色 #fff
2. 點擊添加按鈕，能動態(tài)在最后添加一行
3. 點擊刪除按鈕，則刪除當前行
分析：
第一步： 首先，我們創(chuàng)建刪除函數(shù)，并在刪除按鈕上添加點擊事件；
提示: 使用removeChild()。第二步： 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；
提示: 使用createElement()、innerHTML、appendChild()。第三步： 更改鼠標移動改變背景則可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
提示: 1. 獲取表格的行，getElementsByTagName 。 2. 使用for進行循環(huán)，為每行添加事件及背景顏色設(shè)置。代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> new document </title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 Highlight(); 9 } 10 function addOne(obj){ 11 var tbody = document.getElementById('table').lastChild; 12 var tr = document.createElement('tr'); 13 14 var td = document.createElement("td"); 15 td.innerHTML = "<input type='text'/>"; 16 tr.appendChild(td); 17 18 td = document.createElement("td"); 19 td.innerHTML = "<input type='text'/>"; 20 tr.appendChild(td); 21 22 td = document.createElement("td"); 23 td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>刪除</a>"; 24 tr.appendChild(td); 25 26 tbody.appendChild(tr); 27 Highlight(); 28 } 29 30 function deleteRow(obj){ 31 var tbody = document.getElementById('table').lastChild; 32 var tr = obj.parentNode.parentNode; 33 tbody.removeChild(tr); 34 } 35 function Highlight(){ 36 var tbody = document.getElementById('table').lastChild; 37 trs = tbody.getElementsByTagName('tr'); 38 for(var i =1;i<trs.length;i++){ 39 trs[i].onmouseover = function(){ 40 this.style.backgroundColor ="#f2f2f2"; 41 } 42 trs[i].onmouseout = function(){ 43 this.style.backgroundColor ="#fff"; 44 } 45 } 46 } 47 48 </script> 49 </head> 50 <body> 51 <table border="1" width="50%" id="table"> 52 <tr> 53 <th>學號</th> 54 <th>姓名</th> 55 <th>操作</th> 56 </tr> 57 58 <tr> 59 <td>xh001</td> 60 <td>王小明</td> 61 <td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td> 62 </tr> 63 64 <tr> 65 <td>xh002</td> 66 <td>劉小芳</td> 67 <td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td> 68 </tr> 69 70 </table> 71 <input type="button" value="添加一行" onclick="addOne()" /> 72 </body> 73 </html>運行結(jié)果：
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Qian123/p/5217059.html
總結(jié)
以上是生活随笔為你收集整理的6、JavaScript进阶篇③——浏览器对象、Dom对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA Web day02--- An
- 下一篇： bzoj 2186: [Sdoi2008