第1章 認識JS
JavaScript能做什么？
1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)
2.實現頁面與用戶之間的實時、動態交互(如:用戶注冊、登陸驗證等)
第2章 JS基礎語法
操作符之間的優先級（高到低）:
算術操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號
如果同級的運算是按從左到右次序進行,多層括號由里向外。
第3章 數組
3-1 什么是數組
數組是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值。
3-2 如何創建數組
創建數組語法：
var myarray=new Array();
我們創建數組的同時，還可以為數組指定長度，長度可任意指定。
var myarray= new Array(8); //創建數組，存儲8個數據。注意：
1.創建的新數組是空數組，沒有值，如輸出，則顯示undefined。
2.雖然創建數組時，指定了長度，但實際上數組都是變長的，也就是說即使指定了長度為8，仍然可以將元素存儲在規定長度以外。
3-3 數組賦值
數組的表達方式：
第一步：創建數組var myarr=new Array();
第二步：給數組賦值
myarr[2]=" 李四";```
下面創建一個數組，用于存儲5個人的數學成績。
var myarray=new Array(); //創建一個新的空數組
myarray[0]=66; //存儲第1個人的成績
myarray[1]=80; //存儲第2個人的成績
myarray[2]=90; //存儲第3個人的成績
myarray[3]=77; //存儲第4個人的成績
myarray[4]=59; //存儲第5個人的成績
**注意：**數組每個值有一個索引號，從0開始。
我們還可以用簡單的方法創建上面的數組和賦值：
第一種方法：
`var myarray = new Array(66,80,90,77,59);//創建數組同時賦值`
第二種方法：
`var myarray = [66,80,90,77,59];//直接輸入一個數組（稱 “字面量數組”）`
**注意：**數組存儲的數據可以是任何類型（數字、字符、布爾值等）
###3-4 向數組中添加一個新元素
只需使用下一個未用的索引，任何時刻可以不斷向數組增加新元素。
`myarray[5]=88; //使用一個新索引，為數組增加一個新元素`
###3-5 使用數組元素
要得到一個數組元素的值，只需引用數組變量并提供一個索引，如：
**第一個人的成績表示方法：**myarray[0]
**第三個人的成績表示方法：** myarray[2]
###3-6 數組屬性length
**語法：**
`myarray.length; //獲得數組myarray的長度`
**注意：**因為數組的索引總是由0開始，所以一個數組的上下限分別是：0和length-1。如數組的長度是5，數組的上下限分別是0和4。
var arr=[55,32,5,90,60,98,76,54];//包含8個數值的數組arr
document.write(arr.length); //顯示數組長度8
document.write(arr[7]); //顯示第8個元素的值54
同時，JavaScript數組的length屬性是可變的，這一點需要特別注意。
arr.length=10; //增大數組的長度
document.write(arr.length); //數組長度已經變為10
數組隨元素的增加，長度也會改變，如下:
var arr=[98,76,54,56,76]; // 包含5個數值的數組
document.write(arr.length); //顯示數組的長度5
arr[15]=34; //增加元素，使用索引為15,賦值為34
alert(arr.length); //顯示數組的長度16
###3-7 二維數組
1. 二維數組的定義方法一
var myarr=new Array(); //先聲明一維
for(var i=0;i<2;i++){ //一維長度為2
myarr[i]=new Array(); //再聲明二維
for(var j=0;j<3;j++){ //二維長度為3
myarr[i][j]=i+j; // 賦值，每個數組元素的值為i+j
}
}
2. 二維數組的定義方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 賦值
myarr[0][1]=5; //將5的值傳入到數組中，覆蓋原有值。```
說明: myarr[0][1] ,0 表示表的行，1表示表的列。
第4章 流程控制語句
4-1 if語句
if語句是基于條件成立才執行相應代碼時使用的語句。
語法:
if(條件)
{ 條件成立時執行代碼}
假設你應聘web前端技術開發崗位，如果你會HTML技術，你面試成功，歡迎加入公司。代碼表示如下:
var mycarrer = "HTML";
if (mycarrer == "HTML")
{
document.write("你面試成功，歡迎加入公司。");
}
</script>```
###4-2 if...else語句
語法:
if(條件)
{ 條件成立時執行的代碼}
else
{條件不成立時執行的代碼}
假設你應聘web前端技術開發崗位，如果你會HTML技術，你面試成功，歡迎加入公司，否則你面試不成功，不能加入公司。
代碼表示如下:
```<script type="text/javascript">
var mycarrer = "HTML"; //mycarrer變量存儲技能
if (mycarrer == "HTML")
{ document.write("你面試成功，歡迎加入公司。"); }
else //否則，技能不是HTML
{ document.write("你面試不成功，不能加入公司。");}
</script>```
###4-3 多重判斷（if..else嵌套語句）
語法:
if(條件1)
{ 條件1成立時執行的代碼}
else if(條件2)
{ 條件2成立時執行的代碼}
...
else if(條件n)
{ 條件n成立時執行的代碼}
else
{ 條件1、2至n不成立時執行的代碼}
###4-4 多種選擇（Switch語句)
當有很多種選項的時候，switch比if else使用更方便。
語法:
```switch(表達式)
{
case值1:
執行代碼塊 1
break;
case值2:
執行代碼塊 2
break;
...
case值n:
執行代碼塊 n
break;
default:
與 case值1 、 case值2...case值n 不同時執行的代碼
}```
語法說明:
Switch必須賦初始值，值與每個case值匹配。滿足執行該 case 后的所有語句，并用break語句來阻止運行下一個case。如所有case值都不匹配，執行default后的語句。
###4-5 重復重復（for循環）
for語句結構：
for(初始化變量;循環條件;循環迭代)
{
循環語句
}```
假如，一個盒子里有6個球，我們每次取一個，重復從盒中取出球，直到球取完為止。
var num=1;
for (num=1;num<=6;num++) //初始化值；循環條件；循環后條件值更新
{ document.write("取出第"+num+"個球<br />");
}
</script>```
###4-6 反反復復(while循環)
while語句結構：
while(判斷條件)
{
循環語句
}```
使用while循環，完成從盒子里取球的動作，每次取一個，共6個球。
var num=0; //初始化值
while (num<=6) //條件判斷
{
document.write("取出第"+num+"個球<br />");
num=num+1; //條件值更新
}
</script>```
###4-7 來來回回(Do...while循環)
do while結構的基本原理和while結構是基本相同的，但是它保證循環體至少被執行一次。因為它是先執行代碼，后判斷條件，如果條件為真，繼續循環。
do...while語句結構：
```do
{
循環語句
}
while(判斷條件)```
我們試著輸出5個數字。
```<script type="text/javascript">
num= 1;
do
{
document.write("數值為:" + num+"<br />");
num++; //更新條件
}
while (num<=5)
</script>```
###4-8 退出循環break
在while、for、do...while、while循環中使用break語句退出當前循環，直接執行后面的代碼。
格式如下：
for(初始條件;判斷條件;循環后條件值更新)
{
if(特殊情況)
{break;}
循環代碼
}```
4-9 繼續循環continue
continue的作用是僅僅跳過本次循環，而整個循環體繼續執行。
語句結構：
for(初始條件;判斷條件;循環后條件值更新){
if(特殊情況) { continue; } 循環代碼
}```
上面的循環中，當特殊情況發生的時候，本次循環將被跳過，而后續的循環則不會受到影響。好比輸出10個數字，如果數字為5就不輸出了。
[](http://img.mukewang.com/52dc89270001212905110297.jpg)
**執行結果:**
**[](http://img.mukewang.com/52dc88e800017b8d03700342.jpg)**
##第5章 函數
###5-1 什么是函數
函數的作用，可以寫一次代碼，然后反復地重用這個代碼。
使用函數完成:
```function add2(a,b){
sum = a + b;
alert(sum);
} // 只需寫一次就可以
add2(3,2);
add2(7,8);
//只需調用函數就可以```
###5-2 定義函數
function 函數名( )
{
函數體;
}
function定義函數的關鍵字，“函數名”你為函數取的名字，“函數體”替換為完成特定功能的代碼。
###5-3 函數調用
函數定義好后，是不能自動執行的，需要調用它,直接在需要的位置寫函數名。
第一種情況:在<script>標簽內調用。
``` <script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//調用函數，直接寫函數名。
</SCRIPT>```
第二種情況:在HTML文件中調用，如通過點擊按鈕后調用定義好的函數。
```<html>
<head>
<script type="text/javascript">
function add2()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按鈕,onclick點擊事件，直接寫函數名
</form>
</body>
</html>```
###5-4 有參數的函數
function 函數名(參數1,參數2)
{
函數代碼
}
注意:參數可以多個，根據需要增減參數個數。參數之間用(逗號，）隔開。
按照這個格式，函數實現任意兩個數的和應該寫成：
```function add2(x,y)
{
sum = x + y;
document.write(sum);
}```
x和y則是函數的兩個參數，調用函數的時候，我們可通過這兩個參數把兩個實際的加數傳遞給函數了
###5-5 返回值的函數
思考:上一節函數中，通過"document.write"把結果輸出來，如果想對函數的結果進行處理怎么辦呢？
我們只要把"document.write(sum)"這行改成如下代碼：
```function add2(x,y)
{
sum = x + y;
return sum; //返回函數值,return后面的值叫做返回值。
}```
還可以通過變量存儲調用函數的返回值，代碼如下:
```result = add2(3,4);//語句執行后,result變量中的值為7。```
注意:函數中參數和返回值不只是數字，還可以是字符串等其它類型。
##第6章 事件響應，網頁交互
###6-1 什么是事件
JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。
比如說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。
**主要事件表:**
[](http://img.mukewang.com/53e198540001b66404860353.jpg)
###6-2 鼠標單擊事件( onclick ）
onclick是鼠標單擊事件，當在網頁上單擊鼠標時，就會發生該事件。同時onclick事件調用的程序塊就會被執行，通常與按鈕一起使用。
比如，我們單擊按鈕時，觸發 onclick 事件，并調用兩個數和的函數add2()。代碼如下：
```<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("兩數和為:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="點擊提交" onclick="add2()" />
</form>
</body>
</html>```
注意: 在網頁中，如使用事件，就在該元素中設置事件屬性。
###6-3 鼠標經過事件（onmouseover）
鼠標經過事件，當鼠標移到一個對象上時，該對象就觸發onmouseover事件，并執行onmouseover事件調用的程序。
現實鼠標經過"確定"按鈕時，觸發onmouseover事件，調用函數info()，彈出消息框，代碼如下:
[](http://img.mukewang.com/53e196e500013f1807700354.jpg)
**運行結果:**
###6-4 鼠標移開事件（onmouseout）
鼠標移開事件，當鼠標移開當前對象時，執行onmouseout調用的程序。
當把鼠標移動到"登錄"按鈕上，然后再移開時，觸發onmouseout事件，調用函數message()，代碼如下:
[](http://img.mukewang.com/53e195580001a0bc07730356.jpg)
**運行結果:**
[](http://img.mukewang.com/53e195bf00010d1804760385.jpg)
###6-5 光標聚焦事件（onfocus）
當網頁中的對象獲得聚點時，執行onfocus調用的程序就會被執行。
如下代碼, 當將光標移到文本框內時，即焦點在文本框內，觸發onfocus 事件，并調用函數message()。
[](http://img.mukewang.com/53e19337000113d108390338.jpg)
**運行結果：**
[](http://img.mukewang.com/5312c5660001821a04300326.jpg)
###6-6 失焦事件（onblur）
onblur事件與onfocus是相對事件，當光標離開當前獲得聚焦對象的時候，觸發onblur事件，同時執行被調用的程序。
如下代碼, 網頁中有用戶和密碼兩個文本框。當前光標在用戶文本框內時（即焦點在文本框），在光標離開該文本框后（即失焦時），觸發onblur事件，并調用函數message()。
[](http://img.mukewang.com/53e191d00001dfe508560326.jpg)
**運行結果：**
**[](http://img.mukewang.com/5312da710001968704410319.jpg)**
###6-7 內容選中事件（onselect）
選中事件，當文本框或者文本域中的文字被選中時，觸發onselect事件，同時調用的程序就會被執行。
如下代碼,當選中用戶文本框內的文字時，觸發onselect 事件，并調用函數message()。
[](http://img.mukewang.com/53e190b70001ffa908560325.jpg)
**運行結果：**
**[](http://img.mukewang.com/5312d7ba00013fff03950319.jpg)**
###6-8 文本框內容改變事件（onchange）
通過改變文本框的內容來觸發onchange事件，同時執行被調用的程序。
如下代碼,當用戶將文本框內的文字改變后，彈出對話框“您改變了文本內容！”。
[](http://img.mukewang.com/5312d59c00011cd311490444.jpg)
**運行結果：**
**[](http://img.mukewang.com/5312d5c600012c3703960319.jpg)**
###6-9 加載事件（onload）
事件會在頁面加載完成后，立即發生，同時執行被調用的程序。
注意：1.加載頁面時，觸發onload事件，事件寫在<body>標簽內。
2 此節的加載頁面，可理解為打開一個新頁面時。如下代碼,當加載一個新頁面時，彈出對話框“加載中，請稍等…”。
[](http://img.mukewang.com/5312e3c10001bd9908920372.jpg)
**運行結果：**
**[](http://img.mukewang.com/5312e3eb0001e8a103930318.jpg)**
###6-10 卸載事件（onunload）
當用戶退出頁面時（頁面關閉、頁面刷新等），觸發onUnload事件，同時執行被調用的程序。
**注意：不同瀏覽器對onunload事件支持不同。**
如下代碼,當退出頁面時，彈出對話框“您確定離開該網頁嗎？”。
[](http://img.mukewang.com/5312ee6b0001f89408950418.jpg)
**運行結果：（IE瀏覽器）**
[](http://img.mukewang.com/546470c90001583205460464.jpg)
##第7章 javascript內置對象
###7-1 什么是對象
JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。
對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；
對象的方法：能夠在對象上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；
JavaScript 提供多個內建對象，比如 String、Date、Array 等等，使用對象前先定義，如下使用數組對象：
``` var objectName =new Array();//使用new關鍵字定義對象
或者
var objectName =[];```
訪問對象屬性的語法:
objectName.propertyName```
如使用 Array 對象的 length 屬性來獲得數組的長度：
var myl=myarray.length;//訪問數組長度length屬性```
以上代碼執行后，myl的值將是：6
訪問對象的方法：
objectName.methodName()```
如使用string 對象的 toUpperCase() 方法來將文本轉換為大寫：
var request=mystr.toUpperCase(); //使用字符串對象方法```
以上代碼執行后，request的值是：HELLO WORLD!
###7-2 Date 日期對象
日期對象可以儲存任意一個日期，并且可以精確到毫秒數（1/1000 秒）。
定義一個時間對象 :
```var Udate=new Date();```
**注意**:**使用關鍵字new，Date()的首字母必須大寫。
使 Udate 成為日期對象，并且已有初始值：**當前時間(當前電腦系統時間)**。
如果要自定義初始值，可以用以下方法：
```var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日```
我們最好使用下面介紹的“方法”來嚴格定義時間。
**訪問方法語法：**“<日期對象>.<方法>”
Date對象中處理時間和日期的常用方法：
[](http://img.mukewang.com/555c650d0001ae7b04180297.jpg)
###7-3 返回/設置年份方法
```get/setFullYear() 返回/設置年份，用四位數表示。```
```var mydate=new Date();//當前時間2014年3月6日
document.write(mydate+"<br>");//輸出當前時間
document.write(mydate.getFullYear()+"<br>");//輸出當前年份
mydate.setFullYear(81); //設置年份
document.write(mydate+"<br>"); //輸出年份被設定為 0081年。```
注意:不同瀏覽器， mydate.setFullYear(81)結果不同，年份被設定為 0081或81兩種情況。
結果:
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800
注意:
1結果格式依次為：星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)
2不同瀏覽器，時間格式有差異。
###7-4 返回星期方法
getDay() 返回星期，返回的是0-6的數字，0 表示星期天。如果要返回相對應“星期”，通過數組完成，代碼如下:
```<script type="text/javascript">
var mydate=new Date();//定義日期對象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數組對象,給每個數組項賦值
var mynum=mydate.getDay();//返回值存儲在變量mynum中
document.write(mydate.getDay());//輸出getDay()獲取值
document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>```
注意：以上代碼是在2014年3月7日，星期五運行。
結果:
5
今天是：星期五
###7-5 返回/設置時間方法
get/setTime() 返回/設置時間，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。
如果將目前日期對象的時間推遲1小時，代碼如下:
```<script type="text/javascript">
var mydate=new Date();
document.write("當前時間："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推遲一小時時間：" + mydate);
</script>```
結果:
當前時間：Thu Mar 6 11:46:27 UTC+0800 2014
推遲一小時時間：Thu Mar 6 12:46:27 UTC+0800 2014
注意:1. 一小時 60 分，一分 60 秒，一秒 1000 毫秒
2. 時間推遲 1 小時,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
###7-6 String 字符串對象
在之前的學習中已經使用字符串對象了，定義字符串的方法就是直接賦值。比如：
```var mystr = "I love JavaScript!"```
定義mystr字符串后，我們就可以訪問它的屬性和方法。
訪問字符串對象的屬性length:
```stringObject.length; 返回該字符串的長度。
var mystr="Hello World!";
var myl=mystr.length;```
以上代碼執行后，myl 的值將是：12
訪問字符串對象的方法：
使用 String 對象的 toUpperCase() 方法來將字符串小寫字母轉換為大寫：
```var mystr="Hello world!";
var mynum=mystr.toUpperCase();```
以上代碼執行后，mynum 的值是：HELLO WORLD!
###7-7 返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
**語法:**
stringObject.charAt(index)
**參數說明：**
[](http://img.mukewang.com/53251a310001cf1e03370092.jpg)
**注意**：**1.字符串中第一個字符的下標是 0。最后一個字符的下標為字符串長度減一（string.length-1）。
2.如果參數 index 不在 0 與 string.length-1 之間，該方法將返回一個空字符串。
**如:**在字符串 "I love JavaScript!" 中，返回位置2的字符：
```<script type="text/javascript"> var mystr="I love JavaScript!" document.write(mystr.charAt(2));
</script>```
**注意：**一個空格也算一個字符。
以上代碼的運行結果：
l
###7-8 返回指定的字符串首次出現的位置
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
**語法**
stringObject.indexOf(substring, startpos)
**參數說明：**
[](http://img.mukewang.com/53853d4200019feb04920149.jpg)**說明：**
1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。
2.可選參數，從stringObject的startpos位置開始查找substring，如果沒有此參數將從stringObject的開始位置查找。
3.如果找到一個 substring，則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。
**注意：**1.indexOf() 方法區分大小寫。
2.如果要檢索的字符串值沒有出現，則該方法返回 -1。
例如: 對 "I love JavaScript!" 字符串內進行不同的檢索：
```<script type="text/javascript"> var str="I love JavaScript!" document.write(str.indexOf("I") + "<br />"); document.write(str.indexOf("v") + "<br />"); document.write(str.indexOf("v",8));</script>```
以上代碼的輸出：
0
4
9```
7-9 字符串分割split()
知識講解：
split() 方法將字符串分割為字符串數組，并返回此數組。
語法：
stringObject.split(separator,limit)
參數說明:
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。
我們將按照不同的方式來分割字符串：
使用指定符號分割字符串，代碼如下:
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");```
**運行結果:**
www,imooc,com
www,imooc
將字符串分割為字符，代碼如下：
document.write(mystr.split("")+"
");
document.write(mystr.split("", 5));```
運行結果:
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i
7-10 提取字符串substring()
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
語法:
stringObject.substring(startPos,stopPos)
參數說明:
注意：
- 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符，其長度為 stop 減start。
- 如果參數 start 與 stop 相等，那么該方法返回的就是一個空串（即長度為 0 的字符串）。
- 如果 start 比 stop 大，那么該方法在提取子串之前會先交換這兩個參數。
使用 substring() 從字符串中提取字符串，代碼如下：
var mystr="I love JavaScript";
document.write(mystr.substring(7)); document.write(mystr.substring(2,6));
</script>```
**運行結果****:**
JavaScript
love
###7-11 提取指定數目的字符substr()
substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。
**語法:**
stringObject.substr(startPos,length)
**參數說明:**
[](http://img.mukewang.com/532bf2e00001105305100098.jpg)
**注意：**
如果參數startPos是負數，從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。
如果startPos為負數且絕對值大于字符串長度，startPos為0。
使用 substr() 從字符串中提取一些字符，代碼如下：
```<script type="text/javascript">
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
</script>```
**運行結果：**
JavaScript!
love
###7-12 Math對象
Math對象，提供對數據的數學計算。
使用 Math 的屬性和方法，代碼如下：
<script type="text/javascript">
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
</script>```
運行結果
3.14159265358979315
注意：Math 對象是一個固有的對象，無需創建它，直接把 Math 作為對象使用就可以調用其所有屬性和方法。這是它與Date,String對象的區別。
Math 對象屬性
7-13 向上取整ceil()
ceil() 方法可對一個數進行向上取整。
語法:
Math.ceil(x)
參數說明:
注意：它返回的是大于或等于x，并且與x最接近的整數。
我們將把 ceil() 方法運用到不同的數字上，代碼如下：
document.write(Math.ceil(0.8) + "<br />")
document.write(Math.ceil(6.3) + "<br />")
document.write(Math.ceil(5) + "<br />")
document.write(Math.ceil(3.5) + "<br />")
document.write(Math.ceil(-5.1) + "<br />")
document.write(Math.ceil(-5.9))
</script>```
**運行結果：**
1
7
5
4
-5
-5
###7-14 向下取整floor()
floor() 方法可對一個數進行向下取整。
**語法:**
Math.floor(x)
**參數說明：**
[](http://img.mukewang.com/532fe8e00001e4e605230063.jpg)
**注意：**返回的是小于或等于x，并且與 x 最接近的整數。
我們將在不同的數字上使用 floor() 方法，代碼如下:
```<script type="text/javascript">
document.write(Math.floor(0.8)+ "<br>")
document.write(Math.floor(6.3)+ "<br>")
document.write(Math.floor(5)+ "<br>")
document.write(Math.floor(3.5)+ "<br>")
document.write(Math.floor(-5.1)+ "<br>")
document.write(Math.floor(-5.9))
</script>```
**運行結果：**
0
6
5
3
-6
-6
###7-15 四舍五入round()
round() 方法可把一個數字四舍五入為最接近的整數。
**語法:**
Math.round(x)
**參數說明：**
**注意：**
1. 返回與 x 最接近的整數。
2. 對于 0.5，該方法將進行上舍入。(5.5 將舍入為 6)
3. 如果 x 與兩側整數同等接近，則結果接近 +∞方向的數字值 。(如 -5.5 將舍入為 -5; -5.52 將舍入為 -6),如下圖:
[](http://img.mukewang.com/53fc4cc8000169a907530196.jpg)
把不同的數舍入為最接近的整數,代碼如下：
```<script type="text/javascript">
document.write(Math.round(1.6)+ "<br>");
document.write(Math.round(2.5)+ "<br>"); document.write(Math.round(0.49)+ "<br>"); document.write(Math.round(-6.4)+ "<br>"); document.write(Math.round(-6.6));
</script>```
**運行結果：**
2
3
0
-6
-7
###7-16 隨機數 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個隨機數。
語法：
Math.random();
注意：返回一個大于或等于 0 但小于 1 的符號為正的數字值。
我們取得介于 0 到 1 之間的一個隨機數，代碼如下：
```<script type="text/javascript">
document.write(Math.random());
</script>```
運行結果：
0.190305486195328
注意:因為是隨機數，所以每次運行結果不一樣，但是0 ~ 1的數值。
獲得0 ~ 10之間的隨機數，代碼如下:
```<script type="text/javascript">
document.write((Math.random())*10);
</script>```
運行結果：
8.72153625893887
###7-17 Array 數組對象
數組對象是一個對象的集合，里邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”，用來表示它在數組中的位置，是從零開始的
**數組定義的方法：**
1. 定義了一個空數組:
var 數組名= new Array();
2. 定義時指定有n個空元素的數組：
var 數組名 =new Array(n);
3. 定義數組的時候，直接初始化數據：
var 數組名 = [<元素1>, <元素2>, <元素3>...];
我們定義myArray數組，并賦值，**代碼如下：**
var myArray = [2, 8, 6];
**說明：**定義了一個數組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
**數組元素使用：**
數組名[下標] = 值;
**注意**: 數組的下標用方括號括起來，從0開始。
**數組屬性：**
length 用法：<數組對象>.length；返回：數組的長度，即數組里有多少個元素。它等于數組里最后一個元素的下標加一。
**數組方法：**
[](http://img.mukewang.com/533295ab0001dead05190599.jpg)
###7-18 數組連接concat()
concat() 方法用于連接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。
**語法**
arrayObject.concat(array1,array2,...,arrayN)```
參數說明：
**注意: **該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。
我們創建一個數組，將把 concat() 中的參數連接到數組 myarr 中，代碼如下：
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"<br>");
document.write(mya);
</script>```
**運行結果：**
1,2,3,4,51,2,3
我們創建了三個數組，然后使用 concat() 把它們連接起來，代碼如下：
```<script type="text/javascript">
var mya1= new Array("hello!")
var mya2= new Array("I","love");
var mya3= new Array("JavaScript","!");
var mya4=mya1.concat(mya2,mya3);
document.write(mya4);
</script>```
**運行結果：**
hello!,I,love,JavaScript,!
###7-19 指定分隔符連接數組元素join()
join()方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
**語法：**
arrayObject.join(分隔符)
**參數說明:**
注意：返回一個字符串，該字符串把數組中的各個元素串起來，用<分隔符>置于元素與元素之間。這個方法不影響數組原本的內容。 我們使用join（）方法，將數組的所有元素放入一個字符串中，代碼如下：
<script type="text/javascript">
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
</script>```
運行結果：
I,love,JavaScript
我們將使用分隔符來分隔數組中的元素，代碼如下：
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
</script>```
**運行結果：**
I.love.JavaScript
###7-20 顛倒數組元素順序reverse()
reverse() 方法用于顛倒數組中元素的順序。
語法：
arrayObject.reverse()
注意：該方法會改變原來的數組，而不會創建新的數組。
定義數組myarr并賦值，然后顛倒其元素的順序：
```<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "<br />")
document.write(myarr.reverse())
</script>```
運行結果：
1,2,3
3,2,1
###7-21 選定元素slice()
slice() 方法可從已有的數組中返回選定的元素。
**語法**
arrayObject.slice(start,end)
**參數說明：**
[](http://img.mukewang.com/533299680001637b05160145.jpg)
1. 返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
2. 該方法并不會修改數組，而是返回一個子數組。
**注意：**
1.可使用負值從數組的尾部選取元素。
2.如果 end 未被規定，那么 slice() 方法會選取從 start 到數組結尾的所有元素。
3.String.slice() 與 Array.slice() 相似。
我們將創建一個新數組，然后從其中選取的元素，代碼如下：
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "
");
document.write(myarr.slice(2,4) + "
");
document.write(myarr);
</script>```
運行結果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
7-22 數組排序sort()
sort()方法使數組中的元素按照一定的順序排列。
語法:
arrayObject.sort(方法函數)
參數說明：
1.如果不指定<方法函數>，則按unicode碼順序排列。
2.如果指定<方法函數>，則按<方法函數>所指定的排序方法排序。
myArray.sort(sortMethod);
**注意: **該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
若返回值<=-1，則表示 A 在排序后的序列中出現在 B 之前。 若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。 若返回值>=1，則表示 A 在排序后的序列中出現在 B 之后。
1.使用sort()將數組進行排序，代碼如下：
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1"); document.write(myarr1.sort()+"<br>");
document.write(myarr2.sort());
</script>```
**運行結果：**
Hello,JavaScript,John,love
1,100,16,50,6,80
**注意:上面的代碼沒有按照數值的大小對數字進行排序。**
**2.如要實現這一點，就必須使用一個排序函數，代碼如下：**
```<script type="text/javascript">
function sortNum(a,b) {
return a - b; //升序，如降序，把“a - b”該成“b - a”
}
var myarr = new Array("80","16","50","6","100","1"); document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>```
**運行結果：**
80,16,50,6,100,11,6,16,50,80,100
##第8章 瀏覽器對象
###8-1 window對象
window對象是BOM的核心，window對象指當前的瀏覽器窗口。
**window對象方法:**
**[](http://img.mukewang.com/535483720001a54506670563.jpg)**
**注意:**在JavaScript基礎篇中，已講解了部分屬性，window對象重點講解計時器。
###8-2 JavaScript 計時器
在JavaScript中，我們可以在設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。
**計時器類型：**
一次性計時器：僅在指定的延遲時間之后觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
**計時器方法：**
[](http://img.mukewang.com/56976e1700014fc504090143.jpg)
###8-3 計時器setInterval()
在執行時,從載入頁面后每隔指定的時間執行代碼。
語法:
setInterval(代碼,交互時間);
參數說明：
1. 代碼：要調用的函數或要執行的代碼串。
2. 交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。
調用函數格式(假設有一個clock()函數):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我們設置一個計時器，每隔100毫秒調用clock()函數，并將時間顯示出來，代碼如下:
<!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>```
8-4 取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
語法：
clearInterval(id_of_setInterval)
參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒調用 clock() 函數,并顯示時間。當點擊按鈕時，停止時間,代碼如下:
<!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毫秒調用clock函數，并將返回值賦值給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>```
###8-5 計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執行一次表達式,僅執行一次。
語法:
setTimeout(代碼,延遲時間);
參數說明：
1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
當我們打開網頁3秒后，在彈出一個提示框，代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
當按鈕start被點擊時，setTimeout()調用函數，在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>```
要創建一個運行于無窮循環中的計數器，我們需要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊后，輸入域便從0開始計數。
<!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>```
###8-6 取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:
clearTimeout(id_of_setTimeout)
參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
下面的例子和上節的無窮循環的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：
<!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>```
8-7 History 對象
history對象記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現瀏覽器前進與后退相似導航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯。
語法：
window.history.[屬性|方法]
注意：window可以省略。
History 對象方法
使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：
var HL = window.history.length;
document.write(HL);
</script>```
###8-8 返回前一個瀏覽的頁面
back()方法，加載 history 列表中的前一個 URL。
語法：
window.history.back();
比如，返回前一個瀏覽的頁面，代碼如下：
window.history.back();
注意：等同于點擊瀏覽器的倒退按鈕。
back()相當于go(-1),代碼如下:
window.history.go(-1);
###8-9 返回下一個瀏覽的頁面
forward()方法，加載 history 列表中的下一個 URL。
如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:
window.history.forward();
注意：等價點擊前進按鈕。
forward()相當于go(1),代碼如下:
window.history.go(1);
###8-10 返回瀏覽歷史中的其他頁面
go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。
**語法：**
window.history.go(number);
**參數：**
[](http://img.mukewang.com/5354947e00011a9a06490153.jpg)
瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，**代碼如下：**
window.history.go(-2);
**注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。**
同理，返回當前頁面之后瀏覽過的第三個歷史頁面，**代碼如下：**
window.history.go(3);
###8-11 Location對象
location用于獲取或設置窗體的URL，并且可以用于解析URL。
**語法:**
location.[屬性|方法]
**location對象屬性圖示:**
[](http://img.mukewang.com/53605c5a0001b26909900216.jpg)
**location 對象屬性：**
**[](http://img.mukewang.com/5354b1d00001c4ec06220271.jpg)**
**location 對象方法:**
**[](http://img.mukewang.com/5354b1eb00016a2405170126.jpg)**
###8-12 Navigator對象
Navigator 對象包含有關瀏覽器的信息，通常用于檢測瀏覽器與操作系統的版本。
**對象屬性:**
[](http://img.mukewang.com/5354cff70001428b06880190.jpg)
查看瀏覽器的名稱和版本，**代碼如下:**
```<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>```
###8-13 userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
**語法**
navigator.userAgent
幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。
[](http://img.mukewang.com/535a3a4a0001e03f06870189.jpg)
使用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>"); }```
**運行結果:**
[](http://img.mukewang.com/535dea1e00017b0b06880265.jpg)
###8-14 screen對象
screen對象用于獲取用戶的屏幕信息。
**語法：**
window.screen.屬性
**對象屬性:**
**[](http://img.mukewang.com/5354d2810001a47706210213.jpg)**
###8-15 屏幕分辨率的高和寬
window.screen 對象包含有關用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2.window.screen 對象在編寫時可以不使用 window 這個前綴。
我們來獲取屏幕的高和寬，代碼如下:
```<script type="text/javascript">
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
</script>```
###8-16 屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務欄。
注意:
不同系統的任務欄默認高度不一樣，及任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
我們來獲取屏幕的可用高和寬度，代碼如下：
```<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>```
注意:根據屏幕的不同顯示值不同。
##第9章 DOM對象，控制HTML元素
###9-1 認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
**先來看看下面代碼:**
[](http://img.mukewang.com/5375ca640001c67307860420.jpg)
**將HTML代碼分解為DOM節點層次圖:**
[](http://img.mukewang.com/5375ca7e0001dd8d04830279.jpg)
**HTML**文檔可以說由節點構成的集合，DOM節點有:
**1. **元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽。
**2. **文本節點:向用戶展示的內容，如```<li>...</li>```中的JavaScript、DOM、CSS等文本。
**3. **屬性節點:元素屬性，如```<a>```標簽的鏈接屬性。
**節點屬性:**
[](http://img.mukewang.com/5375c953000117ee05240129.jpg)
**遍歷節點樹:**
[](http://img.mukewang.com/53f17a6400017d2905230219.jpg)
**以上圖ul為例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。**
**DOM操作:**
[](http://img.mukewang.com/538d29da000152db05360278.jpg)
**注意:**前兩個是document方法。
###9-2 getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
**語法：**
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
**注意:**
1. 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。
2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
**看看下面的代碼:**
[](http://img.mukewang.com/5375d5ec00012bac06210322.jpg)
**運行結果:**
[](http://img.mukewang.com/53795f0b0001233404580318.jpg)
###9-3 getElementsByTagName()方法
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
**語法:**
document.getElementsByTagName(Tagname)
**說明:**
1. Tagname是標簽的名稱，如p、a、img等標簽名。
2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節點。
[](http://img.mukewang.com/53ec174a0001404206540436.jpg)
###9-4 區別getElementByID,getElementsByName,getElement
**以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。**
1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。
2. Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合。
3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
**把上面的例子轉換到HTML中，如下:**
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
**方法總結如下:**
[](http://img.mukewang.com/5405263300018bcf05760129.jpg)
**注意：**方法區分大小寫
通過下面的例子(6個name="hobby"的復選項，兩個按鈕)來區分三種方法的不同:
```<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")，結果為獲取所有標簽為input的元素，共8個。
2. document.getElementsByName("hobby")，結果為獲取屬性name="hobby"的元素，共6個。
3. document.getElementById("hobby6")，結果為獲取屬性id="hobby6"的元素，只有一個，"跑步"這個復選項。
###9-5 getAttribute()方法
通過元素節點的屬性名稱獲取屬性的值。
**語法：**
elementNode.getAttribute(name)
**說明:**
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
2. name：要想查詢的元素節點的屬性名字
看看下面的代碼，獲取h1標簽的屬性值：
[](http://img.mukewang.com/538d242700019ec809330432.jpg)
**運行結果:**
h1標簽的ID ：alinkh1標簽的title ：getAttribute()獲取標簽的屬值
###9-6 setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。
###9-7 節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
1. nodeName : 節點的名稱
2. nodeValue ：節點的值
3. nodeType ：節點的類型
一、nodeName 屬性: 節點的名稱，是只讀的。
1.元素節點的 nodeName 與標簽名相同
2.屬性節點的 nodeName 是屬性的名稱
3.文本節點的 nodeName 永遠是 #text
4.文檔節點的 nodeName 永遠是 #document
二、nodeValue 屬性：節點的值
1.元素節點的 nodeValue 是 undefined 或 null
2.文本節點的 nodeValue 是文本自身
3.屬性節點的 nodeValue 是屬性的值
三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
元素類型 節點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
###9-8 訪問子節點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
**語法：**
elementNode.childNodes
**注意：**
如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
**我們來看看下面的代碼:**
[](http://img.mukewang.com/538405fa00010e6c05630357.jpg)
**運行結果:**
**IE:**
UL子節點個數:3
節點類型:1
**其它瀏覽器:**
UL子節點個數:7
節點類型:3
**注意:**
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:
[](http://img.mukewang.com/538d2b8a000163e303430127.jpg)
**如果把代碼改成這樣:**
```<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>```
**運行結果:（IE和其它瀏覽器結果是一樣的）**
UL子節點個數:3
節點類型:1
###9-9 訪問子節點的第一和最后項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
###9-10 訪問父節點parentNode
獲取指定節點的父節點
語法：
elementNode.parentNode
注意:父節點只能有一個。
看看下面的例子,獲取 P 節點的父節點，代碼如下:
<div id="text">
<p id="con"> parentNode 獲取指點節點的父節點</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>```
運行結果:
parentNode 獲取指點節點的父節點
DIV
訪問祖節點:
elementNode.parentNode.parentNode
看看下面的代碼:
<div id="text">
<p>
parentNode
<span id="con"> 獲取指點節點的父節點</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>```
運行結果:
parentNode獲取指點節點的父節點
DIV
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。
###9-11 訪問兄弟節點
1. nextSibling 屬性可返回某個節點之后緊跟的節點（處于同一樹層級中）。
**語法：**
nodeObject.nextSibling
**說明：**如果無此節點，則該屬性返回 null。
2. previousSibling 屬性可返回某個節點之前緊跟的節點（處于同一樹層級中）。
**語法：**
nodeObject.previousSibling
**說明：**如果無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
**解決問題方法:**
判斷節點nodeType是否為1, 如是為元素節點，跳過。
[](http://img.mukewang.com/5386e3c80001c25607010856.jpg)
**運行結果:**
LI = javascript
nextsibling:LI = jquery
###9-12 插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
**語法:**
appendChild(newnode)
**參數:**
newnode：指定追加的節點。
我們來看看，div標簽內創建一個新的 P 標簽，代碼如下:
[](http://img.mukewang.com/5398fd020001ad4905890193.jpg)
**運行結果:**
HTML
JavaScript
This is a new p
###9-13 插入節點insertBefore()
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
**語法:**
insertBefore(newnode,node);
**參數:**
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
我們在來看看下面代碼，在指定節點前插入節點。
[](http://img.mukewang.com/5395318100010c6806960431.jpg)
**運行結果:**
This is a new p
JavaScript
HTML
**注意:** otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]); 