JavaScript DOM编程学习笔记-节点属性

原创

umgsai 2014-10-15 20:57:03 博主文章分类：html ©著作权

文章标签 null function 元素 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者umgsai的原创作品，如需转载，请与作者联系，否则将追究法律责任

<!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>