PS:雖然自己JS基本語法算是掌握了，但是其實在JS掌握的只是遠遠還不夠，網頁上有太多好看的動態效果都是用JS
做出來的，自己也就僅僅會那么一兩個動態的效果，學的只是皮毛。。。等有空的時候一定要好好的研究那些動態效果
的制作，實在是太炫酷了。。。先開始DOM的基本語法吧。。。等DOM和JQuery的基本語法和用法搞定后就去深入的研究
研究那些動態效果的制作。。。
DOM編程
學習內容
1.DOM簡單介紹
2.DOM解析方式
3.在網頁中使用DOM編程
4.DOM window對象以及Loaction對象的使用...
1.為什么使用DOM編程？DOM編程的使用可以增強界面的動態效果。。起初的時候是沒有DOM編程的...
由於HTML語言以及JS的出現，JS的建立與HTML的建立並非是一個人，那么我們在使用JS操作HTML的時候
就需要一個規定，規定JS如何去操作HTML文檔，因此W3School為此制定了規范，同時W3school也制定了
一套XML的DOM編程的規范。。。。
DOM的解析方式：
/*dom解析將按照標簽的層次關系體現出標簽的所屬，形成一個樹狀結構-DOM樹
樹中標簽以及文本甚至屬性稱為節點，節點也成對象，標簽通常也成為頁面中的元素*/
將標記型文檔解析一顆DOM樹，並將樹中的內存封裝成對象
好處：可以對樹中的節點進行任意操作，(增刪改查)
缺點：這種解析需要將整個標記型文檔加載進內容，意味着如果標記型文檔的體積很大，會浪費內存空間
另一種解析：SAX，非W3C標准
基於事件驅動的解析，獲取數據的速度很快，但是，不能進行增刪改查
DOM和SAX解析方法的區別：
dom解析方式優點：對文檔的增刪改查比較方便，缺點是占用內存比較大
SAx解析優點：占用內存比較少，缺點是只適合做文檔的讀取，不適合做文檔的增刪改查crud
html：負責提供標簽，對數據進行封裝，目的是便於對標簽中的數據進行解析
簡單說：html是用標簽封裝屬性
css：負責提供樣式屬性，對標簽中的數據進行樣式的定義
簡單說：對數據進行樣式定義
DOM：負責將標簽型文檔以及文檔中所有內容進行解析，並封裝成對象，在對象中定義了更多的屬性和行為，便於對對象進行操作。
簡單說：將文檔和標簽以及其他內容變成對象
JS：負責提供程序設計語言，對頁面中的對象進行邏輯操作。
簡單說：負責頁面的行為定義,也就是頁面的動態效果，所以Js是動態效果的主力編程語言
DHTML + XMLhttpRequest = AJAX 通訊服務端
BOM ， Navigator，History對象
BOM：Browser Object Model：瀏覽器對象模型
這個模型方便於操作瀏覽器
而瀏覽器對應的對象就是window對象，API文檔查看Window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function test()
{
alert("HELLO");
var name=window.navigator.appName;//瀏覽器的名稱
var version=window.navigator.appVersion;//平台版本
document.write(name);
document.write(version);
history.back();//回到上一個界面
}
function goback()
{
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="演示Window" onclick="test()" />
<input type="button" value="back" onclick="goback()" />
</body>
</html>
上面的代碼定義了兩個按鈕來觸發window事件..
1.window對象的使用：
confirm（）；
<script type="text/javascript" language="javascript">
function test()//網頁上用來刪除的對話框
{
var res=window.confirm("刪除");
if(res)
{
window.alert("ok!");
}else
{
window.alert("no");
}
}
</script>
setInterval（"要執行的內容或者函數"，"設置執行的時間"）；
clearInterval（"setInterval的函數名"）；
setTimeout（"要執行的函數或者內容"，"設置執行的時間"）；
clearTimeout（setTimeout的函數名）；
<script language="javascript" type="text/javascript">
var num=0;
function say()
{
if(num==5)
{
clearInterval(say);//終止setInterval的執行...
}else{
window.alert("hello world");
num++;
}
}
function test()
{
setInterval(say,1000);//每隔一秒輸出一次,使用按鈕觸發即可
}
function test1()
{
setTimeout(say1,1000);//設置一個函數，是這個函數在指定的時間后執行,使用按鈕觸發即可..
}
var num1=0;
function say1()
{
if(num1==2)
{
clearTimeout(say1);//終止了setTimeout函數的執行...
}else{
window.alert("你好");
num1++;
}
}
</script>
moveTo（x,y）；
moveBy（x,y）；
resizeto（x,y）；
resizeby（x,y）； -->這幾種方法都可以使用按鈕來觸發完成
<script language="javascript" type="text/javascript">
function test()
{
window.moveTo(100,100);//相對於屏幕的左上角移動100 100像素
}
function test1()
{
window.moveBy(100,100);//相對於當前窗口的左上角移動100 100像素
}
function test2()
{
window.resizeTo(100,100);//把窗口調整為100*100個像素
}
function test3()
{
window.resizeBy(100,100);//把窗口增加100 *100 個像素
}
</script>
來個綜合例子：
<script type="text/javascript">
var timeid;
function windowMethod(){
// var flag = window.confirm("確定退出？");//彈出一個窗口，確定/取消
// alert(flag);
//window.setTimeout("alert('time out run')",4000);//4秒后彈出
timeid = window.setInterval("alert('time out run')",2000);//每兩秒彈出
//關閉，對應的clearInteval
}
//window.open(...);//流氓廣告的原理
function windowopen(){
window.open("Adventor.html","_blank","height=500","width=500","status=yes",
"toolbar=yes","menubar=yes","location=yes");//放外面，不用點直接打開
/* window.open("","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");傳說中的廣告*/
//close();當前窗口，執行close關閉，會有提示，因為當前窗口是你打開，close執行的是，自動打開的窗
}
function windowclose(){
window.close();
}
function Stop(){
clearInterval(timeid);
}
function windowMove(){
// moveBy(10,10);//點一下橫坐標移到10,縱坐標移到10，指的是整個窗口
// moveTo(20,20);//移到指定的坐標點
//resizeBy()調整窗口尺寸
//resizeTo()
/*for(var x = 1;x<50;x++){
moveBy(10,0);
moveBy(0,10);
moveBy(-10,0);
moveBy(0,-10);
}//QQ抖動窗口，就是這個原理，返回一個程序，使對方的窗口執行
*/
// scrollBy(10,10);//將窗口滾動x和y的偏移量
// scrollTo();
}
</script>
<input type="button" value="window方法" onclick="windowMethod()" />
<input type="button" value="窗口移到" onclick="windowMove()" />
<input type="button" value="窗口打開" onclick="windowopen()" />
<input type="button" value="停止" onclick="Stop()" />
2.Location（）對象的使用
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
function WindowLacation(){
//var pro = location.protocol;
var text = location.href;
//alert(text);
//給Location的href屬性設置一個值,並對其值進行解析，如果是http，進行鏈接訪問
location.href = "http://www.sina.com.cn";
}
</script>
<!--定義事件源，注冊事件相關聯的動作-->
<input type="button" value="演示Lacation" onclick="WindowLacation()"/>
</body>
3.DOM的常見事件
<script type="text/javascript">
/*//事件的使用：
//定義好 事件 = 處理方式
onunload = function(){// 對象卸載完觸發 3
alert("onunload run");
}
onload = function(){//瀏覽器打開，對象一加載完觸發 1
alert("onload run");
}
onbeforeunload = function(){
alert("onbeforeunload run");//對象卸載前觸發 2
}*/
onload = function(){
window.status("加載完啦");//狀態欄，狀態欄中的文字，可以使用JS
每隔一秒顯示一個字
}
</script>
來個小的練習：彈出廣告...
<script type="text/javascript">
//演示彈窗，頁面一加載，就執行
//在當前頁面中定義廣告頁面腳本，在onload事件中完成廣告的彈窗
onload = function(){
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
</script>
<body>
<h1>廣告</h1>
<h2>打廣告</h2>
<script type="text/javascript" >
//setTimeout("close()",3000);
onunload = function(){//關掉就彈
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
setInterval("focus()",1000);//focus()，使焦點放在當前廣告窗口，管不了，也不能最小化
</script>
</body>