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)存

DOM解析文檔.png

簡(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í))

DOM level 3：將xml文檔封裝成對(duì)象

DHTML

動(dòng)態(tài)的html，不是一門語(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獲得

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.href = "http://www.baidu.com";

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");

}

}

練習(xí)：廣告彈窗

test

/**

* 彈窗廣告效果，頁(yè)面一加載完就執(zhí)行

*/

onload = function(){

open("./AD.html", "_blank","height = 300, width = 400, status = no, toolbar = no, location = no");

}

// 一分鐘獲取一次焦點(diǎn)

setInterval("focus()", 1000);

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)是可以有值的

document11111111111111111

百度

百度1

百度2

百度

百度1

百度2

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ū)懮赌蒙?/p>

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";

}

}

通過(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

titlediv區(qū)域

d1

d2

updown

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

}

節(jié)點(diǎn)操作

創(chuàng)建并添加

刪除

修改

222222223333333344444444

// 增

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 = "";

}

// 刪

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);

}

核心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)建：通過(guò)document來(lái)獲取和創(chuàng)建

方法：

removeAttribute()：刪除屬性

setAttribute()

Node：節(jié)點(diǎn)對(duì)象，其他5個(gè)的父對(duì)象

總結(jié)

以上是生活随笔為你收集整理的java dom no protocol_DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。