JavaScript DOM基礎(chǔ)操作實(shí)例
文檔對象模型(Document Object Model)，通常簡稱為DOM，是網(wǎng)站內(nèi)容與JavaScript互通的接口。自JavaScript成為最常用的語言時(shí)JavaScript和DOM通常被視為獨(dú)立的實(shí)體。DOM接口用于存取、遍歷和控制HTML和XML文檔。下面我們將簡單的介紹一些JavaScript DOM的基本操作實(shí)例，包括建立、增加、刪除、克隆、訪問節(jié)點(diǎn)等等。
51CTO推薦閱讀：JavaScript DOM的本質(zhì)及操作方法
1. getElementById(id)
這是通過id來訪問某一元素，最常用的之一，例：
- <html>
- <body>
- <div id="myid">
- test
- </div>
- <script language="javascript">
- alert(document.getElementById("myid").innerHTML);
- </script>
- </body>
- </html>
注意點(diǎn)：如果元素的ID不是***，則會(huì)取得***個(gè)該ID名稱的元素。
2. getElementsByName(name)
這是通過name來取得某一堆元素（作為數(shù)組），看 Element后面有個(gè)小s就知道了，ID是HTML文檔中要求***的，name可以不是***，如checkbox、radio等地方會(huì)用到多個(gè) input用同一個(gè)name來識(shí)別是否為同黨。對了，getElementsByName(name)僅用于取得input、radio、 checkbox等元素，如<input name="myradio" type="radio" />。
3. getElementsByTagName(tagname)
看這方法就知道這也是取得某一堆元素（作為數(shù)組），是通過TagName也就是標(biāo)簽名來取得。你可以遍歷這個(gè)數(shù)組獲得每一個(gè)單獨(dú)的元素。當(dāng)一個(gè)DOM結(jié)構(gòu)很大時(shí)，可以通過它來有效地縮小搜查范圍。
- <html>
- <head>
- <script>
- function test() {
- testall=document.getElementsByTagName("body");
- testbody=testall.item(0); //獲得所有tagName是body的元素（當(dāng)然每個(gè)頁面只有一個(gè)）
- testall=testbody.getElementsByTagName("p");// 獲得body子元素種的所有P元素
- testnode=testall.item(1); // 獲得第二個(gè)P元素
- alert(testnode.firstChild.nodeValue); //顯示這個(gè)元素的文本 }
- </script>
- </head>
- <body>
- <p>hi</p>
- <p>hello</p>
- <script language="javascript">
- test();
- </script>
- </body>
- </html>
4. appendChild(node)
向當(dāng)前的元素（應(yīng)該叫對象比較恰當(dāng)）追加節(jié)點(diǎn)。
- <html>
- <body>
- <head>
- </head>
- <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>
- </body>
- </html>
剛才我在***個(gè)例子中為了顯示出內(nèi)容，用了innerHTML，剛才看到文章才得知innerHTMl不屬于DOM。
5. removeChild(childreference)
刪除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，返回被刪除的節(jié)點(diǎn)。這個(gè)被刪除的節(jié)點(diǎn)可以被插入到別的地方。
- <html>
- <body>
- <div id="parent"><div id="child">A child</div></div>
- <script language="javascript">
- var childnode=document.getElementById("child")
- var removednode=document.getElementById("parent").removeChild(childnode)
- </script>
- </body>
- </html>
6. cloneNode(deepBoolean)
復(fù)制并返回當(dāng)前節(jié)點(diǎn)的復(fù)制節(jié)點(diǎn)，復(fù)制節(jié)點(diǎn)是一個(gè)孤立節(jié)點(diǎn)，它復(fù)制了原節(jié)點(diǎn)的屬性，在把這個(gè)新節(jié)點(diǎn)加入到document前，根據(jù)需要修改ID屬性確保其ID的***。這個(gè)方法支持一個(gè)布爾參數(shù)，當(dāng)deepBoolean設(shè)置true時(shí)，復(fù)制當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)，包括該節(jié)點(diǎn)內(nèi)的文本。
- <html>
- <body>
- <p id="mynode">test</p>
- <script language="javascript">
- p=document.getElementById("mynode")
- ppclone = p.cloneNode(true);
- p.parentNode.appendChild(pclone);
- </script>
- </body>
- </html>
7. replaceChild(newChild, oldChild)
把當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)換成另一個(gè)節(jié)點(diǎn)。
- <html>
- <body>
- <div id="mynode2">
- <span id="orispan">span</span>
- </div>
- <script language="javascript">
- var orinode=document.getElementById("orispan");
- var newnode=document.createElement("p");
- var text=document.createTextNode("test ppp ");
- newnode.appendChild(text);
- document.getElementById("mynode2").replaceChild(newnode, orinode);
- </script>
- </body>
- </html>
【編輯推薦】
