js中屬性節點的應用


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//關於節點的屬性:nodeType,nodeName.nodeValue
//在文檔中,任何一個節點都有這三個屬性
//而id,name,value是具體節點的屬性
window.onload = function(){
//1,元素節點的這三個屬性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType);//元素節點:1
alert(bjNode.nodeName);//節點名:li
alert(bjNode.nodeValue);//元素節點沒有nodeValue屬性值:null
//2,屬性節點
var nameAtr = document.getElementById("name").getAttributeNode("name");
alert(nameAtr.nodeType);//屬性節點:2
alert(nameAtr.nodeName);//屬性節點的節點名:屬性名name
alert(nameAtr.nodeValue);//屬性節點的nodeValue屬性:屬性值username
//3,文本節點
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本節點:3
alert(textNode.nodeName);//節點名:#text
alert(textNode.nodeValue);//文本節點的nodeValue屬性值:文本值本身:北京
//nodeType、nodeName是只讀的
//而nodeValue是可以被改變的
//以上三個屬性,只有在文本節點中使用nodeValue讀寫文本時使用最多
}
</script>
</head>
<body>
<p>你喜歡那個城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>香格里拉</li>
<li>天山</li>
</ul>
<br><br>
<p>你喜歡那個游戲</p>
<ul id="game">
<li id="rl">貪吃蛇</li>
<li>搬箱子</li>
<li>魔獸</li>
<li>lol</li>
</ul>
<br><br>
name:<input type="text" name="username" id ="name" value="你是個傻瓜"/>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM