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>

posted @ 2016-10-16 21:39  caocx  阅读(2164)  评论(0编辑  收藏  举报