HTML DOM系列教材（三）- HTML DOM 获取元素节点

工具版本兼容问题

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

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

示例 1 :

节点名称

edit 顶折

纠问

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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

节点值

edit 顶折

纠问

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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

节点类型

edit 顶折

纠问

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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

元素的文本内容

edit 顶折

纠问

修改与获取内容的值可以通过 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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

元素上的属性

edit 顶折

纠问

元素上的属性，比如id,value 可以通过 . 直接访问
如果是自定义属性，那么可以通过如下两种方式来获取

getAttribute("test")
attributes["test"].nodeValue

注: class需要通过className获取

运行效果

代码行数较多，请点击查看

<html>
   
<div id="d1">hello HTML DOM</div>

<script>

function get(){

  var input1 = document.getElementById("input1");
  var s = "id="+input1.id + "<br>";
  s += "value="+input1.value + "<br>";
  s += "class="+input1.className + "<br>";
  s += "test="+input1.getAttribute("test")+ "<br>";
  s += "test="+input1.attributes["test"].nodeValue+ "<br>";

  document.getElementById("d1").innerHTML= s;
}
</script>

<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>

<div style="height:30px"></div>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

练习-验证账号是否已经存在

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

因为截至目前的学习进度，还没有学习服务端的内容，那么就在js使用简单的验证规则：如果账号是以a或者A开头的，那么就提示已经存在了。

代码行数较多，请点击查看

<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
   var firstChar = name.charAt(0);
   if('a'==firstChar || 'A'==firstChar)
    noMessage.style.display="inline";
   else
    yesMessage.style.display="inline";
  }
}
</script>
 
<input id="name">
 
<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

答案-验证账号是否已经存在

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
   var firstChar = name.charAt(0);
   if('a'==firstChar || 'A'==firstChar)
    noMessage.style.display="inline";
   else
    yesMessage.style.display="inline";
  }
}
</script>

<input id="name">

<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

练习-切换不同的图片

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

