<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//关于节点的属性：nodeType nodeName nodeValue
//在HTML文档中，任何一个节点都有这三个属性
//id name value是具体节点的属性
window.onload = function() {
//元素节点的三个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType);//元素节点:1
alert(bjNode.nodeName);//LI
alert(bjNode.nodeValue);//null
//属性节点
var nameAttr = document.getElementById("username").getAttributeNode("name");
alert(nameAttr.nodeType);//属性节点：2
alert(nameAttr.nodeName);//name
alert(nameAttr.nodeValue);//username
//文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点：3
alert(textNode.nodeName);//#text
alert(textNode.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>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
name:<input type="text" name="username" id="username" value="umgsai"/>
<br />
</body>
</html>本文出自 “阿凡达” 博客，转载请与作者联系！
原文地址：http://shamrock.blog.51cto.com/2079212/1564554
