DOM
DOM：Document Object Model（文檔對(duì)象模型）
用來(lái)將標(biāo)記型文檔封裝成對(duì)象，并將標(biāo)記型文檔中的所有的內(nèi)容（標(biāo)簽，文本抵卫，屬性等）都封裝成對(duì)象垂蜗。封裝成對(duì)象的目的是為了更方便操作這些文檔中的所有內(nèi)容蜓竹，因?yàn)閷?duì)象的出現(xiàn)可以有屬性和行為被調(diào)用
- 文檔：標(biāo)記型文檔
- 對(duì)象：封裝了屬性和行為的實(shí)例付燥，可以直接被調(diào)用
- 模型：所有標(biāo)記型文檔都具備一些共性特征的一個(gè)體現(xiàn)
只要是標(biāo)記型文檔奢入，DOM這種技術(shù)都可以對(duì)其進(jìn)行操作唧取，常見(jiàn)的標(biāo)記型文檔：（HTML展辞、XML）要操作標(biāo)記型文檔必須對(duì)其進(jìn)行解析
DOM技術(shù)的解析方式：dom解析將按照標(biāo)簽的層次關(guān)系體現(xiàn)出標(biāo)簽的所屬奥邮，形成一個(gè)樹(shù)狀結(jié)構(gòu)，稱為DOM樹(shù)罗珍，樹(shù)中的標(biāo)簽以及文本甚至屬性稱為節(jié)點(diǎn)洽腺，這個(gè)節(jié)點(diǎn)也成為對(duì)象，標(biāo)簽通常也稱為頁(yè)面中的元素覆旱。
好處：可以對(duì)樹(shù)中的節(jié)點(diǎn)進(jìn)行任意操作蘸朋，比如：增刪改查
弊端：這種解析需要將整個(gè)標(biāo)記型文檔加載進(jìn)內(nèi)存
簡(jiǎn)介另一種解析方式：SAX：是由一些組織定義的一種民間常用的解析方式，并不是w3c標(biāo)準(zhǔn)扣唱，而DOM是w3c的標(biāo)準(zhǔn)
SAX解析方式：基于事件驅(qū)動(dòng)的解析
- 好處：獲取速度非撑号鳎快
- 弊端：無(wú)法進(jìn)行增刪改
如果僅僅只是查詢，可以使用SAX
DOM的三層模型
DOM level 1：將html文檔封裝成對(duì)象
-
DOM level 2：在level 1基礎(chǔ)上加入了新功能噪沙，比如解析名稱空間（可以使用域名來(lái)標(biāo)識(shí)）
<html xmlns = "my"> <table></table> </html> <html xmlns = "you"> <table></table> </html> DOM level 3：將xml文檔封裝成對(duì)象
DHTML
動(dòng)態(tài)的html炼彪，不是一門(mén)語(yǔ)言：是多項(xiàng)技術(shù)綜合體的簡(jiǎn)稱（HTML，CSS正歼，JavaScript辐马，DOM）
-
HTML：負(fù)責(zé)提供標(biāo)簽，對(duì)數(shù)據(jù)進(jìn)行封裝朋腋，目的是便于對(duì)該標(biāo)簽中的數(shù)據(jù)進(jìn)行操作
簡(jiǎn)述：用標(biāo)簽封裝數(shù)據(jù)
-
CSS：負(fù)責(zé)提供樣式屬性齐疙，對(duì)標(biāo)簽中的數(shù)據(jù)進(jìn)行樣式的定義
簡(jiǎn)述：對(duì)數(shù)據(jù)進(jìn)行樣式定義
-
DOM：負(fù)責(zé)將標(biāo)簽型文檔以及文檔中的所有內(nèi)容進(jìn)行解析膜楷，并封裝成對(duì)象旭咽，在對(duì)象中定義了更多的屬性和行為，便于對(duì)對(duì)象操作
簡(jiǎn)述：將文檔和標(biāo)簽及其他內(nèi)容變成對(duì)象
-
JavaScript：負(fù)責(zé)提供程序設(shè)計(jì)語(yǔ)言赌厅，對(duì)頁(yè)面中的對(duì)象進(jìn)行邏輯操作
簡(jiǎn)述：頁(yè)面的行為定義穷绵，頁(yè)面的動(dòng)態(tài)效果，是動(dòng)態(tài)效果的主力編程語(yǔ)言
DHTML + XMLhttpRequest = AJAX
BOM模型
BOM：Browser Object Model（瀏覽器對(duì)象模型）這個(gè)模型方便操作瀏覽器
瀏覽器對(duì)應(yīng)的對(duì)象就是window對(duì)象特愿，可以通過(guò)查閱DHTML api獲得
<input type = "button" value = "演示window對(duì)象" onclick = "windowDemo()" />
<script type = "text/javascript">
function windowDemo(){
// 獲取瀏覽器信息navigator
var name = window.navigator.appName;
var version = navigator.appVersion; // window可以省略
document.write(name + ":" + version);
}
function windowDemo1(){
// 演示地址欄 location
var pro = location.protocol; // file
var text = location.href; // file:///E:/demo.html
// 給location的href屬性設(shè)置一個(gè)值仲墨。改變了地址欄的值，并對(duì)其進(jìn)行了解析揍障，如果是http目养，還進(jìn)行連接訪問(wèn)
location.;
document.write(pro);
}
function windowDemo2(){
// 確認(rèn)點(diǎn)擊彈窗
var b = confirm("are you sure onClick!");
alert(b);
// 設(shè)置鬧鐘
var id = setTimeout("alert('time run')", 4000); // 4s后執(zhí)行
var id1 = setInterval("alert('Interval run')", 3000); // 每3s執(zhí)行一次
clearInterval(id1);
clearTimeout(id);
}
function windowMove(){
moveBy(10,10); // 每次點(diǎn)擊，窗口移動(dòng)x = 10, y = 10
moveTo(40,50); // 移動(dòng)到指定位置
}
function windowOnunload(){
onunload = function(){ // 3
alert("unload run");
}
onload = function(){ // 1
alert("load run");
window.status = "a load is finish"
}
onbeforeunload = function(){ // 2
alert("before unload run");
}
}
</script>
練習(xí)：廣告彈窗
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<title>test</title>
</head>
<body>
<script type = "text/javascript">
/**
* 彈窗廣告效果毒嫡，頁(yè)面一加載完就執(zhí)行
*/
onload = function(){
open("./AD.html", "_blank","height = 300, width = 400, status = no, toolbar = no, location = no");
}
// 一分鐘獲取一次焦點(diǎn)
setInterval("focus()", 1000);
</script>
</body>
</html>
Document對(duì)象
該對(duì)象將標(biāo)記型文檔進(jìn)行封裝癌蚁，該對(duì)象的作用，是對(duì)可以標(biāo)記型文檔進(jìn)行操作
最常見(jiàn)的操作：想要實(shí)現(xiàn)動(dòng)態(tài)效果，需要對(duì)節(jié)點(diǎn)操作努释，那么要先獲取到這個(gè)節(jié)點(diǎn)碘梢。要想獲取節(jié)點(diǎn)，就必須先要獲取到節(jié)點(diǎn)所屬的文檔對(duì)象document
獲取節(jié)點(diǎn)的方法體現(xiàn)
-
getElementById()：通過(guò)標(biāo)簽的id屬性值伐蒂，獲取該標(biāo)簽節(jié)點(diǎn)煞躬。返回該標(biāo)簽節(jié)點(diǎn) -
getElementsByName()：通過(guò)標(biāo)簽的name屬性，獲取該節(jié)點(diǎn)逸邦。因?yàn)閚ame有相同恩沛，返回該節(jié)點(diǎn)數(shù)組 -
getElementsByTagName()：通過(guò)標(biāo)簽名，獲取該標(biāo)簽節(jié)點(diǎn)缕减。因?yàn)闃?biāo)簽名會(huì)重復(fù)复唤，返回該標(biāo)簽數(shù)組 - 凡是帶s返回的都是數(shù)組
- 常見(jiàn)節(jié)點(diǎn)有三種：
- 標(biāo)簽節(jié)點(diǎn)：類型 1
- 屬性節(jié)點(diǎn)：類型 2
- 文本節(jié)點(diǎn)：類型 3
- 標(biāo)簽型節(jié)點(diǎn)是沒(méi)有值的，屬性和文本節(jié)點(diǎn)是可以有值的
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<title>document</title>
</head>
<body>
<div id = "hh">11111111111111111</div> <!-- getElementById -->
<input type = "texy" name = "user" /> <!-- getElementsByName -->
<a >百度</a> <!-- getElementsByTagName -->
<a >百度1</a>
<a >百度2</a>
<div id = "news">
<a >百度</a>
<a >百度1</a>
<a >百度2</a>
</div>
<input type = "button" value = "演示document獲取節(jié)點(diǎn)" onclick = "getNodeDemo()" />
<script type = "text/javascript">
function getNodeDemo(){
var hhNode = document.getElementById("hh");
console.log(hhNode.nodeName + hhNode.nodeType + hhNode.nodeValue);
// 獲取div中的文本
var text = hhNode.innerHTML; // 11111111111111111
// 修改div中的文本
hhNode.innerHTML = "hhhhhhhhhhhhhhh".fontcolor("red");
---------------------------------------------------------------------------
var nodes = document.getElementsByName("user");
console.log(nodes[0].type + nodes[0].value); // text 文本框?qū)懮赌蒙? var userNode = document.getElementsByName("user")[0]; // 須保證name = user 只有唯一一個(gè)
---------------------------------------------------------------------------
var aNode = document.getElementsByTagName("a");
console.log(aNode[0].innerHTML);
// 給所有超鏈接設(shè)置新窗口打開(kāi)
for(var i = 0; i < aNode.length; i++){
aNode[i].target = "_blank";
}
// 給部分超鏈接設(shè)置打開(kāi)新窗口
var newNode = document.getElementById("news");
var newArrNode = newNode.getElementsByTagName("a");
for(var i = 0; i < newArrNode.length; i++){
newArrNode[i].target = "_blank";
}
}
</script>
</body>
</html>
通過(guò)節(jié)點(diǎn)的層次關(guān)系獲取節(jié)點(diǎn)
- 父節(jié)點(diǎn)：
parentNode對(duì)應(yīng)一個(gè)節(jié)點(diǎn)對(duì)象 - 子節(jié)點(diǎn)：
childNodes對(duì)應(yīng)一個(gè)節(jié)點(diǎn)集合烛卧，只包含下一層子節(jié)點(diǎn)佛纫，沒(méi)有孫子節(jié)點(diǎn) - 兄弟節(jié)點(diǎn)：盡量少用兄弟節(jié)點(diǎn)，
- 上一個(gè)兄弟節(jié)點(diǎn)：
previousSibling - 下一個(gè)兄弟節(jié)點(diǎn)：
nextSibling
- 上一個(gè)兄弟節(jié)點(diǎn)：
<html>
<head>
<title>title</title>
</head>
<body>
<input type = "botton" value = "click" />
<div>div區(qū)域</div>
<table id = "table">
<tr>
<td>d1</td>
<td>d2</td>
</tr>
</table>
<dl>
<dt>up</dt>
<dt>down</dt>
</dl>
<script type = "text/javascript">
function getNodeByLevel(){
// 獲取頁(yè)面中的表格節(jié)點(diǎn)
var tableNode = document.getElementById("table");
// 獲取父節(jié)點(diǎn)
var pNode = tableNode.parentNode; // body節(jié)點(diǎn)
// 獲取子節(jié)點(diǎn)
var cNode = tableNode.childNodes; // tbody
// 獲取孫子
var cNode = cNode[0].childNodes[0].nodeName; // tr
}
</script>
</body>
</html>
節(jié)點(diǎn)操作
- 創(chuàng)建并添加
- 刪除
- 修改
<div id = "1"> </div>
<div id = "2">22222222</div>
<div id = "3">33333333</div>
<div id = "4">44444444</div>
<input type="botton" value = "創(chuàng)建并添加節(jié)點(diǎn)" onclick = "creatAndAdd()" />
<input type="botton" value = "刪除節(jié)點(diǎn) " onclick = "del()" />
<input type="botton" value = "修改節(jié)點(diǎn)" onclick = "update()" />
<script type = "text/javascript">
// 增
function creatAndAdd(){
// 1.創(chuàng)建文本節(jié)點(diǎn)/按鈕節(jié)點(diǎn)
var text = document.createTextNode("這是一個(gè)新節(jié)點(diǎn)")
var botton = document.createElement("input");
botton.type = "botton";
botton.value = "click";
// 2.獲取1節(jié)點(diǎn)
var div1Node = document.getElementById("1");
// 3.添加到1節(jié)點(diǎn)中
div1Node.appendChild(text);
div1Node.appendChild(botton);
}
function creatAndAdd1(){
var div1Node = document.getElementById("1");
div1Node.innerHTML = "hahahahaha";
div1Node.innerHTML = "<input type = 'botton' value = 'newClick' />";
}
// 刪
function del(){
// 獲取2節(jié)點(diǎn)
var div2Node = document.getElementById("2");
// 刪除2節(jié)點(diǎn)
div2Node.removeNode(false); // true：遞歸刪除節(jié)點(diǎn)下所有內(nèi)容 該方法較少使用
// 一般使用removeChild方法
div2Node.parentNode.removeChild(div2Node);
}
// 改
function update(){
// 獲取1呈宇，3節(jié)點(diǎn)
var div1Node = document.getElementById("1");
var div3Node = document.getElementById("3");
// 用3替換1節(jié)點(diǎn)
// div1Node.replaceNode(div3Node); // 該操作會(huì)把原來(lái)的3搬到1位置上，3位置消失
div1Node.parentNode.replaceChild(div3Node,div1Node);
// 3不動(dòng)局雄，復(fù)制一份到1上
var div3Copy = div3Node.cloneNode(true); // true:遞歸克隆節(jié)點(diǎn)下所有內(nèi)容 該方法較少使用
div1Node.parentNode.replaceChild(div3Copy,div1Node);
}
</script>
核心DOM模型
- Document：文檔對(duì)象
- 創(chuàng)建（獲壬摹）：在HTML DOM模型中可以使用window對(duì)象來(lái)獲取
- window.document
- document
- 方法：
- 獲取Element對(duì)象：
-
getElementById()：查找具有指定的唯一id的元素，id屬性一般唯一 -
getElementsByTagName()：根據(jù)元素名稱獲取元素對(duì)象集合炬搭，返回?cái)?shù)組 -
getElementsByClassName()：根據(jù)Class屬性值獲取元素對(duì)象集合蜈漓，返回?cái)?shù)組 -
getElementsByName()：根據(jù)name屬性值獲取元素對(duì)象集合，返回?cái)?shù)組
-
- 創(chuàng)建其他DOM對(duì)象：
- 獲取Element對(duì)象：
- 屬性
- 創(chuàng)建（獲壬摹）：在HTML DOM模型中可以使用window對(duì)象來(lái)獲取
- Element：元素對(duì)象
- 獲取/創(chuàng)建：通過(guò)document來(lái)獲取和創(chuàng)建
- 方法：
-
removeAttribute()：刪除屬性 setAttribute（）
-
- Node：節(jié)點(diǎn)對(duì)象宫盔，其他5個(gè)的父對(duì)象
