DOM

DOM：Document Object Model(文檔對象模型)

用來將標記型文檔封裝成對象，并將標記型文檔中的所有的內容(標簽，文本，屬性等)都封裝成對象。封裝成對象的目的是為了更方便操作這些文檔中的所有內容，因為對象的出現可以有屬性和行為被調用

文檔：標記型文檔

對象：封裝了屬性和行為的實例，可以直接被調用

模型：所有標記型文檔都具備一些共性特征的一個體現

只要是標記型文檔，DOM這種技術都可以對其進行操作，常見的標記型文檔：(HTML、XML)要操作標記型文檔必須對其進行解析

DOM技術的解析方式：dom解析將按照標簽的層次關系體現出標簽的所屬，形成一個樹狀結構，稱為DOM樹，樹中的標簽以及文本甚至屬性稱為節點，這個節點也成為對象，標簽通常也稱為頁面中的元素。

好處：可以對樹中的節點進行任意操作，比如：增刪改查

弊端：這種解析需要將整個標記型文檔加載進內存

DOM解析文檔.png

簡介另一種解析方式：SAX：是由一些組織定義的一種民間常用的解析方式，并不是w3c標準，而DOM是w3c的標準

SAX解析方式：基于事件驅動的解析

好處：獲取速度非常快

弊端：無法進行增刪改

如果僅僅只是查詢，可以使用SAX

DOM的三層模型

DOM level 1：將html文檔封裝成對象

DOM level 2：在level 1基礎上加入了新功能，比如解析名稱空間(可以使用域名來標識)

DOM level 3：將xml文檔封裝成對象

DHTML

動態的html，不是一門語言：是多項技術綜合體的簡稱(HTML，CSS，JavaScript，DOM)

HTML：負責提供標簽，對數據進行封裝，目的是便于對該標簽中的數據進行操作

簡述：用標簽封裝數據

CSS：負責提供樣式屬性，對標簽中的數據進行樣式的定義

簡述：對數據進行樣式定義

DOM：負責將標簽型文檔以及文檔中的所有內容進行解析，并封裝成對象，在對象中定義了更多的屬性和行為，便于對對象操作

簡述：將文檔和標簽及其他內容變成對象

JavaScript：負責提供程序設計語言，對頁面中的對象進行邏輯操作

簡述：頁面的行為定義，頁面的動態效果，是動態效果的主力編程語言

DHTML + XMLhttpRequest = AJAX

BOM模型

BOM：Browser Object Model(瀏覽器對象模型)這個模型方便操作瀏覽器

瀏覽器對應的對象就是window對象，可以通過查閱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屬性設置一個值。改變了地址欄的值，并對其進行了解析，如果是http，還進行連接訪問

location.href = "http://www.baidu.com";

document.write(pro);

}

function windowDemo2(){

// 確認點擊彈窗

var b = confirm("are you sure onClick!");

alert(b);

// 設置鬧鐘

var id = setTimeout("alert('time run')", 4000); // 4s后執行

var id1 = setInterval("alert('Interval run')", 3000); // 每3s執行一次

clearInterval(id1);

clearTimeout(id);

}

function windowMove(){

moveBy(10,10); // 每次點擊，窗口移動x = 10, y = 10

moveTo(40,50); // 移動到指定位置

}

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

}

}

練習：廣告彈窗

test

/**

* 彈窗廣告效果，頁面一加載完就執行

*/

onload = function(){

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

}

// 一分鐘獲取一次焦點

setInterval("focus()", 1000);

Document對象

該對象將標記型文檔進行封裝，該對象的作用，是對可以標記型文檔進行操作

最常見的操作：想要實現動態效果，需要對節點操作，那么要先獲取到這個節點。要想獲取節點，就必須先要獲取到節點所屬的文檔對象document

獲取節點的方法體現

getElementById()：通過標簽的id屬性值，獲取該標簽節點。返回該標簽節點

getElementsByName()：通過標簽的name屬性，獲取該節點。因為name有相同，返回該節點數組

