javascript的節點相關內容介紹
對於節點的掌握是直觀重要的,在實際應用中所謂的DOM操作,一般就是操作的節點,本章節就來簡單介紹一下相關內容。
一.元素節點:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ alert(ali[i].nodeName); alert(ali.nodeType); alert(ali.nodeValue); } } </script> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> </body> </html>
以上程式碼可以便利li元素節點,並且依次彈出節點相應屬性的屬性值。
二.屬性節點:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ var attrElement=ali[i].getAttributeNode("value") alert("attrElement.nodeName "+attrElement.nodeName); alert("attrElement.nodeType "+attrElement.nodeType); alert("attrElement.nodeValue " + ali[i].getAttribute("value")); } } </script> </head> <body> <ul> <li value="螞蟻一">螞蟻部落一</li> <li value="螞蟻二">螞蟻部落二</li> <li value="螞蟻三">螞蟻部落三</li> </ul> </body> </html>
以上程式碼可以便利li元素的value屬性節點,並彈出相關屬性的屬性值。
三.文字節點:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ alert(ali[i].childNodes[0].nodeName); alert(ali.childNodes[0].nodeType); alert(ali.childNodes[0].nodeValue); ali.childNodes[0].nodeValue="新螞蟻部落"; alert(ali.childNodes[0].nodeValue); } } </script> </head> <body> <ul> <li value="螞蟻一">螞蟻部落一</li> <li value="螞蟻二">螞蟻部落二</li> <li value="螞蟻三">螞蟻部落三</li> </ul> </body> </html>
以上程式碼可以便利li元素的文字節點的相關屬性,並且會修改文字節點的內容。
四.節點的替換:
有時候我們需要用一個節點去替換另一個節點,使用replaceChild()函式即可實現。
語法結構:
[JavaScript] 純文字檢視 複製程式碼var reference = element.replaceChild(newChild,oldChild);
element是父元素,引數分別是新節點和將要被替換的節點,函式的返回值是新節點的引用。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); var ofirst=document.getElementById("first"); var ospan=document.getElementById("myspan"); box.replaceChild(ospan,ofirst); } </script> </head> <body> <ul id="box"> <li id="first">螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> <span id="myspan">大家好</span> </body> </html>
以上程式碼中,將第一個li元素用span元素替換。
五.查詢屬性節點:
1.獲取指定指定屬性的屬性值:
使用getAttribute()函式可以返回執行屬性的屬性值。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <head> <script type="text/javascript"> window.onload=function(){ var ofirst=document.getElementById("first"); alert(ofirst.getAttribute("name")); } </script> </head> <body> <ul> <li name="螞蟻" id="first">螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> </body> </html>
以上程式碼可以彈出第一個li元素的name屬性值。
2.設定元素的屬性節點:
使用setAttribute()函式可以給指定元素建立新的屬性節點和屬性值。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <head> <script type="text/javascript"> window.onload=function(){ var ofirst=document.getElementById("first"); ofirst.setAttribute("name","螞蟻"); alert(ofirst.getAttribute("name")); } </script> </head> <body> <ul> <li id="first">螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> </body> </html>
以上程式碼可以為第一個li元素建立一個新的屬性節點並設定屬性值,最後彈出此屬性值。
六.建立一個新的元素節點:
使用createElement()函式可以建立一個新的元素節點:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ width:100px; height:100px; background-color:green; } </style> <head> <script type="text/javascript"> window.onload=function(){ var odiv=document.createElement("div"); document.body.appendChild(odiv); } </script> </head> <body> </body> </html>
以上程式碼在body中建立一個div元素。
七.建立一個文字節點:
使用createTextNode()函式可以建立一個文字節點。
語法結構如下:
[JavaScript] 純文字檢視 複製程式碼var textNode = document.createTextNode(text);
建立一個文字節點,並且返回文字節點的引用,引數是文字內容。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ width:100px; height:100px; background-color:green; } </style> <head> <script type="text/javascript"> window.onload=function(){ var odiv=document.createElement("div"); document.body.appendChild(odiv); var textNode=document.createTextNode("螞蟻部落"); odiv.appendChild(textNode); } </script> </head> <body> </body> </html>
以上程式碼可以為div建立一個文字節點。
八.刪除節點:
使用removeChild()函式可以刪除一個指定的節點:
[JavaScript] 純文字檢視 複製程式碼var reference = element.removeChild(node)
刪除一個指定節點,並返回被刪除節點的引用。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ width:100px; height:100px; background-color:green; } </style> <head> <script type="text/javascript"> window.onload=function(){ var odiv=document.createElement("div"); document.body.appendChild(odiv); var textNode=document.createTextNode("螞蟻部落"); odiv.appendChild(textNode); odiv.removeChild(textNode); } </script> </head> <body> </body> </html>
相關文章
- javascript時間日期相關內容介紹JavaScript
- javascript關於URI相關內容簡單介紹JavaScript
- Linux作業系統相關內容介紹!Linux作業系統
- Python import相關內容區別介紹( import *** as 、from***import )PythonImport
- javascript節點型別詳細介紹JavaScript型別
- JavaScript監聽文字節點內容改變JavaScript
- javascript DOM元素節點操作簡單介紹JavaScript
- Java相關技術點及技術內容Java
- Nginx 相關介紹Nginx
- mysql相關內容索引MySql索引
- oracle相關內容索引Oracle索引
- Zookeeper 節點特性介紹
- 系統相關內容索引索引
- JavaScript內建物件介紹(重點介紹Math(),Date(),Array()以及案例應用)JavaScript物件
- 設計模式的相關介紹設計模式
- 使用NGUINGUI的相關介紹NGUI
- 頁面佈局的相關內容
- golang的記憶體相關內容Golang記憶體
- js實現的點選顯示或者隱藏相關內容JS
- 《WCF全面剖析》-章節內容簡介
- 點選載入更多網頁內容效果簡單介紹網頁
- RTSP 流相關工具介紹
- mvn相關介紹和命令
- [android]androguard相關介紹Android
- JDBC mysql 相關內容筆記JDBCMySql筆記
- Makefile書寫命令相關內容
- SAP的月結相關流程介紹
- 工控組態程式設計相關知識點介紹程式設計
- Hadoop-HA節點介紹Hadoop
- Page Ability生命週期內容介紹!
- 單節點DG的switchover切換介紹
- MySQL 5.6授權表的內容用途介紹MySql
- 1-6 至2-2 節 JavaScript的內容JavaScript
- Perl6 檔案相關內容
- proc檔案系統相關內容
- 網路配置相關內容總結
- oracle goldengate 相關概念介紹OracleGo
- 機器學習,深度學習相關介紹機器學習深度學習