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