javascript
JavaScript的DOM操作
什么是DOM？
DOM（Document Object Model）文檔對象模型是指頁面中的文檔比如（HTML 、XML等）它是一個樹狀結(jié)構(gòu)其中包含著許多節(jié)點，二節(jié)點又分為一下幾種：
如HTML的樹狀結(jié)構(gòu)如圖所示：
而JavaScript中就提供了對這些節(jié)點的操作。其被封裝在DOM中
dome：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>javascriptDOM操作</title><script>window.onload(function () {var div = document.getElementById("beige");//獲取Id為“beige”的元素 alert(div.innerText);});</script> </head> <body><div id="beige"><p id="p">我是p標(biāo)簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>除此以外javascript還提供了其它的一些獲取元素的方法。這里不再進行列舉。
我們還可以通過一個節(jié)點在找他的父節(jié)點相鄰節(jié)點子節(jié)點點以及天加節(jié)點等。
demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>javascriptDOM操作</title><script>window.οnlοad=function () {var div = document.getElementById("beige");alert(div.parentNode.nodeName);};</script> </head> <body><div id="beige"><p id="p">我是p標(biāo)簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>上述代碼就可以彈出id為“beige”的父節(jié)點的節(jié)點名稱
節(jié)點的屬性：
- nodeName：節(jié)點名稱
- nodeType:節(jié)點類型
- nodeValue：節(jié)點值
其中節(jié)點類型是每個節(jié)點都有的屬性而節(jié)點名稱及節(jié)點值則是個別節(jié)點才有的屬性如強行調(diào)用則返回undefined；
獲取所有子節(jié)點：
DOM對象.childNodes：返回指定對象的所有子節(jié)點的數(shù)組
獲取第一個子節(jié)點
DOM對象.firstChild:返回所有子節(jié)點中的第一個節(jié)點
獲取最后一個子節(jié)點
DOM對象.lastChild:返回所有子節(jié)點中的最后一個節(jié)點
獲取下一個相鄰的節(jié)點
DOM對象.nextSibling：返回指定DOM對象的下一個節(jié)點
獲取前一個節(jié)點
DOM對象.previousSibling：返回指定對象的前一個對象
創(chuàng)建節(jié)點
Javascript提供了一些創(chuàng)建節(jié)點的方法如：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>javascriptDOM操作</title><script>window.onload=function () {var txt=document.createTextNode("123");txt.nodeValue = "1111111111111";var d = document.getElementById("beige");d.appendChild(txt);};</script> </head> <body><div id="beige"><p></p><p id="p">我是p標(biāo)簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>?
上述代碼就是創(chuàng)建了一個文本節(jié)點并將其追加到id為beige的div中。
效果圖：
而我們經(jīng)常使用的就是創(chuàng)建元素節(jié)點比如：（<p></p> 、<span></span>)等標(biāo)記都是元素節(jié)點
創(chuàng)建元素節(jié)點的demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>javascriptDOM操作</title><script>window.onload=function () {var a = document.createElement("a");a.innerText = "我是超鏈接";a.href = "http://www.baidu.com";a.style.color = "blue";var d = document.getElementById("beige");var lastnode = document.getElementById("small");d.insertBefore(a, lastnode);};</script> </head> <body><div id="beige"><p></p><p id="p">我是p標(biāo)簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>上述demo就是創(chuàng)建一個超鏈接元素并設(shè)置它的文本節(jié)點為“我是超鏈接”、屬性節(jié)點“href”為百度的地址、style的屬性節(jié)點“color”為藍(lán)色并將其添加到id為“beige”的i子節(jié)點中id為”small”的子節(jié)點之前。
效果如圖所示：
轉(zhuǎn)載于:https://www.cnblogs.com/wangzheand/p/5514802.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript的DOM操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cocos2d-x游戏引擎核心(3.x)
- 下一篇： 用js实现放大镜的效果