用法

JS內(nèi)部引用

<script type="text/javascript">
    document.write("hello");
    alert("JS代碼")
</script>

引用JS外部文件

<script src="myscript.js"></script>

注意: javascript作為一種腳本語言可以放在html頁面中任何位置火架，但是瀏覽器解釋html時(shí)是按先后順序的耍铜，所以前面的script就先被執(zhí)行饮潦。比如進(jìn)行頁面顯示初始化的js必須放在head里面安聘，因?yàn)槌跏蓟家筇崆斑M(jìn)行（如給頁面body設(shè)置css等）棉磨；而如果是通過事件調(diào)用執(zhí)行的function那么對(duì)位置沒什么要求的出爹。

注釋

單行注釋，在注釋內(nèi)容前加符號(hào)"http://""

多行注釋以"/*"開始馅袁，以"*/"結(jié)束域慷。

變量

定義變量使用關(guān)鍵字var,語法如下：

var 變量名

變量名可以任意取名，但要遵循命名規(guī)則:

1.變量必須使用字母汗销、下劃線(_)或者美元符($)開始犹褒。

2.然后可以使用任意多個(gè)英文字母、數(shù)字弛针、下劃線(_)或者美元符($)組成叠骑。

3.不能使用JavaScript關(guān)鍵詞與JavaScript保留字。

變量要先聲明再賦值削茁，如下：

var mychar;
mychar="javascript";
var mynum = 6;

變量可以重復(fù)賦值宙枷，如下：

var mychar;
mychar="javascript";
mychar="hello";

注意:

1. 在JS中區(qū)分大小寫，如變量mychar與myChar是不一樣的茧跋，表示是兩個(gè)變量慰丛。

2. 變量雖然也可以不聲明，直接使用瘾杭，但不規(guī)范诅病，需要先聲明，后使用。

判斷語句（if...else）

語法:

if(條件)
{ 條件成立時(shí)執(zhí)行的代碼 }
else
{ 條件不成立時(shí)執(zhí)行的代碼 }

函數(shù)

如何定義一個(gè)函數(shù)呢睬隶？基本語法如下:

function 函數(shù)名()
{
     函數(shù)代碼;
}

說明:

1. function定義函數(shù)的關(guān)鍵字。

2. "函數(shù)名"你為函數(shù)取的名字页徐。

3. "函數(shù)代碼"替換為完成特定功能的代碼苏潜。

函數(shù)調(diào)用:

函數(shù)定義好后，是不能自動(dòng)執(zhí)行的变勇，所以需調(diào)用它,只需直接在需要的位置寫函數(shù)就ok了,代碼如下:

<script type="text/javascript">
    function contxt() //定義函數(shù)
    {
        alert("哈哈恤左，調(diào)用函數(shù)了!");
    }
</script>
   
<form>
    <input type="button" value="點(diǎn)擊我" onclick="contxt()" />  
</form>

輸出內(nèi)容（document.write）

document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。簡(jiǎn)單的說就是直接在網(wǎng)頁中輸出內(nèi)容搀绣。

<script type="text/javascript">

 第一種:輸出內(nèi)容用""括起飞袋，直接輸出""號(hào)內(nèi)的內(nèi)容。
    document.write("I love JavaScript链患！"); //內(nèi)容用""括起來巧鸭，""里的內(nèi)容直接輸出。
      
 第二種:通過變量麻捻，輸出內(nèi)容
    var mystr="hello world!";
    document.write(mystr);  //直接寫變量名纲仍，輸出變量存儲(chǔ)的內(nèi)容。
    
 第三種:輸出多項(xiàng)內(nèi)容贸毕，內(nèi)容之間用+號(hào)連接郑叠。
    var mystr="hello";
    document.write(mystr+"I love JavaScript"); //多項(xiàng)內(nèi)容之間用+號(hào)連接
      
 第四種:輸出HTML標(biāo)簽，并起作用明棍，標(biāo)簽使用""括起來乡革。
    var mystr="hello";
    document.write(mystr+"<br>");//輸出hello后，輸出一個(gè)換行符
      document.write("JavaScript");

</script>

如何輸出空格, 解決方法:

1. 使用輸出html標(biāo)簽來解決

 document.write("  "+"1"+"    "+"23");

