javascript 基礎篇4 window對象，DOM

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

他的屬性也很豐富，因為我很懶，我就直接複製手冊裡的東西了：

closed	擷取引用視窗是否已關閉。
defaultStatus	設定或擷取要在視窗底部的狀態列上顯示的預設資訊。
dialogArguments	設定或擷取傳遞給強制回應對話方塊視窗的變數或變數數組。
dialogHeight	設定或擷取強制回應對話方塊的高度。
dialogLeft	設定或擷取強制回應對話方塊的左座標。
dialogTop	設定或擷取強制回應對話方塊的頂座標。
dialogWidth	設定或擷取強制回應對話方塊的寬度。
frameElement	擷取在父文檔中產生 window 的 frame或 iframe 對象。
length	設定或擷取集合中對象的數目。
name	設定或擷取表明視窗名稱的值。
offscreenBuffering	設定或擷取對象在對使用者可見之前是否要先在螢幕外繪製。
opener	設定或擷取建立當前視窗的視窗的引用。
parent	擷取對象層次中的父視窗。
returnValue	設定或擷取從強制回應對話方塊返回的值。
screenLeft	擷取瀏覽器客戶區左上方相對於螢幕左上方的 x 座標。
screenTop	擷取瀏覽器客戶區左上方相對於螢幕左上方的 y 座標。
self	擷取對當前視窗或架構的引用。
status	設定或擷取位於視窗底部狀態列的資訊。
top	擷取最頂層的祖先視窗。

這些僅僅是window的屬性，他還有更多的事件和方法，我就不複製了，也沒什麼意義，這裡重點強調這個類，讓你想實現某個效果卻無從下手的時候，想想我們可愛的window類，它很可能就帶有你想要的功能呢。

其中body 元素將作為下列 window 對象事件的宿主：onblur, onbeforeunload, onfocus, onload 和 onunload。

下面用一下window做一個頁面離開時的提示：

我們一般會有離開頁面時的提示。比如是否確認離開等，其實只要在body結點加一句就好：

<body onbeforeunload="return 'Are you exiting?'">
這樣的話離開的時候就會有提示。

這個例子中，我們注意3點：

必須寫return ‘xxxxx' 分號有沒有都可以，如果唯寫字串，是沒有提示的。
之前強調過的問題，因為onbeforeunload事件後面已經有雙引號，所以return必須是單引號括起來。
這句話對FF ，chrome，IE均有效，其中chrome和IE的觸發機制是相同的，現象是：在確認欄寫出返回字串。我猜想的過程應該是這樣的：使用者點擊關閉按鈕，觸發onbeforeunload對象，此時如果onbeforeunload對象傳回值是一個字串，那麼就會向上出發警告，並顯示字串。但是FF不一樣，只顯示預設警告。

在chrome有如下提示：

返回的句子出現在導航的上方，跟IE的效果一樣(如果IE沒有顯示，點一下允許運行指令碼就好了。)。
如果是FF，則只出現上層的提示，跟我們寫的那句話無關，儘管如此，我們還是要寫，否則FF就沒有提示了。

所以如果我們想要讓它的確認框出現我們自己的東西，我嘗試了許多次，發現FF無法做到用別的對話方塊代替它的預設框，所以我們只能默默的添加一個confirm，但是這樣的話FF會有兩次提示。IE和chrome都會在離開提示裡輸入函數的返回字串，這一點還是不錯的，以下是經過一樓的反饋後修改過的代碼。

經過測試，這段代碼在chrome 16.0.912.0中只顯示一次提示，但在某些基於chrome的瀏覽器（如sunchrome）中會出現FF和chrome雙重提示，我猜想是因為這些瀏覽器包含了其它核心，具體怎麼回事就不太懂了。

總之，就全的那個聯絡吧~哎~

複製代碼代碼如下:<html>
<head>
<title>testing</title>
<script type="text/javascript" src="js/output.js"></script>
<script language="javascript" for ="window" EVENT ="onbeforeunload">//for IE
return "Sure to exit?(IE)"//如果返回字串，就會提示是否留在頁面
// 如果沒有這個節點，會顯示Chrome的提示框
</script>
<script type="text/javascript" >
function closing(){
var res=confirm("Are you exiting?(FF)"); //這個會在FF顯示
return "Are you exiting?(chrome)"; //這個會在Chrome顯示
}
</script>
</head>
<body onbeforeunload="return closing();">
testing
</body>
</html>

那個方法一的意思是：如果在這裡寫了這個節點，那麼IE啟動並執行時候就會運行這個部分的代碼，但是如果沒有這個節點，那麼這段代碼在FF和chrome正常，但是在IE裡，會出現兩個提示都出現的情況，這是因為它既會執行window.confirm這句，也會返回chrome那句。

以下是上面代碼在各瀏覽器的測試：

哈哈，怎麼樣，不錯吧~
好，接下在就是萬眾期待(其實只有LZ期待吧= =+)的DOM

DOM的全稱是document object model，怎麼理解這個東西挺關鍵的，我看了不少定義，有的說它是個平台，有的說它是個介面，anyway，我開啟了它的官方guide網站：http://www.w3.org/DOM/

它對DOM的定義是：

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

