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>
相關文章
- Linux作業系統相關內容介紹!Linux作業系統
- Python import相關內容區別介紹( import *** as 、from***import )PythonImport
- JavaScript監聽文字節點內容改變JavaScript
- No.182# 故障相關內容提點
- Nginx 相關介紹Nginx
- 學習內容介紹
- Drupal建站的相關介紹
- 專案內容相關
- JavaScript內建物件介紹(重點介紹Math(),Date(),Array()以及案例應用)JavaScript物件
- Zookeeper 節點特性介紹
- 設計模式的相關介紹設計模式
- 頁面佈局的相關內容
- golang的記憶體相關內容Golang記憶體
- Hadoop-HA節點介紹Hadoop
- camunda相關資料介紹
- RTSP 流相關工具介紹
- 中文Rhino 8新增內容介紹
- Python之set集合的相關介紹Python
- Python之函式的相關介紹Python函式
- 《WCF全面剖析》-章節內容簡介
- JDBC mysql 相關內容筆記JDBCMySql筆記
- Makefile書寫命令相關內容
- DKHhadoop新增新節點功能介紹Hadoop
- Android多渠道打包相關介紹Android
- Go gRPC 系列一:相關介紹GoRPC
- Page Ability生命週期內容介紹!
- weex-toolkit工具的相關命令介紹
- 1-6 至2-2 節 JavaScript的內容JavaScript
- UWB硬體設計相關內容
- Python之logging模組相關介紹Python
- python之pymsql模組相關介紹PythonSQL
- spark相關介紹-提取hive表(一)SparkHive
- thinkphp,onethink都沒有測試相關的內容PHP
- java檔案相關(檔案追加內容、檔案內容清空、檔案內容讀取)Java
- Linux檔案內容檢視相關命令Linux
- .NET Conf China 2024 AI相關內容解析AI
- Python的控制語句有哪些?常見內容介紹!Python
- k8s系列--node(k8s節點介紹,新增節點,移除節點)K8S
- 郵件安全相關開源軟體的介紹