主要概述一些有用的基礎(chǔ)的DOM的方法以及怎樣用使用javascript使用它們。

可以實(shí)現(xiàn)比如動(dòng)態(tài)地新建控制移動(dòng)HTML元素。

Document 對(duì)象的常用方法

1、getElementById(id)

通過(guò)元素的ID訪(fǎng)問(wèn)元素，這是DOM一個(gè)基礎(chǔ)的訪(fǎng)問(wèn)頁(yè)面元素的方法，我們要經(jīng)常用到它.

例如下面的例子，我們可以同DIV的ID迅速的訪(fǎng)問(wèn)到它，而不必通過(guò)DOM層層遍歷，

h

Just for testing;

Just for testing;

var div=document.getElementById(‘divid’);

alert(div.nodeName);

注意使用這個(gè)函數(shù)時(shí)如果元素的ID不是唯一的，那么會(huì)獲得第一個(gè)符合條件的元素。

在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也會(huì)被訪(fǎng)問(wèn)到

例如下面的例子中，獲得的元素是input：

Just for testing;

var div=document.getElementById('divid');

alert(div.nodeName);

2、getElementsByName(name)

返回名字是name的元素?cái)?shù)組，在IE6中元素ID匹配這個(gè)名字的話(huà)，這個(gè)元素也將包括在內(nèi)，而且getElementsByName()僅用于象input,radio,checkbox等元素對(duì)象。

象下面例子中g(shù)eorges數(shù)組的長(zhǎng)度應(yīng)該是0。

ff

var georges=document.getElementsByName("george");

alert(georges.length);

3、getElementsByTagName(tagname)

getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(數(shù)組)。你可以遍歷這個(gè)數(shù)組獲得每一個(gè)單獨(dú)的子元素。當(dāng)處理很大的DOM結(jié)構(gòu)，使用這種方法可以很容易的所有縮小范圍。

function start() {

// 獲得所有tagName是body的元素(當(dāng)然每個(gè)頁(yè)面只有一個(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);

}

hi

hello

DOM Element 常用方法

1、appendChild(node)

向當(dāng)前節(jié)點(diǎn)對(duì)象的追加節(jié)點(diǎn)。經(jīng)常用于給頁(yè)面動(dòng)態(tài)的添加內(nèi)容。

例如下面給div添加一個(gè)文本節(jié)點(diǎn)：

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

上面的例子中給DIV添加文本，也可以用newdiv.innerHTML=”A new div”實(shí)現(xiàn)，

不過(guò)innerHTML不屬于DOM

2、removeChild(childreference)

移除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，返回被移除的節(jié)點(diǎn)。這個(gè)被移除的節(jié)點(diǎn)可以被插入document樹(shù)中別的地方

A child

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

3、cloneNode(deepBoolean)

復(fù)制并返回當(dāng)前節(jié)點(diǎn)的復(fù)制節(jié)點(diǎn)，這個(gè)復(fù)制得到的節(jié)點(diǎn)是一個(gè)孤立的節(jié)點(diǎn)，不在document樹(shù)中。復(fù)制原來(lái)節(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)的文本。

11111

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

span

var oldel=document.getElementById("innerspan");

var newel=document.createElement("p");

var text=document.createTextNode(“ppppp”);

newel.appendChild(text);

document.getElementById("adiv").replaceChild(newel, oldel);

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之前的最近位置。

熊掌我所欲也!

var lovespan=document.getElementById("lovespan")

var newspan=document.createElement("span")

var newspanref=document.body.insertBefore(newspan, lovespan)

newspanref.innerHTML="魚(yú)與";

function wow() {

alert("我好象沒(méi)有點(diǎn)鼠標(biāo)啊");

}

hhh

var div = document.getElementById("test");

div.click();

DOM Element的屬性:(下面是常用的。IE5.0以上,mozllia都支持的)

1、childeNodes? 返回所有子節(jié)點(diǎn)對(duì)象,

例如

一個(gè)和尚有水喝。

兩個(gè)和尚挑水喝。

三個(gè)和尚沒(méi)水喝。

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i

var tr=mylist.childNodes[i];

for(j=0;j

var td=tr.childNodes[j];

msg+=td.innerText;

}

}

alert(msg);

2、innerHTML

這是一個(gè)事實(shí)上的標(biāo)準(zhǔn)，不屬于w3c DOM，但是幾乎所有支持DOM的瀏覽器，都支持這個(gè)屬性。通過(guò)這個(gè)屬性我們很容易修改一個(gè)元素的HTML。

新人類(lèi)，什么？！

window.οnlοad=function(){

document.getElementsByTagName("p")[0].innerHTML="新新人類(lèi)，什么？！"

}

3、style

返回一個(gè)元素的style對(duì)象的引用，通過(guò)它我們可以獲得并修改每個(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)記名稱(chēng)，使用英文的大寫(xiě)字母，如P, FONT

例如

ddd

if (document.getElementById("test").nodeName=="DIV")

alert("This is a DIV");

第一個(gè)例子：

使用DOM1.0?? 的javascript動(dòng)態(tài)地創(chuàng)建一個(gè)HTML table。

Sample code

function start() {

//獲得body的引用

var mybody=document.getElementsByTagName("body").item(0);

//創(chuàng)建一個(gè)

元素

mytable = document.createElement("TABLE");

//創(chuàng)建一個(gè)

元素

mytablebody = document.createElement("TBODY");

// 創(chuàng)建行列

for(j=0;j<3;j++) {

//創(chuàng)建一個(gè)

元素

mycurrent_row=document.createElement("TR");

for(i=0;i<3;i++) {

//創(chuàng)建一個(gè)

元素

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

}

總結(jié)

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

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