javascript 基礎(chǔ)篇4 window對(duì)象，DOM
| closed | 獲取引用窗口是否已關(guān)閉。 |
| defaultStatus | 設(shè)置或獲取要在窗口底部的狀態(tài)欄上顯示的缺省信息。 |
| dialogArguments | 設(shè)置或獲取傳遞給模式對(duì)話框窗口的變量或變量數(shù)組。 |
| dialogHeight | 設(shè)置或獲取模式對(duì)話框的高度。 |
| dialogLeft | 設(shè)置或獲取模式對(duì)話框的左坐標(biāo)。 |
| dialogTop | 設(shè)置或獲取模式對(duì)話框的頂坐標(biāo)。 |
| dialogWidth | 設(shè)置或獲取模式對(duì)話框的寬度。 |
| frameElement | 獲取在父文檔中生成 window 的 frame或 iframe 對(duì)象。 |
| length | 設(shè)置或獲取集合中對(duì)象的數(shù)目。 |
| name | 設(shè)置或獲取表明窗口名稱的值。 |
| offscreenBuffering | 設(shè)置或獲取對(duì)象在對(duì)用戶可見之前是否要先在屏幕外繪制。 |
| opener | 設(shè)置或獲取創(chuàng)建當(dāng)前窗口的窗口的引用。 |
| parent | 獲取對(duì)象層次中的父窗口。 |
| returnValue | 設(shè)置或獲取從模式對(duì)話框返回的值。 |
| screenLeft | 獲取瀏覽器客戶區(qū)左上角相對(duì)于屏幕左上角的 x 坐標(biāo)。 |
| screenTop | 獲取瀏覽器客戶區(qū)左上角相對(duì)于屏幕左上角的 y 坐標(biāo)。 |
| self | 獲取對(duì)當(dāng)前窗口或框架的引用。 |
| status | 設(shè)置或獲取位于窗口底部狀態(tài)欄的信息。 |
| top | 獲取最頂層的祖先窗口。 |
其中body 元素將作為下列 window 對(duì)象事件的宿主：onblur, onbeforeunload, onfocus, onload 和 onunload。
下面用一下window做一個(gè)頁(yè)面離開時(shí)的提示：
我們一般會(huì)有離開頁(yè)面時(shí)的提示。比如是否確認(rèn)離開等，其實(shí)只要在body結(jié)點(diǎn)加一句就好：
<body onbeforeunload="return 'Are you exiting?'">
這樣的話離開的時(shí)候就會(huì)有提示。
這個(gè)例子中，我們注意3點(diǎn)：
必須寫return ‘xxxxx' 分號(hào)有沒有都可以，如果只寫字符串，是沒有提示的。
之前強(qiáng)調(diào)過的問題，因?yàn)閛nbeforeunload事件后面已經(jīng)有雙引號(hào)，所以return必須是單引號(hào)括起來(lái)。
這句話對(duì)FF ，chrome，IE均有效，其中chrome和IE的觸發(fā)機(jī)制是相同的，現(xiàn)象是：在確認(rèn)欄寫出返回字符串。我猜想的過程應(yīng)該是這樣的：用戶點(diǎn)擊關(guān)閉按鈕，觸發(fā)onbeforeunload對(duì)象，此時(shí)如果onbeforeunload對(duì)象返回值是一個(gè)字符串，那么就會(huì)向上出發(fā)警告，并顯示字符串。但是FF不一樣，只顯示默認(rèn)警告。
在chrome有如下提示：
返回的句子出現(xiàn)在導(dǎo)航的上方，跟IE的效果一樣(如果IE沒有顯示，點(diǎn)一下允許運(yùn)行腳本就好了。)。
如果是FF，則只出現(xiàn)上層的提示，跟我們寫的那句話無(wú)關(guān)，盡管如此，我們還是要寫，否則FF就沒有提示了。
所以如果我們想要讓它的確認(rèn)框出現(xiàn)我們自己的東西，我嘗試了許多次，發(fā)現(xiàn)FF無(wú)法做到用別的對(duì)話框代替它的默認(rèn)框，所以我們只能默默的添加一個(gè)confirm，但是這樣的話FF會(huì)有兩次提示。IE和chrome都會(huì)在離開提示里輸入函數(shù)的返回字符串，這一點(diǎn)還是不錯(cuò)的，以下是經(jīng)過一樓的反饋后修改過的代碼。
經(jīng)過測(cè)試，這段代碼在chrome 16.0.912.0中只顯示一次提示，但在某些基于chrome的瀏覽器（如sunchrome）中會(huì)出現(xiàn)FF和chrome雙重提示，我猜想是因?yàn)檫@些瀏覽器包含了其它內(nèi)核，具體怎么回事就不太懂了。
總之，就全的那個(gè)聯(lián)系吧~哎~
<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)"http://如果返回字符串， 就會(huì)提示是否留在頁(yè)面
// 如果沒有這個(gè)節(jié)點(diǎn)，會(huì)顯示Chrome的提示框
</script>
<script type="text/javascript" >
function closing(){
var res=confirm("Are you exiting?(FF)"); //這個(gè)會(huì)在FF顯示
return "Are you exiting?(chrome)"; //這個(gè)會(huì)在Chrome顯示
}
</script>
</head>
<body onbeforeunload="return closing();">
testing
</body>
</html>
那個(gè)方法一的意思是：如果在這里寫了這個(gè)節(jié)點(diǎn)，那么IE運(yùn)行的時(shí)候就會(huì)運(yùn)行這個(gè)部分的代碼，但是如果沒有這個(gè)節(jié)點(diǎn)，那么這段代碼在FF和chrome正常，但是在IE里，會(huì)出現(xiàn)兩個(gè)提示都出現(xiàn)的情況，這是因?yàn)樗葧?huì)執(zhí)行window.confirm這句，也會(huì)返回chrome那句。
以下是上面代碼在各瀏覽器的測(cè)試：
哈哈，怎么樣，不錯(cuò)吧~
好，接下在就是萬(wàn)眾期待(其實(shí)只有LZ期待吧= =+)的DOM
DOM的全稱是document object model，怎么理解這個(gè)東西挺關(guān)鍵的，我看了不少定義，有的說(shuō)它是個(gè)平臺(tái)，有的說(shuō)它是個(gè)接口，anyway，我打開了它的官方guide網(wǎng)站：http://www.w3.org/DOM/
它對(duì)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.
我來(lái)簡(jiǎn)單翻譯下好了：DOM是個(gè)平臺(tái)/語(yǔ)言的中間接口，它可以允許程序和腳本動(dòng)態(tài)的訪問和更新內(nèi)容、架構(gòu)以及文件style。文件可以被進(jìn)一步處理并將結(jié)果返回到顯示頁(yè)面。
其實(shí)這么說(shuō)我看了也還是云里霧里，所以可以這么理解，DOM是個(gè)大家為了編程方便，傳輸速度快而統(tǒng)一起來(lái)的，基于樹規(guī)范，它跟瀏覽器是沒有關(guān)系的。DOM的基本思想就是樹形結(jié)構(gòu)，比如HTML文件，就是一個(gè)樹形結(jié)構(gòu)。DOM是沒有跟任何語(yǔ)言綁定的，我們利用js可以對(duì)html dom進(jìn)行動(dòng)態(tài)的修改。
DOM有三個(gè)級(jí)別，可以分為:core Dom, XML DOM(*), HTML DOM三部分。中間那個(gè)是作為文檔傳輸標(biāo)準(zhǔn)，使用很廣泛的，但是這里就著重講HTML DOM。
DOM把文檔分為帶有：元素、屬性、文本 的樹形結(jié)構(gòu)，然后將這些作為結(jié)點(diǎn)來(lái)構(gòu)造文檔的樹形結(jié)構(gòu)，這樣，就可以通過一個(gè)結(jié)點(diǎn)訪問到所有的結(jié)點(diǎn)。
之前給出的那個(gè)網(wǎng)站（http://www.dbjr.com.cn/w3school/js/jsref_obj_string.htm）里面有比較全的DOM的玩意兒，可以用來(lái)參考，但是用來(lái)做教程還是有點(diǎn)生硬。
我打算先介紹節(jié)點(diǎn)類型，然后再對(duì)應(yīng)到代碼里。
節(jié)點(diǎn)類型介紹(復(fù)制來(lái)自http://www.dbjr.com.cn/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 |
好，大約知道了這些之后，我們用一個(gè)小的html文件來(lái)查看DOM的樹形結(jié)構(gòu)：
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>
樹形結(jié)構(gòu)解析
PS：理論上br不是個(gè)節(jié)點(diǎn)，但我不確定，希望知道的人告訴我下~。
1.文件始終是根節(jié)點(diǎn)，獲得document節(jié)點(diǎn)可以直接使用document.documentElement或者document.body來(lái)獲得。
2.script也是節(jié)點(diǎn)，凡是<>里面的，都是節(jié)點(diǎn)，包括注釋。
3.節(jié)點(diǎn)的名字，也就是類似hear title這些，是節(jié)點(diǎn)的tagName。
對(duì)于一個(gè)從一個(gè)結(jié)點(diǎn)獲取別的節(jié)點(diǎn)的方法，無(wú)非是向上，向下，或者平行三個(gè)方向，具體可以查看上面給出的網(wǎng)站中DOM Node對(duì)象的屬性和方法，我就不一一列舉了。（上面的很些東西在IE里是不可用的，具體要在測(cè)試后考慮如何使用。）
大概看了DOM中節(jié)點(diǎn)的各個(gè)方法后，我們做一個(gè)小的應(yīng)用：
用戶點(diǎn)擊時(shí)，可以添加打開或者閉合子選項(xiàng)。
<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>
各瀏覽器測(cè)試無(wú)誤。
當(dāng)然，這個(gè)效果可以通過很多方法實(shí)現(xiàn)，這個(gè)只是為了學(xué)習(xí)如果通過DOM控制NODE。
補(bǔ)充一點(diǎn)：結(jié)點(diǎn)除了可以添加刪除等外，還可以克隆，函數(shù)就是cloneNode，除了可以setAttribute外，也可以附件事件，比如這個(gè)結(jié)點(diǎn)有onclick之類的事件，可以使用addEvent這個(gè)函數(shù)來(lái)實(shí)現(xiàn)。具體我就不再寫了，道理都是一樣的~。
- javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）
- jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
- javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？
- javascript 刪除dom對(duì)象的事件函數(shù)代碼
- JS獲取dom 對(duì)象 ajax操作 讀寫cookie函數(shù)
- js對(duì)象關(guān)系圖 方便dom操作
- JavaScript讓IE瀏覽器event對(duì)象符合W3C DOM標(biāo)準(zhǔn)
- JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
相關(guān)文章
Javascript 按位與賦值運(yùn)算符 (&=)使用介紹
這篇文章主要介紹了Javascript 按位與賦值運(yùn)算符 (&=)的相關(guān)資料,需要的朋友可以參考下2014-02-02
簡(jiǎn)單明了區(qū)分escape、encodeURI和encodeURIComponent
這篇文章主要介紹了escape、encodeURI和encodeURIComponent的區(qū)別，需要的朋友可以參考下2018-05-05
大家在很多場(chǎng)合也許會(huì)遇到判斷頁(yè)面是否有元素選中，下面介紹的是利用js判斷是否選中CheckBox的方法2012-11-11
網(wǎng)頁(yè)中CDATA標(biāo)記的說(shuō)明
經(jīng)常在網(wǎng)頁(yè)html代碼中看見這樣的嵌入標(biāo)簽，但實(shí)際使用沒有用過，特此在記錄下。2010-09-09
js中&& 和 ||運(yùn)算符經(jīng)常用到，但也好混淆，下面是對(duì)自己的使用坐下記錄,需要的朋友可以參考下2014-08-08
JavaScript基本概念初級(jí)講解論壇貼的學(xué)習(xí)記錄
JavaScript基本概念 論壇貼建議大家看下，都是一些js的高級(jí)的技巧知識(shí)小結(jié)。2009-02-02
JavaScrip關(guān)于創(chuàng)建常量的知識(shí)點(diǎn)
這篇文章主要介紹了JavaScrip創(chuàng)建常量的相關(guān)知識(shí)點(diǎn)，幫助大家對(duì)JS更加深入的學(xué)習(xí)，參考下吧。2017-12-12
這篇文章主要介紹了JavaScript 事件對(duì)象介紹,需要的朋友可以參考下2015-04-04
js對(duì)象關(guān)系圖 方便dom操作，需要的朋友可以參考下。都是常用的一些屬性。2012-03-03
事件是DOM（文檔對(duì)象模型）的一部分。事件流就是事件發(fā)生順序，這是IE和其他瀏覽器在事件支持上的主要差別。2010-01-01