java（十八）DOM
DOM
DOM：document Object Model(文檔對象模型)
用來將標記型文檔封裝成對象，並將標記型文檔中的所有內容(標簽，文本，屬性等)都封裝成對象。
封裝成對象的目的是為了更為方便的操作這些文檔以及文檔中的內容。
因為對象的出現就可以有屬性和行為被調用。
文檔對象模型：
文檔：標記型文檔。
對象：封裝了屬性和行為的實例，可以直接被調用。
模型：所有標記型文檔都具備一些共性特征的一個體現。
標記型文檔所包含的內容無非是標簽，屬性和標簽中封裝的數據。
只要是標記型文檔，DOM這種技術都可以對其進行操作。
常見的標記型文檔：html xml
DOM這種技術是如何對標記型文檔進行操作的呢？
要操作標記型文檔必須先對其進行解析。
DOM解析按照標簽的層次關系體現出標簽的所屬，形成一個樹狀結構，稱為DOM樹，而樹中的標簽，文本
以及屬性稱之為節點，這個節點也稱為對象。標簽通常也稱為頁面中的元素。
DOM技術的解析方式：將標記型文檔解析成一棵DOM樹，並將樹中的內容都封裝成節點對象。
註意：這種DOM解析方式的好處是可以對樹中的節點進行任意操作，比如：增刪改查。
但弊端是這種解析需要將整個標記型文檔加載進內存，意味著如果文檔體積很大，就會較為浪費內存空間。
另一種解析方式:SAX。 這是一種民間常用的解析方式，並不是w3c標準，了解一下就行，而DOM是w3c標準。
SAX解析方式：基於事件驅動的解析。獲取數據的速度很快，但是不能對標記進行增刪改，只能查。
DOM模型有三種：
DOM level 1：將html文檔封裝成了對象。
DOM level 2：在level1的基礎上添加了一些新功能。比如解析名稱空間。
DOM level 3：將xml文檔封裝成了對象。
DHTML:動態的HTML。它不是一門語言，是多項技術綜合體的簡稱。
其中包含了HTML,CSS,DOM,JavaScript。
這四個技術在動態的html頁面效果定義時，都處於什麽樣角色呢？負責什麽樣的職責呢？
HTML:負責提供標簽，對數據進行封裝，目的是便於對該標簽中的數據進行操作。
簡單說，用標簽封裝數據。
CSS:負責提供樣式屬性，對標簽中的數據進行樣式的定義。
簡單說，對數據進行樣式定義
DOM:負責將標簽型文檔以及文檔中的所有內容進行解析並封裝成對象，在對象中定義了更多的屬性和行為，便於對對象操作。
簡單說，將文檔和標簽以及其他內容變成對象。
JavaScript:負責提供程序設計語言，對頁面中的對象進行邏輯操作。
簡單說，負責頁面的行為定義，就是頁面的動態效果
所以說，JavaScript是動態效果的主力編程語言。
BOM模型：
BOM：browser object model（瀏覽器對象模型）
這個模型方便於操作瀏覽器。瀏覽器對應的對象就是window對象，這個可以通過查閱dhtml api知道。
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<!--
window對象的演示：
為了演示方便，定義一個事件源，通過對事件源的觸發，獲取想要的結果。
比如讓用戶通過按鈕就可以知道瀏覽器的一些信息。
-->
<!--
定義按鈕onclick事件的處理方式
-->
<script type="text/javascript">
function windowObjectDemo(){
//想要知道這個瀏覽器的信息，就要用到window中的navigator對象。
var name=window.navigator.appName;
var version=navigator.appVersion; //因為window對象一打開瀏覽器就存在了，所以可以不用寫，像這樣也行。
document.write("<font color=‘green‘ size=‘6‘>"+name+"<br/>");
document.write(version+"<br/>");
}
</script>
<!--定義事件源,註冊事件的關聯動作-->
<input type="button" value="演示window中的對象" onclick="windowObjectDemo()"/>
</body>
</html>
除了navigator對象外，window還有一個比較常用的對象history，可以完成歷史紀錄的相關操作，比如前進，後退，去指定網頁等，比較簡單。
演示另一個比較重要的對象——location對象。
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<!--
演示location對象。
-->
<script type="text/javascript">
function windowObjectDemo(){
var prop=window.location.protocol; //設置或獲取url的協議部分
var text=location.href; //設置或獲取整個url字符串
document.write("<font color=‘yellow‘ size=‘6‘>"+prop+"<br/>");
document.write(text+"<br/>");
location.href="http://www.hupu.com.cn";
//給location的href屬性設置了一個值，改變了地址欄的值，並對其進行解析，如果是http，還會進行連接訪問。
}
</script>
<input type="button" value="演示location對象" onclick="windowObjectDemo()"/>
</body>
</html>
接下來演示一些window中的常見方法。
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<!--
演示window中常見的方法。
-->
<script type="text/javascript">
function windowMethodDemo(){
var b=confirm("你真的確定要點擊嗎？"); //confirm方法，帶回運行時底下會自動出現確定和取消選項。
alert("b="+b);
setTimeout("alert(‘timeout run‘),4000"); //經過指定毫秒值後計算一個表達式。比如這個就是4秒後彈一個對話框。
setInterval("alert(‘timeout run0.0‘),3000"); //每經過指定毫秒值後計算一個表達式。重復執行。可以用clearInterval方法終止他的運行。
}
function stop(){
clearInterval(timeid);
}
function windowMove(){
moveBy(20,20);
//moveTo(40,40);
}
function windowOpen(){
open("","_blank","height=400,width=200,status=yes,toolbar=yes,location=yes");
}
</script>
<input type="button" value="演示window中的方法" onclick="windowMethodDemo()"/>
<input type="button" value="別再彈了" onclick="stop()"/>
<input type="button" value="移動窗口" onclick="windowMove()"/>
<input type="button" value="打開一個新窗口" onclick="windowOpen()"/>
</body>
</html>
接下來演示一些window中常見的事件
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<script type="text/javascript">
window.onunload=function(){ //onunload事件，在對象卸載前立即觸發。
alert("onunload run");
}
onload=function(){ //onload事件，在瀏覽器完成對象的裝載後立即觸發。
alert("onload run");
}
onbeforeunload=function(){ //onbeforeunload事件，在頁面將要被卸載前觸發。
alert("onbeforeunload run");
}
</script>
</body>
</html>
關於document對象：
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<!--
*document對象的演示
*
*該對象將標記型文檔進行了封裝。它的作用是可以對標記型文檔進行操作。
*最常見的操作就是實現動態效果，這就要對節點操作，就要先獲取到節點。
*要獲取節點，必須要先獲取到節點所屬文檔對象document。
*
*所以document對象最常見的操作就是獲取頁面中的節點。
*獲取節點的方法體現：
*1.getElementById():通過標簽的id屬性值獲取該標簽節點。
*2.getElementsByName():通過標簽的name屬性獲取節點，因為name有相同，所以這裏element加s了，返回的是一個數組。
*3.getElementsByTagName():通過標簽名獲取節點。因為標簽會發生重復，所以返回的也是一個數組。
-->
<script type="text/javascript">
function getNodeDemo(){
//需求：獲取頁面中的div節點。
//要通過document對象完成，因為div節點有id屬性，所以通過id屬性來完成。
var divNode=document.getElementById("divid");
document.write("<font color=‘red‘ size=‘5‘>"+divNode.nodeName+"-"+divNode.nodeType+"-"+divNode.nodeValue+"<br/>");
/*
*節點都有三個必備的屬性：節點名稱，節點類型，節點值
*常見節點有三種：
*1.標簽型節點 類型1
*2.屬性節點 類型2
*3.文本節點 類型3
* 標簽型節點是沒有值的，屬性節點和文本節點是可以有值的。
*/
//獲取div節點中的文本
var text=divNode.innerHTML;
document.write("<font color=‘red‘ size=‘5‘>"+text+"<br/>");
//修改div中的文本
divNode.innerHTML="哈哈，文本被我修改了！";
document.write("<font color=‘red‘ size=‘5‘>"+divNode.innerHTML+"<br/>");
}
function getNodeDemo2(){
//獲取文本框節點演示getElementsByName方法
var node=document.getElementsByName("user");
alert(node[0].name+"--"+node[0].value);
}
function getNodeDemo3(){
//獲取超鏈接節點對象，演示getElementsByTagName方法。
//直接用標簽名獲取
var nodes=document.getElementsByTagName("a");
for(var x=0;x<nodes.length;x++){
nodes[x].target="_blank"; //這句話就是讓超鏈接的網址在一個新的網頁中打開。
}
}
function getNodeDemo4(){
/*
*對於頁面中的超鏈接，如果要求新聞鏈接在新窗口打開，而門戶網站在當前頁面打開，該怎麽辦呢？
*當然是要獲取其中被操作的超鏈接對象啊。
*可是通過document獲取超鏈接，拿到的是頁面中所有超鏈接節點。
*只想獲取其中一部分怎麽辦呢？
*只要獲取到被操作超鏈接所屬節點即可。
*再通過這個節點獲取到它裏面所有超鏈接節點。
*/
var divNode=document.getElementById("news link");
var aNodes=divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length;x++){
aNodes[x].target="_blank";
}
}
</script>
<input type="button" value="演示document對象獲取節點" onclick="getNodeDemo3()"/>
<div id="divid">這是一個div區域</div>
<input type="text" name="user"/>
<a href="http://www.sina.com.cn">新浪網站</a>
<a href="http://www.baidu.com.cn">百度網站</a>
<div id="news link">
<a href="http://www.123.com.cn">新聞鏈接</a>
<a href="http://www.124.com.cn">新聞鏈接</a>
<a href="http://www.125.com.cn">新聞鏈接</a>
</body>
</html>
獲取節點還有另外一種常用的方式：通過節點的層次關系獲取節點對象。
關系：1.父節點：parentNode，對應一個節點對象
2.子節點：childNodes，對應一個節點集合
3.兄弟節點：
上一個兄弟節點：previousSibling
下一個兄弟節點：nextSibling
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<script type="text/javascript">
function getNodeByLevel(){
//獲取頁面中的表格節點
var tabNode=document.getElementById("table");
//獲取父節點。
var node=tabNode.parentNode;
//獲取子節點
var nodes=tabNode.childNodes;
alert(nodes[0].childNodes[0].nodeName);
//獲取兄弟節點
var node2=tabNode.previousSibling;
alert(node2.nodeName);
//盡量少用兄弟節點，因為在解析的時候或出現瀏覽器不同，解析結果不一致的問題。
//會解析出標簽間的空白文本節點。
}
</script>
<input type="button" value="通過節點層次關系獲取節點" onclick="getNodeByLevel()"/>
</body>
</html>
獲取到節點之後就是對節點的操作了，操作無非就是增刪改查，查已經完成了，就是獲取。
<html>
<head>
<title>我的網頁</title>
<style type="text/css">
div{
border:#00ccff 1px solid;
width:500px;
padding:80px;
margin:20px;
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
</head>
<body>
<script type="text/javascript">
function creAndAdd(){
//需求：在div_1節點中添加一個文本節點
//思路：1.創建一個文本節點，使用document中的createTextNode方法
// 2.獲取div_1節點
// 3.將文本節點添加到div_1節點中。
var oTextNode=document.createTextNode("這是一個新的文本節點");
var oDivNode=document.getElementById("div_1");
oDivNode.appendChild(oTextNode);
}
function creAndAdd2(){
//需求：在div_1中創建並添加一個按鈕節點。
var oNode=document.createElement("input");
oNode.type="button";
oNode.value="一個新按鈕";
var oDivNode=document.getElementById("div_1");
oDivNode.appendChild(oNode);
}
function creAndAdd3(){
//需求：通過另一種方式完成添加節點
//其實是使用了容器型標簽的一個屬性——innerHTML。這個屬性可以設置html文本。
var oDivNode=document.getElementById("div_1");
oDivNode.innerHTML="<input type=‘button‘ value=‘有個按鈕‘/>";
}
function delNode(){
//需求：將div_2節點刪除
//1.獲取div_2節點
//2.使用div節點的removeNode方法刪除
// 但是這個方法用的比較少，一般使用removeChild方法，刪除子節點，
// 所以就得先獲取div_2的父節點，然後用父節點的removeChild方法將div_2刪除。
var oDivNode=document.getElementById("div_2");
// oDivNode.removeNode(true); //傳個false，div區域的字還會留下來，傳個true就會把子節點全部刪除。
oDivNode.parentNode.removeChild(oDivNode);
}
function updateNode(){
//需求：用div_3節點替換div_1節點。
//1.獲取div_3和div_1節點
//2.使用replaceNode方法進行替換。
//但是不建議使用這個方法，建議使用replaceChild方法。
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
// oDivNode_1.replaceNode("var oDivNode_3");
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
function cloneNode(){
//需求：希望用div_3替換div_1，但是要求保留div_3.
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
var oCopyDiv_3=oDivNode_3.cloneNode(true); //true表示還要復制該節點的子節點，這裏就是還要賦值div區域的文字。
//否則賦值過去的只有div_3這個區域，沒有裏面的文字。
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
}
</script>
<input type="button" value="創建並添加節點" onclick="creAndAdd3()"/>
<input type="button" value="刪除節點" onclick="delNode()"/>
<input type="button" value="修改節點" onclick="updateNode()"/>
<input type="button" value="克隆節點" onclick="cloneNode()"/>
<hr/>
<div id="div_1">
</div>
<div id="div_2">
好好學習。day day up!
</div>
<div id="div_3">
div區域演示文字
</div>
<div id="div_4">
節點的增刪改查
</div>
</body>
</html>
本文出自 “12946849” 博客，請務必保留此出處http://12956849.blog.51cto.com/12946849/1958017
java（十八）DOM