變量命名、聲明、賦值
1.必須以字母、下劃線或美元符號開頭，后面可以跟字母、下劃線、美元符號和數字。
2.變量名區分大小寫，如:A與a是兩個不同變量。
3.不允許使用JavaScript關鍵字和保留字做變量名。
聲明變量語法: var 變量名;
Var還可以一次聲明多個變量，變量之間用","逗號隔開。注意:變量也可以不聲明，直接使用，但為了規范，需要先聲明，后使用。
我們使用"="號給變量存儲內容，可以把任何東西存儲在變量里，如數值、字符串、布爾值等，例如：
var num1 = 123; // 123是數值
var num2 = "一二三"; //"一二三"是字符串
var num3=true; //布爾值true（真），false(假)
表達式：
表達式是指具有一定的值、用操作符把常數和變量連接起來的代數式。一個表達式可以包含常數或變量。
操作符
算術操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。算術運算符主要用來完成類似加減乘除的工作，在JavaScript中，“+”不只代表加法，還可以連接兩個字符串
自加一，自減一 ( ++和- -)
比較操作符，看看下面例子:
var a = 5;//定義a變量，賦值為5
var b = 9; //定義b變量，賦值為9
document.write (a<b); //a小于b的值嗎? 結果是真(true)
document.write (a>=b); //a大于或等于b的值嗎? 結果是假(false)
document.write (a!=b); //a不等于b的值嗎? 結果是真(true)
document.write (a==b); //a等于b的值嗎? 結果是假(false)
與或非操作符：“&&” “||” “！”
操作符之間的優先級（高到低）:
算術操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號
數組
創建數組語法：
var myarray=new Array();
我們創建數組的同時，還可以為數組指定長度，長度可任意指定。
var myarray= new Array(8); //創建數組，存儲8個數據。
注意：
1.創建的新數組是空數組，沒有值，如輸出，則顯示undefined。
2.雖然創建數組時，指定了長度，但實際上數組都是變長的，也就是說即使指定了長度為8，仍然可以將元素存儲在規定長度以外。
賦值：
第一步：創建數組var myarr=new Array();
第二步：給數組賦值
myarr[1]=" 張三";
myarr[2]=" 李四";
注意：數組每個值有一個索引號，從0開始。
其他方法：
一、var myarray = new Array(66,80,90,77,59);//創建數組同時賦值
二、var myarray = [66,80,90,77,59];//直接輸入一個數組（稱 “字面量數組”）
注意：數組存儲的數據可以是任何類型（數字、字符、布爾值等）
只需使用下一個未用的索引，任何時刻可以不斷向數組增加新元素。
myarray[5]=88; //使用一個新索引，為數組增加一個新元素
數組中的每個值有一個索引號，從0開始,可按需取出：第一個人的成績表示方法：myarray[0]
數組屬性
語法：
myarray.length; //獲得數組myarray的長度
var arr=[55,32,5,90,60,98,76,54];//包含8個數值的數組arr
document.write(arr.length); //顯示數組長度8
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
二維數組
一維數組的表示: myarray[ ]
二維數組的表示: myarray[ ][ ]
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
}
}
-
二維數組的定義方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 賦值
myarr[0][1]=5; //將5的值傳入到數組中，覆蓋原有值。
說明: myarr[0][1] ,0 表示表的行，1表示表的列。
流程控制語句
1、if語句：
var mypen = "black"; //定義變量mypen，存儲筆的黑色。
if(mypen == "black")
{
document.write("筆是黑色的，所以購買");
}
2、if..else.. if..else if..else..
3、swtch:
var myweek =6;//myweek表示星期幾變量
switch(myweek)
{
case 1:
document.write("學習理念知識");
break;
case 3:
document.write("到企業實踐");
break;
default:
document.write("周六、日休息和娛樂");
}
4、for循環
5、while循環（和for循環有相同功能的還有while循環, while循環重復執行一段代碼，直到某個條件不再滿足。）
while(判斷條件)
{
循環語句
}
6、Do...while循環（do while結構的基本原理和while結構是基本相同的，但是它保證循環體至少被執行一次。因為它是先執行代碼，后判斷條件，如果條件為真，繼續循環。）
var mynum =6;//mynum初值化數值為6
do
{
document.write("數字:"+mynum+"<br/>");
mynum--;
}
while( mynum >=0 )
7、退出循環break
for(初始條件;判斷條件;循環后條件值更新)
{
if(特殊情況)
{break;}
循環代碼
}
8、繼續循環continue(continue的作用是僅僅跳過本次循環，而整個循環體繼續執行。)
for(初始條件;判斷條件;循環后條件值更新)
{
if(特殊情況)
{ continue; }
循環代碼
}
函數
（函數的作用，可以寫一次代碼，然后反復地重用這個代碼。）
function 函數名( )
{
函數體;
}
//function定義函數的關鍵字，“函數名”你為函數取的名字，“函數體”替換
為完成特定功能的代碼。再合適的地方調用即可 *函數名()*
函數調用
第一種情況:在<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>
有參數的函數
//注意:參數可以多個，根據需要增減參數個數。參數之間用(逗號，）隔開。
function 函數名(參數1,參數2)
{
函數代碼
}
按照這個格式，函數實現任意兩個數的和應該寫成：
function add2(x,y)
{
sum = x + y;
document.write(sum);
}//x和y則是函數的兩個參數，調用函數的時候，我們可通過這兩個參數
//把兩個實際的加數傳遞給函數了。
返回值的函數
我們只要把"document.write(sum)"這行改成如下代碼：
function add2(x,y)
{
sum = x + y;
return sum; //返回函數值,return后面的值叫做返回值。
}
還可以通過變量存儲調用函數的返回值，代碼如下:
result = add2(3,4);//語句執行后,result變量中的值為7。
注意:函數中參數和返回值不只是數字，還可以是字符串等其它類型。
事件
JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。
比如說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。
鼠標單擊事件( onclick ）
<form>
<input name="button" type="button" value="點擊提交" onclick="add2()" />
</form>
注意: 在網頁中，如使用事件，就在該元素中設置事件屬性。
鼠標經過事件（onmouseover）
當鼠標移到一個對象上時，該對象就觸發onmouseover事件，并執行onmouseover事件調用的程序。
<input name="password" type="password" onmouseover = "message()"/>
鼠標移開事件（onmouseout）
鼠標移開事件，當鼠標移開當前對象時，執行onmouseout調用的程序。
<a onmouseout = "message()">點擊我 </a>
光標聚焦事件（onfocus）
當網頁中的對象獲得聚點時，執行onfocus調用的程序就會被執行。如將光標移到文本框內時，即焦點在文本框內，觸發onfocus 事件，并調用函數message()。
<input name="password" type="password" onfocus = "message()"/>
失焦事件（onblur）
onblur事件與onfocus是相對事件，當光標離開當前獲得聚焦對象的時候，觸發onblur事件，同時執行被調用的程序。如網頁中有用戶和密碼兩個文本框。當前光標在用戶文本框內時（即焦點在文本框），在光標離開該文本框后（即失焦時），觸發onblur事件，并調用函數message()。
<input name="username" type="text" value="請輸入用戶名！" onblur = "message()" >
內容選中事件（onselect）
選中事件，當文本框或者文本域中的文字被選中時，觸發onselect事件，同時調用的程序就會被執行。
<textarea name="summary" cols="60" rows="5" onselect = "message()">請寫入個人簡介，不少于200字！</textarea>
文本框內容改變事件（onchange）
通過改變文本框的內容來觸發onchange事件，同時執行被調用的程序。
<textarea name="summary" cols="60" rows="5" onchange ="message()">請寫入個人簡介，不少于200字！</textarea>
加載事件（onload）
事件會在頁面加載完成后，立即發生，同時執行被調用的程序。
注意：
- 加載頁面時，觸發onload事件，事件寫在<body>標簽內。
- 此節的加載頁面，可理解為打開一個新頁面時。
如下代碼,當加載一個新頁面時，彈出對話框“加載中，請稍等…”。
<script type="text/javascript">
function message(){
alert("加載中，請稍等…"); }
</script>
</head>
<body onload = "message()">
歡迎學習JavaScript。
</body>
卸載事件（onunload）
卸載事件（onunload）
當用戶退出頁面時（頁面關閉、頁面刷新等），觸發onUnload事件，同時執行被調用的程序。注意：不同瀏覽器對onunload事件支持不同。
JS內置對象
JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。
對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；
對象的方法：能夠在對象上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；
JavaScript 提供多個內建對象，比如 String、Date、Array 等等，使用對象前先定義。
訪問對象屬性的語法:
objectName.propertyName
訪問對象的方法：
objectName.methodName()
如使用string 對象的 toUpperCase() 方法來將文本轉換為大寫：
var mystr="Hello world!";//創建一個字符串
var request=mystr.toUpperCase(); //使用字符串對象方法
Date 日期對象
定義一個時間對象 :
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對象中處理時間和日期的常用方法：
返回/設置年份方法
get/setFullYear() 返回/設置年份，用四位數表示。
mydate.getMonth()、mydate.getDay()、mydate.getHours()、mydate.getMinutes()、mydate.getSeconds()//依次為月到秒
var mydate=new Date();//當前時間
document.write(mydate+"<br>");//輸出當前時間
document.write(mydate.getFullYear()+"<br>");//輸出當前年份
mydate.setFullYear(81); //設置年份
document.write(mydate+"<br>"); //輸出年份被設定為 0081年。
//結果：
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800
注意:
1、結果格式依次為：星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)
2、不同瀏覽器，時間格式有差異。
返回星期方法
getDay() 返回星期，返回的是0-6的數字，0 表示星期天。如果要返回相對應“星期”，通過數組完成
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是：" + weekday[mydate.getDay()]);
返回/設置時間方法
get/setTime() 返回/設置時間，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。
使用getTime()和setTime()方法，將時間推后2小時:
var mydate=new Date();
document.write("當前時間："+mydate+"<br>");
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推遲二小時時間：" + mydate);
String 字符串對象
定義字符串的方法就是直接賦值。比如：var mystr = "I love JavaScript!"
訪問字符串對象的屬性length:
stringObject.length; 返回該字符串的長度。
訪問字符串對象的方法：如：小寫轉大寫
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代碼執行后，mynum 的值是：HELLO WORLD!
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
stringObject.charAt(index)
注意:如果參數 index 不在 0 與 string.length-1 之間，該方法將返回一個空字符串。
返回指定的字符串首次出現的位置
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
stringObject.indexOf(substring, startpos)
說明：
1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。
2.可選參數，從stringObject的startpos位置開始查找substring，如果沒有此參數將從stringObject的開始位置查找。
3.如果找到一個 substring，則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。
注意：
1.indexOf() 方法區分大小寫。
2.如果要檢索的字符串值沒有出現，則該方法返回 -1。
如：使用indexOf()方法，檢索第二個字符ｏ出現的位置
var mystr="Hello World!"
document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
//先取第一個索引，+1后可查詢第二個
字符串分割split()
split() 方法將字符串分割為字符串數組，并返回此數組。
stringObject.split(separator,limit)
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。
var mystr = "www.imooc.com";
document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));
結果：
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i
提取字符串substring()
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
stringObject.substring(startPos,stopPos)
參數說明:
注意：
- 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符，其長度為 stop 減start。
- 如果參數 start 與 stop 相等，那么該方法返回的就是一個空串（即長度為 0 的字符串）。
- 如果 start 比 stop 大，那么該方法在提取子串之前會先交換這兩個參數。
如：
<script type="text/javascript">
var mystr="I love JavaScript";
document.write(mystr.substring(7));
document.write(mystr.substring(2,6));
</script>
運行結果:
JavaScript
love
提取指定數目的字符substr()
substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。
stringObject.substr(startPos,length)
注意：
1、如果參數startPos是負數，從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。
2、如果startPos為負數且絕對值大于字符串長度，startPos為0。
代碼如下：
<script type="text/javascript">
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
</script>
運行結果：
JavaScript!
love
Math對象
Math對象，提供對數據的數學計算。
使用 Math 的屬性和方法，代碼如下：
<script type="text/javascript">
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
</script>
運行結果:
3.141592653589793
15
注意：Math 對象是一個固有的對象，無需創建它，直接把 Math 作為對象使用就可以調用其所有屬性和方法。這是它與Date,String對象的區別。
Math 對象屬性:
Math 對象方法:
** 向上取整ceil()**
ceil() 方法可對一個數進行向上取整。
語法:Math.ceil(x)
注意：它返回的是大于或等于x，并且與x最接近的整數。
如：document.write(Math.ceil(0.624)) 輸出1
向下取整floor()
floor() 方法可對一個數進行向下取整。
語法:Math.floor(x)
如：alert(Math.floor(-5.214)) 運行結果-6
四舍五入round()
round() 方法可把一個數字四舍五入為最接近的整數。
語法:Math.round(x)
如：alert(Math.round(-5.34)) 輸出-5
隨機數 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個隨機數。
語法：Math.random();
注意：返回一個大于或等于 0 但小于 1 的符號為正的數字值。
獲得0 ~ 10之間的隨機數，代碼如下:
<script type="text/javascript">
document.write((Math.random())*10);
</script>
運行結果：
8.72153625893887
Array 數組對象
數組定義的方法：
- 定義了一個空數組:
var 數組名= new Array(); - 定義時指定有n個空元素的數組：
var 數組名 =new Array(n);
3.定義數組的時候，直接初始化數據：
var 數組名 = [<元素1>, <元素2>, <元素3>...];
數組屬性：
length 用法：<數組對象>.length；返回：數組的長度，即數組里有多少個元素。它等于數組里最后一個元素的下標加一。
數組方法：
數組連接concat()
concat() 方法用于連接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。
語法arrayObject.concat(array1,array2,...,arrayN)
注意: 該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。
如：
<script type="text/javascript">
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,5
1,2,3
** 指定分隔符連接數組元素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());
document.write(myarr.join("="));
</script>
運行結果：
I,love,JavaScript
I=love=JavaScript
顛倒數組元素順序reverse()
reverse() 方法用于顛倒數組中元素的順序。
語法：arrayObject.reverse()
注意：該方法會改變原來的數組，而不會創建新的數組。
使用reverse()方法,將數組myarr1順序顛倒:
var myarr1= ["我","愛","你"];
document.write(myarr1.reverse());
//輸出
你，愛，我
選定元素slice()
slice() 方法可從已有的數組中返回選定的元素。
語法arrayObject.slice(start,end)
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 + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
</script>
運行結果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
數組排序sort()
sort()方法使數組中的元素按照一定的順序排列。
語法:arrayObject.sort(方法函數)
1.如果不指定<方法函數>，則按unicode碼順序排列。
2.如果指定<方法函數>，則按<方法函數>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
/若返回值<=-1，則表示 A 在排序后的序列中出現在 B 之前。
/若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
/若返回值>=1，則表示 A 在排序后的序列中出現在 B 之后。
使用sort()方法，進行數組降序列排列
function sortNum(a,b) {
return b-a;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum) );
//輸出
100,80,50,16,6,1
練習
輸出日期，并計算學生總分和平均分
//通過javascript的日期對象來得到當前的日期，并輸出。
var dateNow = new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write(dateNow.getFullYear()+"年"+dateNow.getMonth()+1+"月"+dateNow.getDate()+"日"+" "+weekday[dateNow.getDay()]+ "<br/>");
//成績是一長竄的字符串不好處理，找規律后分割放到數組里更好操作哦
var scoreStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var arr = scoreStr.split(";");//把字符串通過";"拆分為數組
//從數組中將成績撮出來，然后求和取整，并輸出。
var num = 0 ;
for(var b = 0; b < arr.length;b++){
var str = arr[b];
var a = parseInt(str.substring(str.indexOf(":")+1));
//先通過indexOf取索引，再通過substring截取所需字符串
num = num + a;
}
document.write("總分為："+num+"<br/>"+"分");
document.write("班級平均分為："+Math.floor(num/arr.length));
輸出為：
DOM
DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
下面代碼:
將HTML代碼分解為DOM節點層次圖:
HTML文檔可以說由節點構成的集合，DOM節點有:
- 元素節點：上圖中
<html>、<body>、<p>等都是元素節點，即標簽。 - 文本節點:向用戶展示的內容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。 - 屬性節點:元素屬性，如
<a>標簽的鏈接屬性。
節點屬性:
遍歷節點樹:
以上圖ul為例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。
注意:前兩個是document方法。
getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
- 因為文檔中的 name 屬性可能不唯一，所有getElementsByName() 方法返回的是元素的數組，而不是一個元素。
- 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName(Tagname)
說明:
- Tagname是標簽的名稱，如p、a、img等標簽名。
- 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
區別
- ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。
- Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合。
- TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
getAttribute()方法
通過 元素節點 的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
- elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
- name：要想查詢的元素節點的屬性名字
看看下面的代碼，獲取h1標簽的屬性值：
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過 元素節點 對象調用的函數。
節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
一. nodeName : 節點的名稱（只讀）
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 是屬性的名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
二. nodeValue ：節點的值
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本自身
- 屬性節點的 nodeValue 是屬性的值
三. nodeType ：節點的類型（只讀）
元素類型 節點類型
元素 ====== 1
屬性 ====== 2
文本 ====== 3
注釋 ====== 8
文檔 ====== 9
訪問子節點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
語法：
elementNode.childNodes
注意：
1、如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
2、根據瀏覽器不同 IE上節點之間的空白符不算節點，其他瀏覽器算文本節點
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var tx = document.getElementsByTagName("div")[0].childNodes;
for (var i = 0;i<tx.length;i++)
{
document.write("第"+(i+1)+"個節點屬性是"+tx[i].nodeType+"<br/>");
}
訪問子節點的第一和最后項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節中，我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。 (以后章節講解)
<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+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);
訪問父節點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
訪問兄弟節點
nextSibling 屬性可返回某個節點之后緊跟的節點（處于同一樹層級中）。
語法：
nodeObject.nextSibling
說明：如果無此節點，則該屬性返回 null。previousSibling 屬性可返回某個節點之前緊跟的節點（處于同一樹層級中）
語法：
nodeObject.previousSibling
說明：如果無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節點nodeType是否為1, 如是為元素節點，跳過。
運行結果:
LI = javascript
nextsibling: LI = jquery
插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
語法:
appendChild(newnode)
參數:
newnode：指定追加的節點。
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newNode = document.createElement("li");
newNode.innerHTML = "PHP";
otest.appendChild(newNode);
</script>
運行結果:
HTML
JavaScript
PHP
插入節點insertBefore()
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:
insertBefore(newnode,node);
參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var onode = document.createElement("li");
onode.innerHTML = "PHP";
otest.insertBefore(onode,otest.childNodes[0]);
</script>
輸出：
PHP
JavaScript
HTML
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數:
node ：必需，指定需要刪除的節點。
運行結果:
HTML
刪除節點的內容: javascript
注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
替換元素節點replaceChild()
replaceChild 實現 子節點(對象) 的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數：
newnode : 必需，用于替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
效果: 將文檔中的 Java 改為 JavaScript。
注意:
- 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
- newnode 必須先被建立。
創建元素節點createElement
createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)
參數:
tagName：字符串值，這個字符串用來指明創建元素的類型。
注意：
要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
在HTML文檔中創建一個鏈接，并設置相應屬性:
var main = document.body;
//創建鏈接
function createa(url,text)
{
var a = document.createElement("a");
a.href=url;
a.innerHTML = text;
//a.style.color = "red";
main.appendChild(a);
}
// 調用函數創建鏈接
createa("http://www.imooc.com","慕課");
創建一個按鈕，代碼如下：
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創建一個按鈕";
body.appendChild(input);
</script>
創建文本節點createTextNode
createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。
語法：
document.createTextNode(data)
參數：
data : 字符串值，可規定此節點的文本。
.message{
width:200px;
height:100px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element=document.createElement("p");
element.className="message";
var newnode=document.createTextNode("I love Javascript!");
document.body.appendChild(element);
element.appendChild(newnode)
</script>
瀏覽器窗口可視區域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
? window.innerHeight - 瀏覽器窗口的內部高度
? window.innerWidth - 瀏覽器窗口的內部寬度
二、對于 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;
網頁尺寸
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
