(6)JavaScript DOM元素，文本，属性的区别

元素节点如下
在这里插入图片描述
属性节点如下

文本节点如下

在这里插入图片描述
获取当前节点的时候 getElementByid（“bj”）通过id属性获取单个节点那么它的第一个子节点 .firstNode 是文本节点 .lastNode同样也是文本节点

  {
  
                      元素节点     属性节点    文本节点    注释节点    文档节点
        nodeType：        1          2          3           8           9
        nodeName：     标签名       属性名称     #text
        nodeValue：     null       属性value   标签中间夹的文本值
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  //	关于节点的属性：   nodeType ， nodeName ， nodeValue；
	  //	在文档中  认识一个结点都有这3个属性
	  //	而id，name，value是具体节点的属性。
	  window.onload = function()
	  {
	  	 //1. 元素节点的这3个属性
		 var bjNode = document.getElementById("bj");
		 alert(bjNode.nodeType); 	//元素节点：1
		 alert(bjNode.nodeName); 	//节点名:	LI
		 alert(bjNode.nodeValue); 	//元素节点没有 nodeValue  属性值：null
		 
		 //2. 属性节点
		 var nameAttr = document.getElementById("name").getAttributeNode("name");
		 alert(nameAttr.nodeType);	//属性节点： 2
		 alert(nameAttr.nodeName);	//属性节点的节点名： 属性名 name
		 alert(nameAttr.nodeValue); //属性节点的nodeValue  属性值：属性值   username
		 
		 
		 //3. 文本节点：
		 var textNode = bjNode.firstChild;
		 alert(textNode.nodeType);	//文本节点：3
		 alert(textNode.nodeName);	//节点名： #text
		 alert(textNode.nodeValue);	//文本节点的 nodeValue 属性值：文本值  北京
		 
		 //nodeType  nodeName 是只读的
		 //而nodeValue 是可以被改变的。
		 //以上3个属性 只有在文本节点中使用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>魔兽</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

(6)JavaScript DOM元素，文本，属性的区别

猜你喜欢