元素节点如下
属性节点如下
文本节点如下
获取当前节点的时候 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>