节点属性

关键字	简介	示例代码
nodeName	节点名称	示例代码
nodeValue	节点值	示例代码
nodeType	节点类型	示例代码
innerHTML	元素的文本内容	示例代码
id value className	元素上的属性	示例代码
	练习-验证账号是否已经存在	示例代码
	答案-验证账号是否已经存在	示例代码
	练习-切换不同的图片	示例代码
	答案-切换不同的图片	示例代码
	练习-判断输入框里的值，是否是整数(浮点数也不行)	示例代码
	答案-判断输入框里的值，是否是整数(浮点数也不行)	示例代码

示例 1 : 节点名称
 示例 2 : 节点值
 示例 3 : 节点类型
 示例 4 : 元素的文本内容
 示例 5 : 元素上的属性
 示例 6 :  练习-验证账号是否已经存在
 示例 7 :  答案-验证账号是否已经存在
 示例 8 :  练习-切换不同的图片
 示例 9 :  答案-切换不同的图片
 示例 10 :  练习-判断输入框里的值，是否是整数(浮点数也不行)
示例 11 :  答案-判断输入框里的值，是否是整数(浮点数也不行)

示例 1 :

节点名称

提问

nodeName表示一个节点的名字
如本例：
document.nodeName 文档的节点名，是固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text

运行效果

<html>
  
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>

示例 2 :

节点值

提问

nodeValue表示一个节点的值
如本例：
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容 #text

运行效果

<html>
   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>

示例 3 :

节点类型

提问

nodeType表示一个节点的值
不同的节点类型，对应的节点类型值是不一样的
如本例：
document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3

运行效果

<html>
    
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>

示例 4 :

元素的文本内容

提问

修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。效果是一样的。

运行效果

<html>
    
<div id="d1">hello HTML DOM</div>
<script>
 
function changeDiv1(){
  document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
  document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
 
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
 
</html>