<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DOM演示1_文檔對象模型_概述</title>
</head>
<body>
<h1>DOM演示1_文檔對象模型_概述</h1>
<script type="text/javascript" src="a.js"> </script>
<script type="text/javascript">
/*
* DOM演示1_文檔對象模型
* Document object model
* 將標記型文檔(如html、xml)封閉成對象
* 包括里面的標簽、屬性、屬性值、標簽中的數(shù)據(jù)等！
* 將標記型文檔按標簽層次關(guān)系，形成樹狀結(jié)構(gòu)，即DOM樹
* 標簽、文本、屬性都是結(jié)點（又稱對象）
* 標簽常稱為元素！
* 目的是為了更好的操作它們
* DOM解析方式：
* 優(yōu)點：可以對樹中任意的結(jié)點進行增刪改查
* 缺點：必須將整個文檔加載進內(nèi)存！
* 如果文檔體積大，會浪費內(nèi)存，甚至溢出！
* 標記型文檔：民間還有另種解析方式：SAX解析
* SAX解析是事件驅(qū)動，標簽開始標簽結(jié)束事件
* 雖然不是w3c標準，但是獲取數(shù)據(jù)速度快！
* 缺點：不能對數(shù)據(jù)增刪改，只能查
* DOM模型有3種：
* DOM LEVEL 1:將html封裝成對象
* DOM LEVEL 2:新增解析名稱空間(如同Java中的包)
* DOM LEVEL 1:將xml封裝成對象
* Java內(nèi)置解析：dom4j,jaxp(這些以后javaweb會學(xué)到)
* DHTML概述：不是一門語言，而是多項技術(shù)結(jié)合
* 包括：html css javascript
* 角色分配：
* html:用標簽對數(shù)據(jù)進行封裝
* css:對標簽中的數(shù)據(jù)定義樣式
* javascript:對對象進行邏輯操作！
* 其實DHTML+XMLhttpRequest=AJAX
* BOM模型：brower object model
* 瀏覽器對象模型！其實就是window對象！
*/
</script>
<script type="text/javascript">
//演示窗口事件
onload=function(){
//alert("window onload");
window.status="加載完畢嘍~"
//此事件可彈出廣告！
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
onbeforeunload=function(){
alert("window onbeforeunload");//窗口消失前（未消失）
}
onunload=function(){
alert("window onunload");//窗口已消失
}
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_2()"/>
<script type="text/javascript">
//setTimeout("close()",2000);
//2秒后自動關(guān)閉，只在新開窗口有效，如果是當前頁面會提示是否關(guān)閉
function Window_Demo_2(){
//打開open廣告
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
//放到外面，即script標簽之中，頁面一加載，就直接彈出來了
//open("","_blank","height=300,width=100,status=yes,toolbar=yes,menubar=yes,location=yes");
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_2()"/>
<script type="text/javascript">
function Window_Demo_1(){
for (var i=0; i < 10; i++) {
//moveBy(10,10);//每次移動10（左邊和頂邊）
//moveTo(500,400);//移動到指定坐標位置
}
for (var i=0; i < 10; i++) {
//仿抖動
moveBy(10,0);
moveBy(0,10);
moveBy(-10,0);
moveBy(0,-10);
}
}
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_1()"/>
<script type="text/javascript">
function Window_stop(){
clearInterval(iIntervalID);
}
</script>
<input type="button" value="Window_stop" onclick="Window_stop()"/>
<script type="text/javascript">
function Window_onfirm(){
setTimeout("alert('hei hei !')",2000);
iIntervalID=setInterval("alert('again !')",2000);//這里面不能使用var，應(yīng)該全局變量
window.alert("hello world");
alert("hello world");
var bRetrun=confirm("消息...");
alert("bRetrun="+bRetrun);//true and false
}
</script>
<input type="button" value="Window_onfirm" onclick="Window_onfirm()"/>
<script type="text/javascript">
function locationDemo_1(){
alert(location.protocol);//返回 file:
alert(location.href);
//返回 file:///E:/javase/html/DOM_demo_1.html
//下面給href賦值
location.href="http://www.baidu.com";
//觸發(fā)后會自動跳轉(zhuǎn)！
}
</script>
<input type="button" value="locationDemo_1" onclick="locationDemo_1()"/>
<input type="button" value="演示1_點擊我" onclick="alert('響應(yīng)點擊事件！')"/>
<input type="button" value="演示2_點擊我" onclick="windowDemo_1()"/>
<input type="button" value="演示3_前進" onclick="windowDemo_forward_2()"/>
<input type="button" value="演示4_后退" onclick="windowDemo_back_3()"/>
<input type="button" value="演示5_go" onclick="windowDemo_go_4()"/>
<a href="http://www.baidu.com">baidu.com</a>
如果JS代碼是給某個組件使用的，放在它周圍就OK了
如果JS代碼是給整個頁面使用的，放在HEAD里面，因為先加載！
<script type="text/javascript">
function windowDemo_go_4(){
//window.history.go(-1);//相當于back();
//window.history.go(1);//相當于forward();
window.history.go(1);
}
</script>
<script type="text/javascript">
function windowDemo_back_3(){
window.history.back();
}
</script>
<script type="text/javascript">
function windowDemo_forward_2(){
window.history.forward();
}
</script>
<script type="text/javascript">
function windowDemo_1(){
alert("響應(yīng)點擊事件！");
alert(window.navigator.appName);
alert(window.navigator.appVersion);
//window對象一開瀏覽器就存在，不需要寫！
alert(navigator.appName);
alert(navigator.appVersion);
}
</script>
* window 對象
代表瀏覽器中一個打開的窗口。
成員表
下面的表格列出了 window 對象引出的成員。
屬性
屬性 描述
closed 獲取引用窗口是否已關(guān)閉。
defaultStatus 設(shè)置或獲取要在窗口底部的狀態(tài)欄上顯示的缺省信息。
dialogArguments 設(shè)置或獲取傳遞給模式對話框窗口的變量或變量數(shù)組。
dialogHeight 設(shè)置或獲取模式對話框的高度。
dialogLeft 設(shè)置或獲取模式對話框的左坐標。
dialogTop 設(shè)置或獲取模式對話框的頂坐標。
dialogWidth 設(shè)置或獲取模式對話框的寬度。
frameElement 獲取在父文檔中生成 window 的 frame 或 iframe 對象。
length 設(shè)置或獲取集合中對象的數(shù)目。
name 設(shè)置或獲取表明窗口名稱的值。
offscreenBuffering 設(shè)置或獲取對象在對用戶可見之前是否要先在屏幕外繪制。
opener 設(shè)置或獲取創(chuàng)建當前窗口的窗口的引用。
parent 獲取對象層次中的父窗口。
returnValue 設(shè)置或獲取從模式對話框返回的值。
screenLeft 獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 x 坐標。
screenTop 獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 y 坐標。
self 獲取對當前窗口或框架的引用。
status 設(shè)置或獲取位于窗口底部狀態(tài)欄的信息。
top 獲取最頂層的祖先窗口。
屬性
集合
集合 描述
frames 獲取給定文檔定義或與給定窗口關(guān)聯(lián)的文檔定義的所有 window 對象的集合。
事件
事件 描述
onactivate 當對象設(shè)置為活動元素時觸發(fā)。
onafterprint 對象所關(guān)聯(lián)的文檔打印或打印預(yù)覽后立即在對象上觸發(fā)。
onbeforedeactivate 在 activeElement 從當前對象變?yōu)楦肝臋n其它對象之前立即觸發(fā)。
onbeforeprint 對象的關(guān)聯(lián)文檔打印或打印預(yù)覽前在對象上觸發(fā)。
onbeforeunload 在頁面將要被卸載前觸發(fā)。
onblur 在對象失去輸入焦點時觸發(fā)。
oncontrolselect 當用戶將要對該對象制作一個控件選中區(qū)時觸發(fā)。
ondeactivate 當 activeElement 從當前對象變?yōu)楦肝臋n其它對象時觸發(fā)。
onerror 當對象裝載過程中發(fā)生錯誤時觸發(fā)。
onfocus 當對象獲得焦點時觸發(fā)。
onhelp 當用戶在瀏覽器為當前窗口時按 F1 鍵時觸發(fā)。
onload 在瀏覽器完成對象的裝載后立即觸發(fā)。
onmove 當對象移動時觸發(fā)。
onmoveend 當對象停止移動時觸發(fā)。
onmovestart 當對象開始移動時觸發(fā)。
onresize 當對象的大小將要改變時觸發(fā)。
onresizeend 當用戶更改完控件選中區(qū)中對象的尺寸時觸發(fā)。
onresizestart 當用戶開始更改控件選中區(qū)中對象的尺寸時觸發(fā)。
onscroll 當用戶滾動對象的滾動條時觸發(fā)。
onunload 在對象卸載前立即觸發(fā)。
方法
方法 描述
alert 顯示包含由應(yīng)用程序自定義消息的對話框。
attachEvent 將指定函數(shù)綁定到事件，以便每當該事件在對象上觸發(fā)時都調(diào)用該函數(shù)。
blur 使元素失去焦點并觸發(fā) onblur 事件。
clearInterval 使用 setInterval 方法取消先前開始的間隔事件。
clearTimeout 取消先前用 setTimeout 方法設(shè)置的超時事件。
close 關(guān)閉當前瀏覽器窗口或 HTML 應(yīng)用程序(HTA)。
confirm 顯示一個確認對話框，其中包含一個可選的消息和確定取消按鈕。
createPopup 創(chuàng)建彈出窗口。
detachEvent 從事件中取消指定函數(shù)的綁定，這樣當事件觸發(fā)時函數(shù)就不會收到通知了。
execScript 以給定語言執(zhí)行指定的腳本。
focus 使得元素得到焦點并執(zhí)行由 onfocus 事件指定的代碼。
moveBy 將窗口的位置移動指定 x 和 y 偏移值。
moveTo 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。
navigate 在當前窗口中裝入指定 URL。
open 打開新窗口并裝入給定 URL 的文檔。
print 打印與窗口關(guān)聯(lián)的文檔。
prompt 顯示一個提示對話框，其中帶有一條消息和一個輸入框。
resizeBy 更改窗口的當前位置縮放指定的 x 和 y 偏移量。
resizeTo 將窗口的大小更改為指定的寬度和高度值。
scroll 將窗口滾動到自左上角起指定的 x 和 y 偏移量。
scrollBy 將窗口滾動 x 和 y 偏移量。
scrollTo 將窗口滾動到指定的 x 和 y 偏移量。
setActive 設(shè)置對象為當前對象而不將對象置為焦點。
setInterval 每經(jīng)過指定毫秒值后計算一個表達式。
setTimeout 經(jīng)過指定毫秒值后計算一個表達式。
showHelp 顯示幫助文件。此方法可用于 Microsoft HTML 幫助。
showModalDialog 創(chuàng)建一個顯示指定 HTML 文檔的模式對話框。
showModelessDialog 創(chuàng)建一個顯示指定 HTML 文檔的非模式對話框。
對象
對象 描述
clientInformation 包含關(guān)于 Web 瀏覽器的信息。
clipboardData 提供了對于預(yù)定義的剪貼板格式的訪問，以便在編輯操作中使用。
document 代表給定瀏覽器窗口中的 HTML 文檔。
event 代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標位置和鼠標按鈕狀態(tài)。
external 允許訪問由 Microsoft Internet Explorer
瀏覽器組件宿主應(yīng)用程序提供的附加對象模型。
history 包含了用戶已瀏覽的 URL 的信息。
location 包含關(guān)于當前 URL 的信息。
navigator 包含關(guān)于 Web 瀏覽器的信息。
screen 包含關(guān)于客戶屏幕和渲染能力的信息。
注釋
你可以使用 window 對象獲取關(guān)于窗口狀態(tài)的信息。
你還可以使用此對象或的對窗口文檔、窗口中發(fā)生的事件和影響窗口的瀏覽器的訪問。
典型情況下，瀏覽器會在其打開一個 HTML 文檔時創(chuàng)建一個對應(yīng)的 window 對象。
但是，如果一個文檔定義了一個或多個框架(即，包含一個或多個 frame 或 iframe 標簽)，
瀏覽器就會為原始文檔創(chuàng)建一個 window 對象，再為每個框架創(chuàng)建額外的 window 對象。
這些額外的對象是原始窗口的 子窗口，可能被原始窗口中發(fā)生的事件所影響。
例如，關(guān)閉原始窗口將導(dǎo)致關(guān)閉全部子窗口。
如果想要創(chuàng)建新窗口(以及對應(yīng)的 window 對象)，
可以使用像 open, showModalDialog 和 showModelessDialog 這樣的方法。
你可以對任何計算AD.HTML廣告頁面代碼
<a href="E:\javase\ework\day26_html\DOM_demo_1.html">轉(zhuǎn)到</a>
<script type="text/javascript">
//setTimeout("close()",2000);
//2秒后自動關(guān)閉，只在新開窗口有效，如果是當前頁面會提示是否關(guān)閉
onunload=function(){
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
setInterval("focus()",1000);//每1秒就獲得一次焦點
</script>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