2. 使用CSS樣式來解決

document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

在輸出時(shí)添加“white-space:pre;”樣式屬性摊腋。這個(gè)樣式表示"空白會(huì)被瀏覽器保留"

警告（alert 消息對(duì)話框）

alert(字符串或變量);  

注意:

1. 在點(diǎn)擊對(duì)話框"確定"按鈕前沸版，不能進(jìn)行任何其它操作。

2. 消息對(duì)話框通承苏簦可以用于調(diào)試程序推穷。

3. alert輸出內(nèi)容，可以是字符串或變量类咧，與document.write 相似馒铃。

確認(rèn)（confirm 消息對(duì)話框）

語法：

confirm(str);

參數(shù)說明：

str：在消息對(duì)話框中要顯示的文本

返回值

返回值: Boolean值

注: 通過返回值可以判斷用戶點(diǎn)擊了什么按鈕

代碼示例：

<script type="text/javascript">
    var mymessage=confirm("你喜歡JavaScript嗎?");
    if(mymessage==true) {
        document.write("很好,加油!");
    } else {
        document.write("JS功能強(qiáng)大，要學(xué)習(xí)噢!");
    }
</script>

提問（prompt 消息對(duì)話框）

語法:

prompt(str1, str2);

參數(shù)說明：

str1：要顯示在消息對(duì)話框中的文本痕惋，不可修改
str2：文本框中的內(nèi)容区宇，可以修改

返回值

1. 點(diǎn)擊確定按鈕，文本框中的內(nèi)容將作為函數(shù)返回值
2. 點(diǎn)擊取消按鈕值戳，將返回null

代碼示例：

var myname=prompt("請(qǐng)輸入你的姓名:");
if(myname!=null) {
    alert("你好"+myname);
} else {
    alert("你好 my friend.");
}

打開新窗口（window.open）

語法

window.open([URL], [窗口名稱], [參數(shù)字符串])

參數(shù)說明:

URL：可選參數(shù)议谷，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。
如果省略這個(gè)參數(shù)堕虹，或者它的值是空字符串卧晓，那么窗口就不顯示任何文檔芬首。
窗口名稱：可選參數(shù)，被打開窗口的名稱逼裆。
1.該名稱由字母郁稍、數(shù)字和下劃線字符組成。
2."_top"胜宇、"_blank"耀怜、"_self"具有特殊意義的名稱。
    _blank：在新窗口顯示目標(biāo)網(wǎng)頁
    _self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁
    _top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁
3.相同 name 的窗口只能創(chuàng)建一個(gè)桐愉，要想創(chuàng)建多個(gè)窗口則 name 不能相同财破。
4.name 不能包含有空格。
參數(shù)字符串：可選參數(shù)从诲，設(shè)置窗口參數(shù)左痢，各參數(shù)用逗號(hào)隔開。

參數(shù)表：

例如：打開http://www.imooc.com網(wǎng)站系洛，大小為300px * 200px抖锥，無菜單，無工具欄碎罚，無狀態(tài)欄磅废，有滾動(dòng)條窗口：

<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

注意：運(yùn)行結(jié)果考慮瀏覽器兼容問題。

關(guān)閉窗口（window.close）

用法：

widow.close(); // 關(guān)閉本窗口

或

<窗口對(duì)象>.close(); // 關(guān)閉指定的窗口

認(rèn)識(shí)DOM

文檔對(duì)象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法荆烈。DOM 將HTML文檔呈現(xiàn)為帶有元素拯勉、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。

HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合憔购，三種常見的DOM節(jié)點(diǎn):

1. 元素節(jié)點(diǎn)：<html>宫峦、<body>、<p>等都是元素節(jié)點(diǎn)玫鸟，即標(biāo)簽导绷。

2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript屎飘、DOM妥曲、CSS等文本。

3. 屬性節(jié)點(diǎn):元素屬性钦购，如<a>標(biāo)簽的鏈接屬性檐盟。

通過ID獲取元素

語法：

document.getElementById(“id”) 

結(jié)果：null或[object HTMLParagraphElement]

注：在獲取的元素是一個(gè)對(duì)象，如想對(duì)元素進(jìn)行操作押桃，我們要通過它的屬性或方法葵萎。