我來簡單翻譯下好了：DOM是個平台/語言的中間介面，它可以允許程式和指令碼動態訪問和更新內容、架構以及檔案style。檔案可以被進一步處理並將結果返回到顯示頁面。

其實這麼說我看了也還是雲裡霧裡，所以可以這麼理解，DOM是個大家為了編程方便，傳輸速度快而統一起來的，基於樹規範，它跟瀏覽器是沒有關係的。DOM的基本思想就是樹形結構，比如HTML檔案，就是一個樹形結構。DOM是沒有跟任何語言綁定的，我們利用js可以對html dom進行動態修改。

DOM有三個層級，可以分為:core Dom, XML DOM(*), HTML DOM三部分。中間那個是作為文檔傳輸通訊協定，使用很廣泛的，但是這裡就著重講HTML DOM。

DOM把文檔分為帶有：元素、屬性、文本的樹形結構，然後將這些作為結點來構造文檔的樹形結構，這樣，就可以通過一個結點訪問到所有的結點。

之前給出的那個網站（http://www.jb51.net/w3school/js/jsref_obj_string.htm）裡面有比較全的DOM的玩意兒，可以用來參考，但是用來做教程還是有點生硬。

我打算先介紹節點類型，然後再對應到代碼裡。

節點類型介紹(複製來自http://www.jb51.net/w3schools/jsref/dom_obj_node.htm)

Node type	Description	Children	Value	Constant
Element	Represents an element	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference	1	ELEMENT_NODE
Attr	Represents an attribute	Text, EntityReference	2	ATTRIBUTE_NODE
Text	Represents textual content in an element or attribute	None	3	TEXT_NODE
CDATASection	Represents a CDATA section in a document (text that will NOT be parsed by a parser)	None	4	CDATA_SECTION_NODE
EntityReference	Represents an entity reference	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	5	ENTITY_REFERENCE_NODE
Entity	Represents an entity	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	6	ENTITY_NODE
ProcessingInstruction	Represents a processing instruction	None	7	PROCESSING_INSTRUCTION_NODE
Comment	Represents a comment	None	8	COMMENT_NODE
Document	Represents the entire document (the root-node of the DOM tree)	Element, ProcessingInstruction, Comment, DocumentType	9	DOCUMENT_NODE
DocumentType	Provides an interface to the entities defined for the document	None	10	DOCUMENT_TYPE_NODE
DocumentFragment	Represents a "lightweight" Document object, which can hold a portion of a document	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference	11	DOCUMENT_FRAGMENT_NODE
Notation	Represents a notation declared in the DTD	None	12	NOTATION_NODE

好，大約知道了這些之後，我們用一個小的html檔案來查看DOM的樹形結構：
HTML文本

複製代碼代碼如下:<html>
<head>
<title>DOMcheck</title>
</head>
<body>
<a herf="#">click here</a>
<br>
<input type="test" id="in"></input>
<input type="button" id="but" value="here~"></input>
<body>
</html>

樹形結構解析

PS：理論上br不是個節點，但我不確定，希望知道的人告訴我下~。
1.檔案始終是根節點，獲得document節點可以直接使用document.documentElement或者document.body來獲得。
2.script也是節點，凡是<>裡面的，都是節點，包括注釋。
3.節點的名字，也就是類似hear title這些，是節點的tagName。
對於一個從一個結點擷取別的節點的方法，無非是向上，向下，或者平行三個方向，具體可以查看上面給出的網站中DOM Node對象的屬性和方法，我就不一一列舉了。（上面的很些東西在IE裡是停用，具體要在測試後考慮如何使用。）
大概看了DOM中節點的各個方法後，我們做一個小的應用：
使用者點擊時，可以添加開啟或者閉合子選項。複製代碼代碼如下:<html>
<head>
<title>DOM check</title>
<script type="text/javascript" >
var ifopen=false;
function get(element){
return document.getElementById(element);
}
function crea(element){
return document.createElement(element);
}
function openlist(){
var titl=get("chapter1");
if(get("sub1")==null){
var s=crea("span")
s.setAttribute("id","sub1");
}
else
s=get("sub1");
ifopen=!ifopen;
if(ifopen){ // 沒開啟的話
s.innerHTML="<br><a href='#L1' >list1</a>"+
"<br><a href='#L2' >list2</a>"+"<br><a href='#L3' >list3</a>";
titl.appendChild(s);
}else{
var de= document.getElementById("sub1");
de.parentNode.removeChild(de) ;
}
}
</script>
</head>
<body >
<span id="chapter1">
<a href="#" id="chaptername1" onclick="openlist()">chapter 1</a>
</span>
<br><br><br><br>
<span name="L1">
<p>babababababbabbaba</p>
</span>
<span name="L2">
<p>babababababbabbaba</p>
</span>
<span name="L3">
<p>babababababbabbaba</p>
</span>
<body>
</html>

各瀏覽器測試無誤。

當然，這個效果可以通過很多方法實現，這個只是為了學習如果通過DOM控制NODE。

補充一點：結點除了可以添加刪除等外，還可以複製，函數就是cloneNode，除了可以setAttribute外，也可以附件事件，比如這個結點有onclick之類的事件，可以使用addEvent這個函數來實現。具體我就不再寫了，道理都是一樣的~。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More