<script>
function switch1(){
var img = document.getElementById("img");
img.src = "https://how2j.cn/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="https://how2j.cn/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="https://how2j.cn/study/katarina.jpg"/>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

答案-切换不同的图片

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

<script>
function switch1(){
var img = document.getElementById("img");
img.src = "https://how2j.cn/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="https://how2j.cn/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="https://how2j.cn/study/katarina.jpg"/>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

练习-判断输入框里的值，是否是整数(浮点数也不行)

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

示例 11 :

答案-判断输入框里的值，是否是整数(浮点数也不行)

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费1个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

<div style="height:500px">
<input type="text" value="3.1415926" id="in">
<button onclick="judge()">判断</button>
<span id="out"></span>
</div>

<script>
function judge(){
var num=document.getElementById("in").value;
if(parseInt(num)==num){
document.getElementById("out").innerHTML="是整数";}
else{
document.getElementById("out").innerHTML="不是整数";}
}
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（二）- 获取元素节点

HTML DOM系列教材（四）- 样式

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-03-11 三问一答

起个名

关于前端部分-HTML DOM-节点的属性的提问

1.验证账号是否已经存在 2.切换不同的图片 3.判断输入框里的值，是否是整数(浮点数也不行)

//1.
<html>
	<div id="dxxx">verify the account</div>
	
	<script>
		function showHello(){
			alert("账号已经存在");
		}
		function showHello1(){
			alert("账号不存在");
		}
		function get(){
			
			var s = document.getElementById("input1").value;
			if(s[0] == "a" || s[0] == "A")
				showHello();
			else
				showHello1();
			
		}
		
	</script>
	
	<input id="input1" class = "class1 class2" test= "t1" value ="">
	<button onclick="get()">验证</button>
	
	<div style="height:30px"></div>
</html>

//2.

<html>
	<script>
		function switchSrc1(){
			var img = document.getElementById("img");
			img.src = "24.jpg";
		}
		function switchAttNode1(){
			var img = document.getElementById("img");
			img.attributes["src"].nodeValue = "29.jpg";
		}
	</script>
		
	<button onclick="switchSrc1()">通过src属性切换图片1</button>
	<button onclick="switchAttNode1()">通过属性节点切换图片1</button>
	<br>
	<br>
	<img id="img" width="100" src="23.jpg">
</html>

//3.

<html>
	<div id="d">verify the inputbox</div>
	
	<script>
		function showHello(){
			alert("输入框内容是整数");
		}
		function showHello1(){
			alert("输入框内容不是整数");
		}
		function check(){
			
			var s = document.getElementById("input1").value;
			// 参考java中级组件综合练习数字校验
			var tf = true;
			for (var i = 0;i < s.length;i++) {
				if (s[i] != '0' && s[i] != '1' &&s[i] != '2' && s[i] != '3' && s[i] != '4' && s[i] != '5' && s[i] != '6' && s[i] != '7' && s[i] != '8' && s[i] != '9' ) {
					tf = false;
					break;
				} 
			}
			if(tf == true)
				showHello();
			else
				showHello1();
		}
		
	</script>
	
	<input id="input1" class = "class1" test= "t1" value ="">
	<button onclick="check()">判断输入框里的值是否是整数</button>
	
	<div style="height:30px"></div>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-08-26 后两题答案

大D

关于前端部分-HTML DOM-节点的属性的提问

后两题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
function src1(){
 var element=document.getElementById("imgmg");
 element.src="D:/前端工具/code/D22010801765-001102667398090.jpg";
}
function attribute1(){
    var element=document.getElementById("imgmg");
 element.attributes[1].nodeValue="./D22010801765-001102667398090.jpg";
}
function verify(){
    var num=document.getElementById("inputText").value;
    var spanelement=document.getElementById("fl");
    if(parseInt(num)==num){
        spanelement.innerText="是整数";
        spanelement.setAttribute("style","color:red")
    }else if(num==""){
        spanelement.innerText="";
    }else{
        spanelement.innerText="不是整数";
        spanelement.setAttribute("style","color:green")
    }

}
</script>
<body>
    <button onclick="src1()">通过src切换</button>
</br>
    <button onclick="attribute1()">通过属性节点切换</button>
    <br>
    <img id="imgmg" src="./tanchuang2.png" alt="">
    <input id="inputText" type="text">
    <button onclick="verify()">验证</button>
    <span id="fl"></span>
</body>
</html

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-08-18 答案

大D

关于前端部分-HTML DOM-节点的属性 -答案-验证账号是否已经存在的提问

验证是否存在

<html>
<script>
function get(){
var input1=document.getElementById("input1").value;
var s=document.getElementById("content");
if(input1.charAt(0)=='a'||input1.charAt(0)=='A'){
 s.innerText="已注册";
 s.setAttribute("style","color: red;")
}else if(input1.charAt(0)==""){
s.innerText="";
}else{
 s.innerText="可以使用";
 s.setAttribute("style","color: green;")
 }
 } 

</script>



<body>
<div>
<input id="input1" class="class1" >
<button onclick="get()">验证</button>
<span id="content"></span>
</div>

</body>
</html>

1 个答案

CharlieLong
答案时间：2023-11-06

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<!--练习1：验证账号是否已经存在-->
<!--练习2：通过src\属性节点切换不同的图片-->
<!--练习3：判断输入框里的值，是否是整数-->
<head>
    <meta charset="UTF-8">
    <title>DOM练习</title>
</head>
<body>
<h3>Practice1:验证账号是否已经存在</h3>
<div>
    <label>
        <input type="text" id="countID">
    </label>
    <button onclick="checkCountisAvailable()">验证</button>
    <span id="return" style="color: blue"></span>
</div>
<h3>Practice2:通过src\属性节点切换不同的图片</h3>
<img id="picture" src="/src/frontEnd/CSS/practice/img_Heroes/6.jpg" alt="无法显示图片">
<div>
    <button onclick="switchPicturebyAttribute()">通过src属性切换图片</button>
    <button onclick="switchPicturebyNodes()">通过属性节点切换图片</button>
</div>
<h3>Practice3:判断输入框里的值，是否是整数</h3>
<label>
    <input type="text" id="inputCheck"  onkeyup="checkisInt()">
</label>
<span id="returnisInt"></span>

<script>
    function checkCountisAvailable(){
        let countID=document.getElementById("countID").value;
        let characterAT1=countID.charAt(0).toLowerCase();
        if(characterAT1==="a"){
            document.getElementById("return").innerHTML="账号已经存在";
            document.getElementById("return").attributes["style"].nodeValue="color: red";
        }else if(characterAT1!=="a"&&characterAT1!==""){
            document.getElementById("return").innerHTML="账号可以使用";
            document.getElementById("return").attributes["style"].nodeValue="color: black";
        }
        else if(characterAT1===""){
            document.getElementById("return").innerHTML="请输入账号";
            document.getElementById("return").attributes["style"].nodeValue="color: red";
        }
    }
    function switchPicturebyAttribute(){
        let imgElement=document.getElementById("picture");
        imgElement.src="/src/frontEnd/CSS/practice/img_Heroes/8.jpg"
    }
    function switchPicturebyNodes(){
        let imgElement=document.getElementById("picture");
        imgElement.attributes["src"].nodeValue="/src/frontEnd/CSS/practice/img_Heroes/9.jpg"
    }
    function checkisInt(){
        let input=Number(document.getElementById("inputCheck").value);
        let returnisInt=document.getElementById("returnisInt")
        if(Number.isInteger(input)){
            returnisInt.innerHTML="是整数";
        }else
            returnisInt.innerHTML="请录入整数!";
    }
</script>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-09-24 练习-验证账号是否已经存在判断输入框里的值，是否是整数(浮点数也不行)

logiczqr

关于前端部分-HTML DOM-节点的属性 -练习-验证账号是否已经存在的提问

答案

<input class="ic" type="text">
 <button onclick="check()">账号是否存在</button>
 <button onclick="check2()">是否是整数</button>
 <script>
 	function check(){
		var i = document.getElementsByTagName("input");
		var v = i[0].value;
		if(v.charAt(0)=="a"||v.charAt(0)=="A"){
			alert('账号已存在!');
		}
	}
	function check2(){
		var i = document.getElementsByClassName("ic");
		var v = i[0].value;
		if(parseInt(v)==v){
			alert('是整数!');
		}else{
			alert('不是整数!');
		}
	}
 </script>

1 个答案

Leslie_sakura
答案时间：2024-04-16

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-03-28 练习三答案

镜子里的笑脸

关于前端部分-HTML DOM-节点的属性 -答案-判断输入框里的值，是否是整数(浮点数也不行) 的提问

用了Math对象的方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习三</title>
</head>
<body>
<input type="text" id="s1">
<input type="button" value="是否为整数" onclick="f1()">
<span id="s2"></span>
<script>
    function f1() {
        s1 = document.getElementById("s1").value;
        n = Number(s1);
        if (isNaN(n)) {
            document.getElementById("s2").innerHTML =n;
        } else if(n==0){document.getElementById("s2").innerHTML = "是整数";}
        else if (Math.abs(n) < 1) {
            document.getElementById("s2").innerHTML = "不是整数";
        } else if (n / Math.round(n) == 1) {
            document.getElementById("s2").innerHTML = "是整数";
        } else {
            document.getElementById("s2").innerHTML = "不是整数";
        }
    }
</script>
</body>
</html>

2 个答案

54Mozu
答案时间：2022-12-12

代码超过 5行，点击查看

jessic
答案时间：2021-06-21

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 43 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-节点的属性的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图