innerHTML 屬性

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容。

語法：

Object.innerHTML="";

注意：

1.Object是獲取的元素對(duì)象，如通過document.getElementById("ID")獲取的元素羡忘。

2.注意書寫谎痢，innerHTML區(qū)分大小寫。

改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式卷雕。如何改變 HTML 元素的樣式呢节猿？

語法

Object.style.property=new style;

基本屬性表（property）:

代碼示例：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

顯示和隱藏（display屬性）

網(wǎng)頁中經(jīng)常會(huì)看到顯示和隱藏的效果，可通過display屬性來設(shè)置爽蝴。

語法

Object.style.display = value

value取值：

控制類名（className 屬性）

className 屬性設(shè)置或返回元素的class 屬性。

語法：

object.className = classname

作用：

1.獲取元素的class 屬性

2. 為網(wǎng)頁內(nèi)的某個(gè)元素指定一個(gè)css樣式來更改該元素的外觀

樣式全部取消

removeAttribute("style")

變量

變量纫骑，存儲(chǔ)數(shù)據(jù)的容器蝎亚。
變量名:容器---- 杯子
變量值：數(shù)據(jù)---杯子里的水

1.必須以字母、下劃線或美元符號(hào)開頭先馆，后面可以跟字母发框、下劃線、美元符號(hào)和數(shù)字煤墙。如下:

正確:           
    mysum            
    _mychar         
    $numa1          
錯(cuò)誤:
  6num  //開頭不能用數(shù)字
  %sum //開頭不能用除(_ $)外特殊符號(hào),如(%  + /等)
  sum+num //開頭中間不能使用除(_ $)外特殊符號(hào)梅惯，如(%  + /等)

2.變量名區(qū)分大小寫，如:A與a是兩個(gè)不同變量仿野。

3.不允許使用JavaScript關(guān)鍵字和保留字做變量名铣减。

什么是事件

事件是可以被 JavaScript 偵測(cè)到的行為。

主要事件表:

Date 日期對(duì)象

返回指定的字符串首次出現(xiàn)的位置

stringObject.indexOf(substring, startpos)

字符串分割split()

stringObject.split(separator,limit)

提取字符串substring()

stringObject.substring(startPos,stopPos)

提取指定數(shù)目的字符substr()

stringObject.substr(startPos,length)

Array 數(shù)組對(duì)象

數(shù)組定義的方法：

1. 定義了一個(gè)空數(shù)組:

var  數(shù)組名= new Array();

2. 定義時(shí)指定有n個(gè)空元素的數(shù)組:

var 數(shù)組名 =new Array(n);

3. 定義數(shù)組的時(shí)候脚作，直接初始化數(shù)據(jù)：

var  數(shù)組名 = [<元素1>, <元素2>, <元素3>...];
我們定義myArray數(shù)組葫哗，并賦值，代碼如下：

var myArray = [2, 8, 6]; 
說明：定義了一個(gè)數(shù)組 myArray球涛，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6劣针。

數(shù)組連接concat()

arrayObject.concat(array1,array2,...,arrayN)

計(jì)時(shí)器setInterval()

語法：

setInterval(代碼，交互時(shí)間);

參數(shù)說明：

1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串亿扁。

2. 交互時(shí)間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔捺典，以毫秒計(jì)（1s=1000ms）。

返回值：

一個(gè)可以傳遞給 clearInterval() 從而取消對(duì)"代碼"的周期性執(zhí)行的值从祝。

調(diào)用函數(shù)格式(假設(shè)有一個(gè)clock()函數(shù))：

setInterval("clock()",1000)
或
setInterval(clock,1000)

取消計(jì)時(shí)器clearInterval()

語法：

clearInterval(id_of_setInterval)

參數(shù)說明：

id_of_setInterval：由 setInterval() 返回的 ID 值襟己。

計(jì)時(shí)器setTimeout()

setTimeout()計(jì)時(shí)器，在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次牍陌。

語法：

setTimeout(代碼,延遲時(shí)間);

參數(shù)說明：

1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串稀蟋。
2. 延時(shí)時(shí)間：在執(zhí)行代碼前需等待的時(shí)間，以毫秒為單位（1s=1000ms)呐赡。

取消計(jì)時(shí)器clearTimeout()