getElementsByTagName()：通過標簽名，獲取該標簽節點。因為標簽名會重復，返回該標簽數組

凡是帶s返回的都是數組

常見節點有三種：

標簽節點：類型 1

屬性節點：類型 2

文本節點：類型 3

標簽型節點是沒有值的，屬性和文本節點是可以有值的

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 文本框寫啥拿啥

var userNode = document.getElementsByName("user")[0]; // 須保證name = user 只有唯一一個

---------------------------------------------------------------------------

var aNode = document.getElementsByTagName("a");

console.log(aNode[0].innerHTML);

// 給所有超鏈接設置新窗口打開

for(var i = 0; i < aNode.length; i++){

aNode[i].target = "_blank";

}

// 給部分超鏈接設置打開新窗口

var newNode = document.getElementById("news");

var newArrNode = newNode.getElementsByTagName("a");

for(var i = 0; i < newArrNode.length; i++){

newArrNode[i].target = "_blank";

}

}

通過節點的層次關系獲取節點

父節點：parentNode對應一個節點對象

子節點：childNodes對應一個節點集合，只包含下一層子節點，沒有孫子節點

兄弟節點：盡量少用兄弟節點，

上一個兄弟節點：previousSibling

下一個兄弟節點：nextSibling

titlediv區域

d1

d2

updown

function getNodeByLevel(){

// 獲取頁面中的表格節點

var tableNode = document.getElementById("table");

// 獲取父節點

var pNode = tableNode.parentNode; // body節點

// 獲取子節點

var cNode = tableNode.childNodes; // tbody

// 獲取孫子

var cNode = cNode[0].childNodes[0].nodeName; // tr

}

節點操作

創建并添加

刪除

修改

222222223333333344444444

// 增

function creatAndAdd(){

// 1.創建文本節點/按鈕節點

var text = document.createTextNode("這是一個新節點")

var botton = document.createElement("input");

botton.type = "botton";

botton.value = "click";

// 2.獲取1節點

var div1Node = document.getElementById("1");

// 3.添加到1節點中

div1Node.appendChild(text);

div1Node.appendChild(botton);

}

function creatAndAdd1(){

var div1Node = document.getElementById("1");

div1Node.innerHTML = "hahahahaha";

div1Node.innerHTML = "";

}

// 刪

function del(){

// 獲取2節點

var div2Node = document.getElementById("2");

// 刪除2節點

div2Node.removeNode(false); // true：遞歸刪除節點下所有內容 該方法較少使用

// 一般使用removeChild方法

div2Node.parentNode.removeChild(div2Node);

}

// 改

function update(){

// 獲取1，3節點

var div1Node = document.getElementById("1");

var div3Node = document.getElementById("3");

// 用3替換1節點

// div1Node.replaceNode(div3Node); // 該操作會把原來的3搬到1位置上，3位置消失

div1Node.parentNode.replaceChild(div3Node,div1Node);

// 3不動，復制一份到1上

var div3Copy = div3Node.cloneNode(true); // true:遞歸克隆節點下所有內容 該方法較少使用

div1Node.parentNode.replaceChild(div3Copy,div1Node);

}

核心DOM模型

Document：文檔對象

創建(獲取)：在HTML DOM模型中可以使用window對象來獲取

window.document

document

方法：

獲取Element對象：

getElementById()：查找具有指定的唯一id的元素，id屬性一般唯一

getElementsByTagName()：根據元素名稱獲取元素對象集合，返回數組

getElementsByClassName()：根據Class屬性值獲取元素對象集合，返回數組

getElementsByName()：根據name屬性值獲取元素對象集合，返回數組

創建其他DOM對象：

屬性

Element：元素對象

獲取/創建：通過document來獲取和創建

方法：

removeAttribute()：刪除屬性

setAttribute()

Node：節點對象，其他5個的父對象

總結

以上是生活随笔為你收集整理的java dom no protocol_DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。