|
|
通過元素的ID訪問元素，這是DOM一個(gè)基礎(chǔ)的訪問頁面元素的方法，我們要經(jīng)常用到它.
例如下面的例子，我們可以同DIV的ID迅速的訪問到它，而不必通過DOM層層遍歷，
復(fù)制代碼 代碼如下:
<body>
<div id='divid'><p>h</p>
Just for testing;
</div>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid');
alert(div.nodeName);
</script>
</body>
注意使用這個(gè)函數(shù)時(shí)如果元素的ID不是唯一的，那么會(huì)獲得第一個(gè)符合條件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也會(huì)被訪問到
例如下面的例子中，獲得的元素是input：
復(fù)制代碼 代碼如下:
<body>
<input name='divid' type="text"/>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById('divid');
alert(div.nodeName);
</script>
</body>
2、getElementsByName(name)
返回名字是name的元素?cái)?shù)組，在IE6中元素ID匹配這個(gè)名字的話，這個(gè)元素也將包括在內(nèi)，而且getElementsByName()僅用于象input,radio,checkbox等元素對(duì)象。
象下面例子中g(shù)eorges數(shù)組的長(zhǎng)度應(yīng)該是0。
復(fù)制代碼 代碼如下:
<body>
<div name="george">f</div>
<div name="george">f</div>
<script type="text/Javascript">
var georges=document.getElementsByName("george");
alert(georges.length);
</script>
</body>
3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（數(shù)組）。你可以遍歷這個(gè)數(shù)組獲得每一個(gè)單獨(dú)的子元素。當(dāng)處理很大的DOM結(jié)構(gòu)，使用這種方法可以很容易的所有縮小范圍。
復(fù)制代碼 代碼如下:
<html>
<head>
<title></title>
<script>
function start() {
// 獲得所有tagName是body的元素（當(dāng)然每個(gè)頁面只有一個(gè)）
myDocumentElements=document.getElementsByTagName("body");
myBody=myDocumentElements.item(0);
// 獲得body子元素種的所有P元素
myBodyElements=myBody.getElementsByTagName("p");
// 獲得第二個(gè)P元素
myP=myBodyElements.item(1);
//顯示這個(gè)元素的文本
alert(myP.firstChild.nodeValue);
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>
DOM Element 常用方法
1、appendChild(node)
向當(dāng)前節(jié)點(diǎn)對(duì)象的追加節(jié)點(diǎn)。經(jīng)常用于給頁面動(dòng)態(tài)的添加內(nèi)容。
例如下面給div添加一個(gè)文本節(jié)點(diǎn)：
復(fù)制代碼 代碼如下:
<div id="test"></div>
<script type="text/Javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
上面的例子中給DIV添加文本，也可以用newdiv.innerHTML=”A new div”實(shí)現(xiàn)，
不過innerHTML不屬于DOM
2、removeChild(childreference)
移除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，返回被移除的節(jié)點(diǎn)。這個(gè)被移除的節(jié)點(diǎn)可以被插入document樹中別的地方
復(fù)制代碼 代碼如下:
<div id="father"><div id="child">A child</div></div>
<script type="text/Javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3、cloneNode(deepBoolean)
復(fù)制并返回當(dāng)前節(jié)點(diǎn)的復(fù)制節(jié)點(diǎn)，這個(gè)復(fù)制得到的節(jié)點(diǎn)是一個(gè)孤立的節(jié)點(diǎn)，不在document樹中。復(fù)制原來節(jié)點(diǎn)的屬性值，包括ID屬性，所以在把這個(gè)新節(jié)點(diǎn)加到document之前，一定要修改ID屬性，以便使它保持唯一。當(dāng)然如果ID的唯一性不重要可以不做處理。
這個(gè)方法支持一個(gè)布爾參數(shù)，當(dāng)deepBoolean設(shè)置true時(shí)，復(fù)制 當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)，包括該節(jié)點(diǎn)內(nèi)的文本。
復(fù)制代碼 代碼如下:
<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4、replaceChild(newChild, oldChild)
把當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)換成另一個(gè)節(jié)點(diǎn)
例如：
復(fù)制代碼 代碼如下:
<div id="adiv"><span id="innerspan">span</span></div>
<script type="text/Javascript">
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>
5、insertBefore(newElement, targetElement)
給當(dāng)前節(jié)點(diǎn)插入一個(gè)新節(jié)點(diǎn)，如果targetElement被設(shè)置為null，那新節(jié)點(diǎn)被當(dāng)作最后一個(gè)子節(jié)點(diǎn)插入，否則那新節(jié)點(diǎn)應(yīng)該被插入targetElement之前的最近位置。
復(fù)制代碼 代碼如下:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/Javascript">
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="魚與";
</script>
6、click()
執(zhí)行元素的一次點(diǎn)擊，可以用于通過腳本來觸發(fā)onClick函數(shù)
復(fù)制代碼 代碼如下:
<script>
function wow() {
alert("我好象沒有點(diǎn)鼠標(biāo)啊");
}
</script>
<div id="test" onclick='wow()'>hhh</div>
<script type="text/Javascript">
var div = document.getElementById("test");
div.click();
</script>
DOM Element的屬性:（下面是常用的。IE5.0以上,mozllia都支持的）
1、childeNodes 返回所有子節(jié)點(diǎn)對(duì)象,
例如
復(fù)制代碼 代碼如下:
<table id="mylist">
<tr><td>一個(gè)和尚有水喝。</td></tr>
<tr><td>兩個(gè)和尚挑水喝。</td></tr>
<tr><td>三個(gè)和尚沒水喝。</td></tr>
</table>
<script>
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var tr=mylist.childNodes[i];
for(j=0;j<tr.childNodes[j].length; j++) {
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
</script>
2、innerHTML
這是一個(gè)事實(shí)上的標(biāo)準(zhǔn)，不屬于w3c DOM，但是幾乎所有支持DOM的瀏覽器，都支持這個(gè)屬性。通過這個(gè)屬性我們很容易修改一個(gè)元素的HTML。
復(fù)制代碼 代碼如下:
<p><b>新人類，什么？！</b></p>
<script type="text/Javascript">
window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>新新人類，什么？！</b>"
}
</script>
3、style
返回一個(gè)元素的style對(duì)象的引用，通過它我們可以獲得并修改每個(gè)單獨(dú)的樣式。
例如下面的腳本可以修改一個(gè)元素的背景色
document.getElementById("test").style.backgroundColor="yellow"
4、firstChild 返回第一個(gè)子節(jié)點(diǎn)
5、lastChild 返回最后一個(gè)子節(jié)點(diǎn)
6、parentNode 返回父節(jié)點(diǎn)的對(duì)象。
7、nextSibling 返回下一個(gè)兄弟節(jié)點(diǎn)的對(duì)象
8、previousSibling 返回前一個(gè)兄弟節(jié)點(diǎn)的對(duì)象
9、nodeName 返回節(jié)點(diǎn)的HTML標(biāo)記名稱，使用英文的大寫字母，如P, FONT
例如
復(fù)制代碼 代碼如下:
<div id='test'>ddd</div>
<script>
if (document.getElementById("test").nodeName=="DIV")
alert("This is a DIV");
</script>
第一個(gè)例子：
使用DOM1.0 的Javascript動(dòng)態(tài)地創(chuàng)建一個(gè)HTML table。
復(fù)制代碼 代碼如下:
<head>
<title>Sample code </title>
<script>
function start() {
//獲得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//創(chuàng)建一個(gè)<table></table>元素
mytable = document.createElement("TABLE");
//創(chuàng)建一個(gè)<TBODY></TBODY>元素
mytablebody = document.createElement("TBODY");
// 創(chuàng)建行列
for(j=0;j<3;j++) {
//創(chuàng)建一個(gè)<TR></TR>元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//創(chuàng)建一個(gè)<TD></TD>元素
mycurrent_cell=document.createElement("TD");
//創(chuàng)建一個(gè)文本元素
currenttext=document.createTextNode("cell is row "+j+", column "+i);
//把新的文本元素添加到單元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把單元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 屬性設(shè)置為2
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
首先，我們創(chuàng)建一個(gè)table元素
接著，創(chuàng)建一個(gè)TBODY元素，它應(yīng)該是TABLE元素的子元素，
但是現(xiàn)在現(xiàn)在它們之間沒有聯(lián)系。
接著，使用一個(gè)循環(huán)創(chuàng)建TR元素，它們應(yīng)該是TBODY元素的子元素。
對(duì)于每一個(gè)TR，我們使用一個(gè)循環(huán)創(chuàng)建TD元素，它們是TR的子元素。
對(duì)于每一個(gè)TD，我們創(chuàng)建一個(gè)文本節(jié)點(diǎn)元素
現(xiàn)在，我們創(chuàng)建好了這些TABLE, TBODY, TR, TD還有文本元素，但是它們之間的層級(jí)
關(guān)系并沒有建立起來。然后我們以上相反的順序把每一個(gè)對(duì)象添加到它的父節(jié)點(diǎn)上。
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody);
現(xiàn)在DOM層次如下:
BODY
TABLE
TBODY
TR-------------------TR------------------TR
TD-----TD-----TD TD-----TD-----TD TD-----TD-----TD
JavaScript技術(shù)：Document 對(duì)象的常用方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
