爲了操縱瀏覽器和文檔,JavaScript使用分層的父對象和子對象,這就成爲DOM.這些對象的組織類似一個樹形結構,並表示一個Web文檔的所有內容和組件.
DOM對象擁有屬性(描述Web頁面或文檔的變量)和方法(允許操作部分Web頁面).
當說明一個對象時,先是父對象名,後接着是子對象名,使用圓點隔開.
1.document對象
1.1document屬性
document對象主要對應於文檔的主體部分,對於頭部分只提供了有限的支持.
body屬性:
background 指定文檔背景圖像的URL.
bgColor 設置文檔顏色.
Text 指定文檔中正常文本的顏色.
link 指定未訪問鏈接的顏色.
vlink 指定已訪問鏈接的顏色.
document常用屬性:
anchor[] anchor對象數值,每一個都代表文檔中出現的一個錨點.
applets[] applet對象數組,代表文檔中出現的每一個小代碼.
bgColor 指定文檔的背景顏色,字符串類型.
cookie 允許讀寫HTTP的cookie,字符串類型.
domain 指定文檔來自哪一個Internet域,用於安全目的,字符串類型.
embeds[] 代表文檔中是喲偶那個<embed>標記嵌入數據,與plugins[]同義.
fgColor 指定文檔的前景顏色,字符串類型.
forms[] form對象數組,每一個元素對應於文檔中的一個HTML<form>標記.
images[] image對象數組,每一個元素對應於文檔中的一個HTML<img>標記.
lastModified 給出文檔最近修改時間,字符串類型,只讀屬性.
linkColor 指定未訪問鏈接的顏色.
links[] link對象數組,每一個元素對應於文檔中的一個HTML<a href>標記.
location 文檔的URL地址.
plugins[] 與embeds[]屬性的意義相同.
referret 只讀屬性,連接到當前文檔的URL.
title 文檔標題,對應於文檔中<title>標記的內容.
URL 指定當前文檔的URL,只讀屬性.
vlinkColor 指定已訪問鏈接的顏色.
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> document對象所有屬性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h2>document屬性列表</h2>
<script>
var attrs = new Array();
for(var property in window.document)
{
attrs.push(property);
}
attrs.sort();
document.write("<table>");
for(i = 0; i<attrs.length; i++)
{
if(i == 0)
{
document.write("<tr>");
}
if(i > 0 && i % 5 ==0)
{
document.write("</tr><tr>");
}
document.write("<td>" + attrs[i] + "</td>");
}
document.write("</table>");
</script>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 顯示當前document對象屬性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor = "orange" text = "red" link = "blue" vlink = "fuchsia">
<img src = "z.jpg" border = 2>
<h2>documen對象屬性的當前值</h2>
<font face = "楷體" size = "+2">
<script>
document.write("文檔地址: " + "<em>" + document.location + "</em><br>");
document.write("文檔標題: " + "<em>" + document.title + "</em><br>");
document.write("圖像文件: " + "<em>" + document.images[0].src + "</em><br>");
document.write("URL: " + "<em>" + document.URL + "</em><br>");
document.write("背景顏色: " + "<em>" + document.bgColor + "</em><br>");
document.write("鏈接顏色: " + "<em>" + document.linkColor + "</em><br>");
document.write("文本顏色: " + "<em>" + document.fgColor + "</em><br>");
document.write("最後修改: " + "<em>" + document.lastmodified + "</em><br>");
</script>
<a href = "http://www.baidu.com">百度連接</a>
</BODY>
</HTML>
1.2document方法
open() 刪除現有文檔的內容,打開一個新的文檔輸出流.
close() 關閉open()打開的文檔輸出流.
focus() 讓指定文檔得到焦點.
write(value,...) 在當前文檔中插入字符串或在open()打開的文檔末尾添加字符串
writeln(value,...) 與writeln方法相同,只是在輸出字符串的末尾添加回車符.
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>document對象方法</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
var newWindow;
function makeNewWindow()
{
if(!newWindow || newWindow.closed)
{
newWindow = window.open("","sub","status, height = 350, width = 300");
}else if (newWindow.focus)
{
newWindow.focus();
}
newWindow.location = "a.htm";
newWindow.moveTo(0, 0);
parent.window.resizeTo(400, 400);
parent.window.moveTo(350, 0);
}
function writeToWindow()
{
var newContent = "<html><head><title>新打開的窗口-顯示唐詩<<赤壁>></title></head>";
newContent += "<body><h1>折戟沉沙鐵未銷,</h1>";
newContent += "<h1>自將磨洗認前朝.</h1>";
newContent += "<h1>東風不與周郎便,</h1>";
newContent += "<h1>銅雀春深鎖二喬.</h1>";
newContent += "</body></html>";
newWindow.document.open();
newWindow.document.write(newContent);
newWindow.document.close();
}
</script>
<BODY>
<h2> document對象方法演示</h2>
<button onClick = "makeNewWindow();">
<font size = "+1" face = 宋體>創建新窗口</button><br>
<button onClick = "writeToWindow();">
<font size = "+1" face = 宋體>輸出內容</button>
</BODY>
</HTML>
2.DOM對象
2.1訪問DOM節點
要訪問html元素，可以使用document的documentelement屬性
var oHtml = document.documentElement;
現在oHtml變量就包含一個表示html的htmlelement對象。如果想取得head和body元素，可以使用以下方法實現：
var ohead = oHtml.firstChild;
var obody = oHtml.lastChild;
也可以使用childNodes屬性來完成同樣的工作，只需把它當成普通的JavaScript Array，使用方括號標記：
var ohead = oHtml.childNodes[0];
var obody = oHtml.childNodes[1];
使用childNodes.length屬性來獲取子節點的數量：
alert(oHtml.childNodes.length);//輸出子節點個數
實際上正式地從childNodes列表中獲取子節點的方法是使用item()：
var oHtml.childNodes.item[0];
var obody.childNodes.item[1];
核心DOM定義了getElementByTagName()方法，用來返回一個包含所有的tagName屬性等於某個指定值的元素的Nodelist。
var oimgs = document.getElementByTagName("img");
在把所有圖像都存於oimgs後，只需要使用方括號或者item()方法，就可以像訪問子節點一樣逐個訪問這些節點了：
alert(oimgs[0].tagName);//輸出img
如果只想要獲得在某個頁面第一個段落的所有圖像，則可以通過對第一個段落元素用getElementByTagName()來完成，如：
var ops = document.getElementsByTagName("p");
var oimgsIp = ops[0].getElemetByTagName("img");
可以使用型號的方法來獲取document中的所有元素：
var oALLElements = document.getElementByTagName("*");
DOM定義了getElementByName()方法，它用來獲取所有name屬性等於指定值的元素。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DOM技術 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form method = "post" action = "document.cgi">
<fieldset>
<legend>選擇你喜歡的顏色！</legend>
<input type = "radio" name = "color" value = "red">red<br>
<input type = "radio" name = "color" value = "green">green<br>
<input type = "radio" name = "color" value = "blue">blue<br>
</fieldset>
<input type = "submit" value = "submit">
</form>
<script language = "javascript">
var oRadios = document.getElementsByName("color");
alert(oRadios[0].getAttribute("value"));//輸出red
</script>
</BODY>
</HTML>
getElementById()將返回ID屬性等於指定值的元素。在HTML中，id屬性是唯一的，這就意味着沒有兩個元素可以使用一個id。這是從文檔中獲取每個元素的最快方法。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DOM技術2 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function getValue()
{
var odiv1 = document.getElementById("div1");
odiv1.innerText = "hello!";
}
</script>
<BODY onload = "getValue()">
<div id = "div1"></div>
</BODY>
</HTML>
2.2處理屬性
Node接口具有attributes方法，且已經被所有類型的節點繼承，然而，只有element節點纔能有屬性。
getNameItem(name):返回nodeName屬性值等於name的節點。
removeNamedItem(name):刪除nodeName屬性值等於name的節點。
setNameItem(node):將node添加到列表中，按其nodeName屬性進行索引。
item(pos):與NodeList一樣，返回在位置pos的節點。
2.3創建和操作節點
creatDocumentFragment():創建文本碎片節點
createElement(tagname):創建標籤名爲tagname的元素
createTextNode(text):創建包含文本text的文本節點
createElement():創建元素
createTextNode():創建文本節點
appendChild():添加子節點
removeChild():刪除子節點
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> createElement()方法 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY onload = "createM()">
<script>
function createM()
{
var op = document.createElement("p");
var otext = document.createTextNode("你好");
op.appendChild(otext);
document.body.appendChild(op);
}
</script>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 刪除節點 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function removeM()
{
var op = document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
</script>
<BODY onload = "removeM()">
<p>你好！</p>
<p>Hello World!</p>
</BODY>
</HTML>
replaceChild():替換子節點
insertBefore():讓新節點出現在已有節點之前
2.4DOM的其它技術
DOM用getAttribute()和setAttribute()方法來獲取和設置圖片元素的src和border屬性。
示例：
alert(oImg.getAttribute("src"));
oImg.setAttribute("src","jhon.jpg");
使用核心DOM方法來創建一個表格會比較複雜。爲了更方便地建立表格，HTML DOM給一些表格元素添加了一些屬性和方法。
<table/>元素內添加的內容
caption:指向caption元素
tBodies:<tbody/>元素的集合
tFoot:指向<tFoot/>元素
tHead:指向<tHead/>元素
rows:表格中的行
createTHead():創建<tHead/>元素標籤並將其放入表格中
createTFoot():創建<tFoot/>元素標籤並將其放入表格中
createCaption():創建<Caption/>元素標籤並將其放入表格中
deleteTHead():刪除<tHead/>元素標籤
deleteTFoot():刪除<tFoot/>元素標籤
deleteCaption():刪除<Caption/>元素標籤
deleteRow():刪除指定位置上的行
insertRow():在Rows集合中的指定位置插入一個新行
<tbody/>
rows:<tbody>中的所有行的集合
deleteRow():刪除指定位置上的行
insertRow():在Row集合中的指定位置插入一個新行
<tr/>
cells:<tr/>元素中所有的單元格的集合
deleteCell():刪除指定位置的單元格
insertCell():在cells集合的給定位置插入一個新的單元格
示例: