how2j.cn

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

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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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>
<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>
<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 Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
因为截至目前的学习进度,还没有学习服务端的内容,那么就在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个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费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 Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
<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"/>
<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个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费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"/>
<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 Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
示例 11 :

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

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费1个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2020-06-27 实例7,尝试着用前几节的知识做了一下,成功运行
由比滨结衣




如上所说
加载中
<html>
<script>
    function check(){
         var name = document.getElementById("name").value;
        if(0!=name.length){
            var firstchar=name.charAt(0);
            if('a'==firstchar||'A'==firstchar)
            {
                document.getElementById("result").style.color="red";
                document.getElementById("result").innerText="账号已经存在"
            }
            else
            {
                document.getElementById("result").style.color="green";
                document.getElementById("result").innerText="账号可以使用"
            }
        }
    }
</script>

<input id="name">

<input type="button" value="验证" onclick="check()">
<span id="result" style=""></span>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-06-11 示例6
养猪侠




设置style中的属性: document.getElementById(‘’).style.color=“”;
<input type="text" id="userAccount" width="200px">
<button onclick="check()">验证</button>
<span id="checkResult" style="color: red"></span>

<script type="text/javascript" >
	
function check(){
	var userAccount = document.getElementById('userAccount').value;
	var firstLetter = userAccount.charAt(0);
	if(firstLetter.localeCompare("a") == 0 || firstLetter.localeCompare("A") == 0){
		checkResultSpan = document.getElementById('checkResult')
		checkResultSpan.style.color ="red";
		checkResultSpan.innerHTML = "账号已经存在";
	}else{
		checkResultSpan = document.getElementById('checkResult')
		checkResultSpan.innerHTML = "账号可以使用";
		checkResultSpan.style.color ="green";
	}
	
}

</script>

							


2 个答案

onewalkerKun
答案时间:2020-09-03
相等 正值的话就是ascii码大于a或者A 负值就是小于

LuzfeI
答案时间:2020-08-09
请问那个 == 0 是什么意思
namechar.localeCompare("a") == 0 || namechar.localeCompare("A") == 0



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-05-17 判断输入框的值是否为整数
2020-05-17 切换不同的图片
2020-05-17 验证账号是否已经存在


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML DOM-节点的属性 的提问

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

上传截图