window對象
- DHTML
- 操作HTML以創(chuàng)造各種動態(tài)視覺效果具壮，是一種瀏覽器端的動態(tài)網(wǎng)頁技術(shù)。
- DHTML的功能：
—> 動態(tài)改變頁面元素。
—> 事件響應(yīng)機制制作動態(tài)折疊的樹形結(jié)構(gòu)和菜單失晴。
—> 與用戶進行交互等靡狞。 - 對象模型：
window
表示瀏覽器中打開的窗口耻警。也是父對象。
1）常用屬性：
①name：窗口名稱甸怕。
②opener：打開當前窗口的window對象（引用）甘穿。
③status：窗口底部狀態(tài)欄信息。
2）常用子對象：
①document：代表給定瀏覽器窗口中的HTML文檔梢杭。
②history：包含了用戶瀏覽過的URL信息温兼。
③location：包含關(guān)于當前URL的信息。
④navigator：包含Web瀏覽器的信息武契。
⑤screen：包含關(guān)于客戶屏幕和渲染能力的信息募判。
⑥event：代表事件狀態(tài)。
3）方法：
—> alert(str) : 提示對話框吝羞，顯示str字符串的內(nèi)容兰伤。
—> confirm(str) ：確認對話框，按確定返回true钧排，其他操作返回false;
—> prompt(str,value)：輸入對話框敦腔。采用文本框輸入信息，str為提示信息恨溜，value為初始值符衔，按“確定”返回輸入值，其他操作返回undefine糟袁，value可省判族。
//使用：var msg = confirm(str); if(msg==true){…}
【注意：window.prompt("請輸入ID：");//因為不能控制它，所以很少用】
—> window.open(url)：重復打開项戴。
—> window.open(url,windowName)：采取命名方式形帮，避免重復打開
—> window.open(url,windowName,config)：config設(shè)置新窗口外觀如高和寬。
windowName: _blank:在新窗口中打開周叮；_self：當前窗口中打開辩撑；_top：當前網(wǎng)頁上部窗口中打開
config: top/left：窗口離屏幕頂部/左邊距離； width/height：窗口寬高仿耽；
menubar/toolbar/scrollbar/status：yes,no窗口有沒有菜單/工具條/滾動條/狀態(tài)欄
—> window.close()：關(guān)閉窗口合冀。
function Wopen(){
var win = window.open("http://www.imooc.com","_blank","width=300,height=200,
menubar=no,toolbar=no,status=no”);
}
周期性定時器
—>window.setInterval(exp,time)：周期性觸發(fā)代碼exp，返回已經(jīng)啟動的定時器项贺。exp：執(zhí)行語句君躺，time：時間周期峭判，單位為毫秒;
【注意：調(diào)用：setInterval("clock()",1000)或setInterval(clock,1000)】
—> window.clearInterval(tObj)：停止啟動的定時器。tObj：啟動的定時器對象棕叫。
一次性定時器
—>window.setTimeout(exp,time)：一次性觸發(fā)代碼exp林螃，返回已經(jīng)啟動的定時器。exp：執(zhí)行語句俺泣，time：時間周期治宣，單位為毫秒。
【注意：調(diào)用自身可無限次循環(huán)】
—> window.clearTimeout(tObj)：停止啟動的定時器砌滞。tObj：啟動的定時器對象。
—> print()：打印當前窗口內(nèi)容
—> focus()：把鍵盤焦點給予一個窗口
—> blur()：把鍵盤焦點從頂層窗口移開
—> moveBy()：可相對窗口的當前坐標把它移動指定的像素
—> moveTo()：把窗口的左上角移動到一個指定的坐標
—> resizeBy()：按照指定的像素調(diào)整窗口的大小
—> resizeTo()：把窗口大小調(diào)整到指定的寬高
—> scrollBy()：按照指定的像素來滾動內(nèi)容
—> scrollTo()：把內(nèi)容滾動到指定坐標
Document對象與DOM
- 概念：
1）每個載入瀏覽器的HTML文檔都會成為Document對象坏怪。
①通過使用Document對象贝润，可以從腳本中對HTML頁面中的所有元素進行訪問（操作文檔中的任何內(nèi)容，都通過Document）铝宵。
②Document對象是window對象的一部分打掘，可通過window.document方式對其進行訪問。
2）DOM：Document Object Model鹏秋，文檔對象模型尊蚁，HTML文檔中的所有節(jié)點組成了一個文檔樹（或節(jié)點樹）。
①樹起始于文檔節(jié)點侣夷，Document對象是一顆文檔樹的根横朋。
②HTML文檔中的每個元素、屬性百拓、文本等都代表這樹中的一個節(jié)點琴锭。
++ write(“str”) 直接向HTML輸出流寫內(nèi)容；是eval的一種形式衙传。eval要盡量避免决帖，是出于安全考慮，因為eval過于強大蓖捶，把可string串當作代碼執(zhí)行地回。若使用不好可千萬安全漏洞。
公有屬性：
—> nodeName：給定節(jié)點的名字(字符串俊鱼，只讀);
—> nodeType：給定節(jié)點的類型(整數(shù)刻像，只讀；元素 1 亭引；屬性 2绎速；文本 3；注釋 8焙蚓；文檔 9)
—> nodeValue：給定節(jié)點的當前值（元素的為underfine或null纹冤；文本的是文本自身洒宝；屬性節(jié)點是屬性的值）
- 根據(jù)元素ID查找節(jié)點
1）方法：document.getElementById(idValue)
2）忽略文檔的結(jié)構(gòu)，通過指定的ID來返回元素節(jié)點萌京。
3）可以查找整個HTML文檔中的任何HTML元素雁歌。
【注意：如果ID值錯誤，則返回null知残】肯梗】 - 根據(jù)層次查找節(jié)點
1）遵循文檔的層次結(jié)構(gòu)，查找單個節(jié)點：parentNode求妹、firstChild乏盐、lastChild、parentNode制恍、nestSibling(下一個子節(jié)點)父能、previousSibling(給定節(jié)點上一個子節(jié)點)
2）遵循文檔的層次結(jié)構(gòu)，查找多個節(jié)點：
childNodes：以s結(jié)尾的都是數(shù)組净神，則有l(wèi)ength屬性何吝。
【注意：節(jié)點之間的空白符，在firefox鹃唯、chrome爱榕、opera蝶念、safari瀏覽器是文本節(jié)點口芍，所以IE是3，其它瀏覽器是7】
如： var sObj=document.getElementById("sell");
alert(sObj.childNodes.length); sObj.firstChild;
- 根據(jù)標簽名稱查找節(jié)點
1）getElementsByTagName("namestr")：在某個節(jié)點的所有后代里查找某種類型的元素（根據(jù)指定的標簽名）诡壁，并返回所有的元素（返回一個節(jié)點列表）八匠。
①忽略文檔的結(jié)構(gòu)絮爷，查找整個HTML文檔中的所有元素。
②如果標簽名錯誤梨树，則返回長度為0的節(jié)點列表坑夯。
【注意：方法名為getElements，故返回的是一個數(shù)組】
2）length屬性：返回的是一個節(jié)點列表抡四，是個數(shù)組柜蜈，因此可用length屬性獲取元素個數(shù)。使用[index]可定位具體的元素指巡。
getElementsByName(“name”)：通過元素的name中的內(nèi)容來查找 淑履，返回一個數(shù)組；
- 讀取節(jié)點信息
1）規(guī)則一：將HTML標簽對象化藻雪，操作前先明確被對象化的標簽都有什么屬性秘噪。
如：aObj代表一個<a href="">元素</a>，有aObj.href屬性勉耀，但沒有aObj.value和aObj.src
2）規(guī)則二：innerHTML：設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的內(nèi)容指煎。
如：aObj.innerHTML可修改<a href="">元素</a>標簽中的“元素”兩字
【注意：<input />單標簽無法用innerHTML修改內(nèi)容蹋偏。】
3）規(guī)則三：nodeName：得到某個元素節(jié)點和屬性節(jié)點（即可得到標簽或?qū)傩悦Q）及其類型位置至壤。xxx.nodeName：當未知節(jié)點類型時威始，使用該屬性獲得節(jié)點的名稱，全大寫方式像街。
如：if(xxx.nodeName == "IMG") xxx.src = "http://...";
4）節(jié)點屬性：getAttribute(“attrName”)方法：根據(jù)屬性名稱獲取屬性的值黎棠。
用于將HTML標簽、屬性镰绎、CSS樣式都對象化脓斩。
setAttribute(name,value):設(shè)置屬性值；若不存在具有指定名稱的屬性畴栖，該方法將創(chuàng)建一個新屬性俭厚。 - 修改節(jié)點信息
1）style屬性：語法：node.style.color; node.style.fontSize
【注意：CSS樣式中屬性名內(nèi)有“-”的，這里省略驶臊，并把后面單詞首字母大寫！
;屬性值要加上引號】
2）className屬性：語法：var Obj=document.getElementById("p1");
如：Obj.classname="樣式類名稱";//可用于設(shè)置不同的樣式叼丑。 - 查找并修改節(jié)點信息
1）使用getElementById()方法找到元素節(jié)點关翎。
2）修改元素內(nèi)容：innerHTML
3）修改樣式：style屬性或className屬性
4）修改屬性：html屬性 - 增加新節(jié)點
1）步驟：
① 創(chuàng)建一個新元素，document.createElement(“elementName");比如：元素名可為a/input/option等鸠信；返回新創(chuàng)建的節(jié)點纵寝。
② 為新元素設(shè)置相關(guān)的數(shù)據(jù)。如：
var newNode=document.createElement("input");
newNode.type="text"; newNode.value="mary";
newNode.style.color="red";
③ 把新節(jié)點加入樹上（新元素加入文檔）星立，作為樹上某個節(jié)點的子節(jié)點存在爽茴。
xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);//新節(jié)點放在舊節(jié)點之前
- 刪除節(jié)點
1）語法：parentNode.removeChild(childNode);
【注意：一定是從父節(jié)點刪除子節(jié)點，不能直接刪除子節(jié)點绰垂∈易啵】
其他：
createTextNode()：創(chuàng)建一個包含給定文本的新文本節(jié)點
replaceChild()：把一個給定父元素的一個子節(jié)點替換為另一個節(jié)點