setTimeout()和clearTimeout()一起使用退客，停止計(jì)時(shí)器。

語法：

clearTimeout(id_of_setTimeout)

參數(shù)說明：

id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊萌狂。

History 對(duì)象

history對(duì)象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)档玻，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。

注意:從窗口被打開的那一刻開始記錄茫藏，每個(gè)瀏覽器窗口误趴、每個(gè)標(biāo)簽頁乃至每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)务傲。

語法：

window.history.[屬性|方法]

注意：window可以省略凉当。

History 對(duì)象屬性

History 對(duì)象方法

使用length屬性，當(dāng)前窗口的瀏覽歷史總長(zhǎng)度售葡，代碼如下：

var HL = window.history.length;
  document.write(HL);

返回前一個(gè)瀏覽的頁面

window.history.back();
window.history.go(-1);

返回下一個(gè)瀏覽的頁面

window.history.forward();
window.history.go(1);

返回瀏覽歷史中的其他頁面

window.history.go(number);

Location對(duì)象

location用于獲取或設(shè)置窗體的URL看杭，并且可以用于解析URL。

location.[屬性|方法]

location對(duì)象屬性圖示

location 對(duì)象屬性

location 對(duì)象方法

Navigator對(duì)象

Navigator 對(duì)象包含有關(guān)瀏覽器的信息挟伙，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本楼雹。

對(duì)象屬性

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>"); 
} 

screen對(duì)象

screen對(duì)象用于獲取用戶的屏幕信息。

window.screen.屬性

對(duì)象屬性

DOM

文檔對(duì)象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法介却。DOM 將HTML文檔呈現(xiàn)為帶有元素谴供、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。

HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合齿坷，DOM節(jié)點(diǎn)有：

1. 元素節(jié)點(diǎn)：上圖中<html>憔鬼、<body>、<p>等都是元素節(jié)點(diǎn)胃夏，即標(biāo)簽轴或。

2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript仰禀、DOM照雁、CSS等文本。

3. 屬性節(jié)點(diǎn):元素屬性答恶，如<a>標(biāo)簽的鏈接屬性饺蚊。

節(jié)點(diǎn)屬性

遍歷節(jié)點(diǎn)樹

DOM操作

注意：前兩個(gè)是document方法。

getElementsByName()方法

返回帶有指定名稱的節(jié)點(diǎn)對(duì)象的集合

document.getElementsByName(name);

getElementsByTagName()方法

返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合悬嗓。返回元素的順序是它們?cè)谖臋n中的順序污呼。

document.getElementsByTagName(Tagname) // Tagname是標(biāo)簽的名稱，如p包竹、a燕酷、img等標(biāo)簽名

區(qū)別getElementByID,getElementsByName,getElementsByTagName

如下:

<input type="checkbox" name="hobby" id="hobby1">  音樂

input標(biāo)簽就像人的類別籍凝。

name屬性就像人的姓名。

id屬性就像人的身份證苗缩。

方法總結(jié)

getAttribute()方法

通過元素節(jié)點(diǎn)的屬性名稱獲取屬性的值饵蒂。

elementNode.getAttribute(name)

//1. elementNode：使用getElementById()、getElementsByTagName()等方法酱讶，獲取到的元素節(jié)點(diǎn)退盯。
//2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字

setAttribute()方法

setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值泻肯。

elementNode.setAttribute(name,value)
//1.name: 要設(shè)置的屬性名渊迁。
//2.value: 要設(shè)置的屬性值。

節(jié)點(diǎn)屬性

在文檔對(duì)象模型 (DOM) 中灶挟，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象琉朽。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：

1. nodeName : 節(jié)點(diǎn)的名稱

2. nodeValue ：節(jié)點(diǎn)的值

3. nodeType ：節(jié)點(diǎn)的類型

一、nodeName 屬性: 節(jié)點(diǎn)的名稱膏萧，是只讀的漓骚。

1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

二蝌衔、nodeValue 屬性：節(jié)點(diǎn)的值

1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

三榛泛、nodeType 屬性: 節(jié)點(diǎn)的類型，是只讀的噩斟。以下常用的幾種結(jié)點(diǎn)類型:

訪問子節(jié)點(diǎn)childNodes

訪問選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表曹锨，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性剃允。

