一矿瘦、瀏覽器對象
1、 window對象
window對象是BOM的核心，window對象指當前的瀏覽器窗口改橘。
window對象方法:
注意:在JavaScript基礎篇中碌识，已講解了部分屬性，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中，我們可以在設定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計時器類型：
一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次那先。
計時器方法：
2.1、 計時器setInterval()
在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼。
語法:
setInterval(代碼,交互時間);
參數(shù)說明：
- 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串贮泞。
- 交互時間：周期性執(zhí)行或調(diào)用表達式之間的時間間隔饿悬，以毫秒計（1s=1000ms）蝎宇。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設有一個clock()函數(shù)):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我們設置一個計時器熊榛，每隔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>
結果：[圖片上傳失敗...(image-fd1a25-1610981104079)]
2.2谦去、 取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間妆丘。
語法：
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ù)扮碧，并將返回值賦值給i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
2.3赖淤、 計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執(zhí)行一次表達式,僅執(zhí)行一次。
語法:
setTimeout(代碼,延遲時間);
參數(shù)說明：
- 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
- 延時時間：在執(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>
結果：
[圖片上傳失敗...(image-381525-1610981104079)]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>
結果：
[圖片上傳失敗...(image-5bb017-1610981104079)]
3、 History 對象
history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)阶淘，并可以實現(xiàn)瀏覽器前進與后退相似導航的功能衙吩。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口溪窒、每個標簽頁乃至每個框架坤塞，都有自己的history對象與特定的window對象關聯(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用于獲取或設置窗體的URL舶担，并且可以用于解析URL。
語法:
location.[屬性|方法]
location對象屬性圖示:
location 對象屬性：
location 對象方法:
5彬呻、 navigator對象
Navigator 對象包含有關瀏覽器的信息衣陶，通常用于檢測瀏覽器與操作系統(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判斷使用的是什么瀏覽器(假設使用的是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>");
}
運行結果:
6详囤、 screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
window.screen.屬性
對象屬性:
6.1镐作、 屏幕分辨率的高和寬
window.screen 對象包含有關用戶屏幕的信息藏姐。
- screen.height 返回屏幕分辨率的高
- screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
- window.screen 對象在編寫時可以不使用 window 這個前綴该贾。
我們來獲取屏幕的高和寬羔杨，代碼如下:
<script type="text/javascript">
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
</script>
6.2、 屏幕可用高和寬度
- screen.availWidth 屬性返回訪問者屏幕的寬度杨蛋，以像素計兜材，減去界面特性，比如任務欄逞力。
- screen.availHeight 屬性返回訪問者屏幕的高度曙寡，以像素計，減去界面特性寇荧，比如任務欄举庶。
注意:
不同系統(tǒng)的任務欄默認高度不一樣，及任務欄的位置可在屏幕上下左右任何位置揩抡，所以有可能可用寬度和高度不一樣户侥。
我們來獲取屏幕的可用高和寬度，代碼如下：
<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>
注意:根據(jù)屏幕的不同顯示值不同峦嗤。
【編程練習】
制作一個跳轉(zhuǎn)提示頁面：
要求：
- 如果打開該頁面后蕊唐，如果不做任何操作則5秒后自動跳轉(zhuǎn)到一個新的地址，如慕課網(wǎng)主頁寻仗。
- 如果點擊“返回”按鈕則返回前一個頁面刃泌。
效果:
[圖片上傳失敗...(image-6675b4-1610981104080)]
注意: 在窗口中運行該程序時凡壤，該窗口一定要有歷史瀏覽記錄署尤，否則"返回"無效果。
任務：
第一步： 先編寫好網(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.;
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é)點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點層次圖:
HTML文檔可以說由節(jié)點構成的集合母截，DOM節(jié)點有:
- 元素節(jié)點：上圖中<html>到忽、<body>、<p>等都是元素節(jié)點清寇，即標簽喘漏。
- 文本節(jié)點:向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript华烟、DOM翩迈、CSS等文本。
- 屬性節(jié)點:元素屬性盔夜，如<a>標簽的鏈接屬性负饲。
節(jié)點屬性:
遍歷節(jié)點樹:
以上圖ul為例，它的父級節(jié)點body,它的子節(jié)點3個li,它的兄弟結點h2喂链、P绽族。
DOM操作:
注意:前兩個是document方法。
1.1衩藤、 getElementsByName() 方法
返回帶有指定名稱的節(jié)點對象的集合吧慢。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素赏表，而不是通過 id 屬性检诗。
注意:
- 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組瓢剿，而不是一個元素逢慌。
- 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問间狂，從0開始攻泼。
看看下面的代碼:
運行結果:
1.2、 getElementsByTagName() 方法
返回帶有指定標簽名的節(jié)點對象的集合鉴象。返回元素的順序是它們在文檔中的順序忙菠。
語法:
getElementsByTagName(Tagname)
說明:
- Tagname是標簽的名稱，如p纺弊、a牛欢、img等標簽名。
- 和數(shù)組類似也有l(wèi)ength屬性淆游，可以和訪問數(shù)組一樣的方法來訪問傍睹，所以從0開始隔盛。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點拾稳。
試一試吮炕，使用三種獲取節(jié)點的方法，完成下面的任務:
在第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
以人來舉例說明，人有能標識身份的身份證浆兰，有姓名磕仅，有類別(大人、小孩簸呈、老人)等榕订。
- ID 是一個人的身份證號碼，是唯一的蜕便。所以通過getElementById獲取的是指定的一個人劫恒。
- Name 是他的名字，可以重復轿腺。所以通過getElementsByName獲取名字相同的人集合两嘴。
- TagName可看似某類，getElementsByTagName獲取相同類的人集合族壳。如獲取小孩這類人憔辫，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中仿荆，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標簽就像人的類別贰您。
name屬性就像人的姓名。
id屬性就像人的身份證拢操。
方法總結如下:
注意：方法區(qū)分大小寫
通過下面的例子(6個name="hobby"的復選項锦亦，兩個按鈕)來區(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">
- document.getElementsByTagName("input")，結果為獲取所有標簽為input的元素庐冯，共8個孽亲。
- document.getElementsByName("hobby")，結果為獲取屬性name="hobby"的元素展父，共6個返劲。
- document.getElementById("hobby6")，結果為獲取屬性id="hobby6"的元素栖茉，只有一個篮绿，"跑步"這個復選項。
代碼練習：
1.在第27行處補充完整吕漂，實現(xiàn)當點擊"全選"按鈕時亲配，將選中所有的復選項。
?提示:document.getElementsByTagName("input")獲取的是所有input標簽惶凝，包括復選項和按鈕吼虎，所以要判斷是否是復選項，如是選中苍鲜。
2.在第33行處補充完整思灰，實現(xiàn)當點擊"全不選"按鈕時，將取消所有選中的復選項混滔。
3.在第40行處補充完整洒疚，在文本框中輸入輸入1-6數(shù)值，當點擊"確定"按鈕時坯屿，根據(jù)輸入的數(shù)值油湖，通過id選中相應的復選項。
代碼：
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>
結果：
[圖片上傳失敗...(image-7d2e21-1610981104080)]
1.4胞此、 getAttribute()方法
通過元素節(jié)點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
- elementNode：使用getElementById()涉波、getElementsByTagName()等方法今穿，獲取到的元素節(jié)點。
- name：要想查詢的元素節(jié)點的屬性名字
看看下面的代碼怎诫，獲取h1標簽的屬性值：
運行結果:
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)有的屬性設定為指定的值幻妓。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設置的屬性名蹦误。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值肉津。如果不存在具有指定名稱的屬性强胰，該方法將創(chuàng)建一個新屬性。
2.類似于getAttribute()方法妹沙，setAttribute()方法只能通過元素節(jié)點對象調(diào)用的函數(shù)偶洋。
2、 節(jié)點屬性
在文檔對象模型 (DOM) 中距糖，每個節(jié)點都是一個對象玄窝。DOM 節(jié)點有三個重要的屬性 ：
- nodeName : 節(jié)點的名稱
- nodeValue ：節(jié)點的值
- nodeType ：節(jié)點的類型
一牵寺、nodeName 屬性: 節(jié)點的名稱，是只讀的恩脂。
- 元素節(jié)點的 nodeName 與標簽名相同
- 屬性節(jié)點的 nodeName 是屬性的名稱
- 文本節(jié)點的 nodeName 永遠是 #text
- 文檔節(jié)點的 nodeName 永遠是 #document
二帽氓、nodeValue 屬性：節(jié)點的值
- 元素節(jié)點的 nodeValue 是 undefined 或 null
- 文本節(jié)點的 nodeValue 是文本自身
- 屬性節(jié)點的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點的類型俩块，是只讀的黎休。以下常用的幾種結點類型:
| 元素類型 | 節(jié)點類型 |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 6 |
代碼示例：
試一試，在<script>的標簽內(nèi)容玉凯，獲取所有LI標簽势腮，并輸出相應節(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藤树。
我們來看看下面的代碼:
運行結果:
IE:
UL子節(jié)點個數(shù):3
節(jié)點類型:1
其它瀏覽器:
UL子節(jié)點個數(shù):7
節(jié)點類型:3
注意:
- IE全系列、firefox拓萌、chrome岁钓、opera、safari兼容問題
節(jié)點之間的空白符微王，在firefox屡限、chrome、opera炕倘、safari瀏覽器是文本節(jié)點钧大，所以IE是3，其它瀏覽器是7罩旋，如下圖所示:
在這里插入圖片描述
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結果:（IE和其它瀏覽器結果是一樣的）
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é)點對應的節(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>
結果：
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>
運行結果:
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>
運行結果:
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"> 基礎語法</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>
結果：
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é)點活翩，跳過。
運行結果:
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>
結果：
2.5欺矫、 插入節(jié)點appendChild()
在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點纱新。
語法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點。
我們來看看穆趴，div標簽內(nèi)創(chuàng)建一個新的 P 標簽脸爱，代碼如下:
運行結果:
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é)點族檬。
運行結果:
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é)點。
我們來看看下面代碼换怖，刪除子點甩恼。
運行結果:
HTML
刪除節(jié)點的內(nèi)容: javascript
注意: 把刪除的子節(jié)點賦值給 x，這個子節(jié)點不在DOM樹中沉颂，但是還存在內(nèi)存中条摸，可通過 x 操作。
如果要完全刪除對象铸屉，給 x 賦 null 值钉蒲，代碼如下:
代碼練習：
試一試，定義clearText()函數(shù)抬探，完成節(jié)點內(nèi)容的刪除子巾。
- 刪除該節(jié)點的內(nèi)容，先要獲取子節(jié)點小压。
- 然后使用循環(huán)遍歷每個子節(jié)點线梗。
- 使用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>
運行結果：
[圖片上傳失敗...(image-5d60d8-1610981104080)]
2.8怠益、 替換元素節(jié)點replaceChild()
replaceChild 實現(xiàn)子節(jié)點(對象)的替換仪搔。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需蜻牢，用于替換 oldnew 的對象烤咧。
oldnew : 必需，被 newnode 替換的對象抢呆。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript煮嫌。
注意:
- 當 oldnode 被替換時，所有與之相關的屬性內(nèi)容都將被移除抱虐。
- 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>是一個很常用的技術灶轰，為網(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>
運行結果：
[圖片上傳失敗...(image-f5d249-1610981104080)]
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來設置屬性，代碼如下：
<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設置屬性值。 當點擊這個文本框時滚停，會彈出對話框“This is a text!”沃粗。
代碼練習：
試一試，實現(xiàn)在HTML文檔中創(chuàng)建一個鏈接键畴，并設置相應屬性最盅。
- 在右邊編輯器補充代碼，完善createa(url,text)創(chuàng)建鏈接函數(shù)起惕，參數(shù)1為鏈接地址涡贱，參數(shù)2為鏈接文本。函數(shù)中添加鏈接地址惹想、文本问词、文字顏色屬性。
- 調(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>
運行結果：
2.10、 創(chuàng)建文本節(jié)點createTextNode()
createTextNode() 方法創(chuàng)建新的文本節(jié)點锋叨，返回新創(chuàng)建的 Text 節(jié)點垄分。
語法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點的文本娃磺。
我們來創(chuàng)建一個<div>元素并向其中添加一條消息薄湿，代碼如下：
運行結果:
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屬性對應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:設置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 伞芹，即左邊灰色的內(nèi)容忘苛。
scrollTop:設置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 蝉娜，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置 扎唾。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 召川。
注意:
- 區(qū)分大小寫
- offsetParent：布局中設置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;">結果：
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值的變化弄贿。
[圖片上傳失敗...(image-c1af2-1610981104080)]
三、編程練習
制作一個表格矫膨，顯示班級的學生信息差凹。
要求：
- 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復為原背景色 #fff
- 點擊添加按鈕侧馅，能動態(tài)在最后添加一行
- 點擊刪除按鈕危尿，則刪除當前行
分析：
第一步： 首先，我們創(chuàng)建刪除函數(shù)馁痴，并在刪除按鈕上添加點擊事件谊娇；
提示: 使用removeChild()。
第二步： 編寫一個函數(shù)罗晕，供添加按鈕調(diào)用济欢，動態(tài)在表格的最后一行添加子節(jié)點；
提示: 使用createElement()小渊、innerHTML法褥、appendChild()。
第三步： 更改鼠標移動改變背景則可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色酬屉。
提示:
- 獲取表格的行半等，getElementsByTagName 揍愁。
- 使用for進行循環(huán)，為每行添加事件及背景顏色設置杀饵。
代碼：
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:;' onclick='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>
運行結果：
[圖片上傳失敗...(image-bd5949-1610981104080)]
