JavaScript進階篇

瀏覽器對象

    

window對象

JavaScript 計時器

計時器setInterval()

語法:

setInterval(代碼,交互時間);

參數說明：

1. 代碼：要調用的函數或要執行的代碼串。

2. 交互時間：週期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:

一個可以傳遞給 clearInterval() 從而取消對"代碼"的週期性執行的值。

調用函數格式(假設有一個clock()函數):

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

取消計時器clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的交互時間。

語法：

clearInterval(id_of_setInterval)

參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。

語法:

setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒爲單位（1s=1000ms)。

取消計時器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計時器。

語法:

clearTimeout(id_of_setTimeout)

參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退相似導航的功能。

注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標籤頁乃至每個框架，都有自己的history對象與特定的window對象關聯。

語法：

window.history.[屬性|方法]

注意：window可以省略。

History 對象屬性

History 對象方法

返回前一個瀏覽的頁面

back()方法，加載 history 列表中的前一個 URL。

語法：

window.history.back();

比如，返回前一個瀏覽的頁面，代碼如下：

window.history.back();

注意：等同於點擊瀏覽器的倒退按鈕。

back()相當於go(-1),代碼如下:

window.history.go(-1);

返回下一個瀏覽的頁面

forward()方法，加載 history 列表中的下一個 URL。

如果倒退之後，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:

window.history.forward();

注意：等價點擊前進按鈕。

forward()相當於go(1),代碼如下:

window.history.go(1);

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

go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。

語法：

window.history.go(number);

參數：

瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，代碼如下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次後退按鈕操作一樣。

同理，返回當前頁面之後瀏覽過的第三個歷史頁面，代碼如下：

window.history.go(3);

Location對象

location用於獲取或設置窗體的URL，並且可以用於解析URL。

語法:

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性：

location 對象方法:

Navigator對象

Navigator 對象包含有關瀏覽器的信息，通常用於檢測瀏覽器與操作系統的版本。

對象屬性:

查看瀏覽器的名稱和版本，代碼如下:

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

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語法

navigator.userAgent

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。

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

screen對象

screen對象用於獲取用戶的屏幕信息。

語法：

window.screen.屬性

對象屬性:

屏幕分辨率的高和寬

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>

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務欄。

2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務欄。

注意:

不同系統的任務欄默認高度不一樣，及任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。

我們來獲取屏幕的可用高和寬度，代碼如下：

<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

注意:根據屏幕的不同顯示值不同。

getAttribute()方法

通過元素節點的屬性名稱獲取屬性的值。

語法：

elementNode.getAttribute(name)

說明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

看看下面的代碼，獲取h1標籤的屬性值：

運行結果:

h1標籤的ID ：alink
h1標籤的title ：getAttribute()獲取標籤的屬值

setAttribute()方法

setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

注意：

1.把指定的屬性設置爲指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。

2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。

節點屬性

在文檔對象模型 (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

訪問子結點childNodes

訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。

語法：

elementNode.childNodes

注意：

如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

我們來看看下面的代碼:

運行結果:

IE:

  UL子節點個數:3
  節點類型:1

其它瀏覽器:

   UL子節點個數:7
   節點類型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問題

2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是一樣的）

  UL子節點個數:3
  節點類型:1

訪問子結點的第一和最後項

一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.firstChild

說明：與elementNode.childNodes[0]是同樣的效果。 

二、 lastChild 屬性返回‘childNodes’數組的最後一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。 

注意: 上一節中，我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。 (以後章節講解)

訪問父節點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等瀏覽器標籤之間的空白也算是一個文本節點。

訪問兄弟節點

1. nextSibling 屬性可返回某個節點之後緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.nextSibling

說明：如果無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.previousSibling  

說明：如果無此節點，則該屬性返回 null。

注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:

判斷節點nodeType是否爲1, 如是爲元素節點，跳過。

運行結果:

LI = javascript
nextsibling: LI = jquery

 

插入節點appendChild()

在指定節點的最後一個子節點列表之後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

我們來看看，div標籤內創建一個新的 P 標籤，代碼如下:

運行結果:

HTML
JavaScript
This is a new p

插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

我們在來看看下面代碼，在指定節點前插入節點。

運行結果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也可以改爲:  otest.insertBefore(newnode,otest.childNodes[0]); 

刪除節點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。

注意: 

1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。 

2. newnode 必須先被建立。 

創建元素節點createElement

createElement()方法可創建元素節點。此方法可返回一個 Element 對象。

語法：

document.createElement(tagName)

參數:

tagName：字符串值，這個字符串用來指明創建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。

我們來創建一個按鈕，代碼如下：

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

效果：在HTML文檔中，創建一個按鈕。

我們也可以使用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文檔中，創建一個文本框，使用setAttribute設置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。

創建文本節點createTextNode

createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。

語法：

document.createTextNode(data)

參數：

data : 字符串值，可規定此節點的文本。

我們來創建一個<div>元素並向其中添加一條消息，代碼如下：

運行結果:

 

瀏覽器窗口可視區域大小

獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:

一、對於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

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

offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。

一、值

offsetHeight = clientHeight + 滾動條 + 邊框。

二、瀏覽器兼容性

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

網頁捲去的距離與偏移量

我們先來看看下面的圖：

scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。

scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。

offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 。

offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置 。

注意:

1. 區分大小寫

2. offsetParent：佈局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。