javascript
JavaScript的DOM操作
什么是DOM？
DOM（Document Object Model）文檔對象模型是指頁面中的文檔比如（HTML 、XML等）它是一個樹狀結構其中包含著許多節點，二節點又分為一下幾種：
如HTML的樹狀結構如圖所示：
而JavaScript中就提供了對這些節點的操作。其被封裝在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標簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>除此以外javascript還提供了其它的一些獲取元素的方法。這里不再進行列舉。
我們還可以通過一個節點在找他的父節點相鄰節點子節點點以及天加節點等。
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標簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>上述代碼就可以彈出id為“beige”的父節點的節點名稱
節點的屬性：
- nodeName：節點名稱
- nodeType:節點類型
- nodeValue：節點值
其中節點類型是每個節點都有的屬性而節點名稱及節點值則是個別節點才有的屬性如強行調用則返回undefined；
獲取所有子節點：
DOM對象.childNodes：返回指定對象的所有子節點的數組
獲取第一個子節點
DOM對象.firstChild:返回所有子節點中的第一個節點
獲取最后一個子節點
DOM對象.lastChild:返回所有子節點中的最后一個節點
獲取下一個相鄰的節點
DOM對象.nextSibling：返回指定DOM對象的下一個節點
獲取前一個節點
DOM對象.previousSibling：返回指定對象的前一個對象
創建節點
Javascript提供了一些創建節點的方法如：
<!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標簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>?
上述代碼就是創建了一個文本節點并將其追加到id為beige的div中。
效果圖：
而我們經常使用的就是創建元素節點比如：（<p></p> 、<span></span>)等標記都是元素節點
創建元素節點的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標簽</p><a id ="a" href="#">A</a><div id="small">我是小div</div></div> </body> </html>上述demo就是創建一個超鏈接元素并設置它的文本節點為“我是超鏈接”、屬性節點“href”為百度的地址、style的屬性節點“color”為藍色并將其添加到id為“beige”的i子節點中id為”small”的子節點之前。
效果如圖所示：
轉載于:https://www.cnblogs.com/wangzheand/p/5514802.html
總結
以上是生活随笔為你收集整理的JavaScript的DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cocos2d-x游戏引擎核心(3.x)
- 下一篇： 用js实现放大镜的效果