elementNode.childNodes

注意：如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)沛简，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。

訪問子節(jié)點(diǎn)的第一和最后項(xiàng)

node.firstChild

node. lastChild

訪問父節(jié)點(diǎn)parentNode

elementNode.parentNode

注意：父節(jié)點(diǎn)只能有一個(gè)斥废。

訪問兄弟節(jié)點(diǎn)

1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）椒楣。

nodeObject.nextSibling

2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。

nodeObject.previousSibling  

說明：如果無此節(jié)點(diǎn)牡肉，則該屬性返回 null捧灰。

注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如统锤，換行符號(hào)）毛俏，而其它瀏覽器不會(huì)忽略。

解決問題方法:

判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)饲窿，跳過煌寇。

function get_nextSibling(n)
{
var x=n.nextSibling;
while (x && x.nodeType!=1)
  {
  x=x.nextSibling;
  }
return x;
}

function get_previousSibling(n)
{
var x=n.previousSibling;
while (x && x.nodeType!=1)
  {
  x=x.previousSibling;
  }
return x;
}

插入節(jié)點(diǎn)appendChild()

在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。

appendChild(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>

插入節(jié)點(diǎn)insertBefore()

insertBefore(newnode,node);
//newnode: 要插入的新節(jié)點(diǎn)逾雄。
//node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)阀溶。

<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.insertBefore(newnode, otest.childNodes[1]);
</script> 

刪除節(jié)點(diǎn)removeChild()

removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)腻脏。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)淌哟，如失敗迹卢，則返回 NULL。

nodeObject.removeChild(node)

<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  for(var i=content.childNodes.length-1;i>=0;i--){
      var dnode = content.childNodes[i];
      var x = content.removeChild(dnode);
      document.write(x.innerHTML+"<br>");
  }
}
</script>

<button onclick="clearText()">清除節(jié)點(diǎn)內(nèi)容</button>

注意: 把刪除的子節(jié)點(diǎn)賦值給 x徒仓，這個(gè)子節(jié)點(diǎn)不在DOM樹中腐碱，但是還存在內(nèi)存中，可通過 x 操作掉弛。

如果要完全刪除對(duì)象症见，給 x 賦 null 值

替換元素節(jié)點(diǎn)replaceChild()

node.replaceChild (newnode,oldnew ) 

注意:

1. 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除殃饿。
2. newnode 必須先被建立谋作。

創(chuàng)建元素節(jié)點(diǎn)createElement

document.createElement(tagName)

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "創(chuàng)建一個(gè)按鈕";  
   body.appendChild(input);  
 </script>  

創(chuàng)建文本節(jié)點(diǎn)createTextNode

document.createTextNode(data)
//data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本

瀏覽器窗口可視區(qū)域大小

一乎芳、對(duì)于IE9+遵蚜、Chrome、Firefox奈惑、Opera 以及 Safari：

? window.innerHeight - 瀏覽器窗口的內(nèi)部高度

? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

二吭净、對(duì)于 Internet Explorer 8、7肴甸、6寂殉、5：

? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。

? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度原在。

或者

Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽

? document.body.clientHeight

? document.body.clientWidth

在不同瀏覽器都實(shí)用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

網(wǎng)頁尺寸scrollHeight

scrollHeight和scrollWidth友扰，獲取網(wǎng)頁內(nèi)容高度和寬度。

一庶柿、針對(duì)IE村怪、Opera:

scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight浮庐。

二甚负、針對(duì)NS、FF:

scrollHeight 是網(wǎng)頁內(nèi)容高度兔辅，不過最小值是 clientHeight腊敲。也就是說網(wǎng)頁內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 维苔。

三碰辅、瀏覽器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

網(wǎng)頁尺寸offsetHeight

offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動(dòng)條等邊線介时，會(huì)隨窗口的顯示大小改變)没宾。

一凌彬、值

offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。

二循衰、瀏覽器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

網(wǎng)頁卷去的距離與偏移量

scrollLeft:設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 铲敛，即左邊灰色的內(nèi)容。

scrollTop:設(shè)置或獲取位于對(duì)象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 会钝，即上邊灰色的內(nèi)容伐蒋。

offsetLeft:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 。

offsetTop:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 迁酸。