|
|
|
示例 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>
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>
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>
修改与获取内容的值可以通过 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>
元素上的属性，比如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>
因为截至目前的学习进度，还没有学习服务端的内容，那么就在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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
<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"/>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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"/>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-26
改进-判断是否为整数，较为严谨的方法
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2024-07-26
判断是否为整数，较为严谨的方法
3 个答案
虚心求学 审核中 答案时间：2024-07-26 最上面的代码有问题，问题出在：JavaScript 强制转换方式和 java 不同。
JavaScript 正确转换方法： (Number)(str)
而 (Number) str 这样转换是错误的。
虚心求学 跳转到问题位置 答案时间：2024-07-26 改进代码，将判断结果以 span 文字形式输出，而不是 使用 alert 弹窗，影响体验
虚心求学 跳转到问题位置 答案时间：2024-07-26 按理来说 “ 3.” 和 “3.0” 是同样的，在 java 等语言的字面值中 均属于 double 双精度浮点数或folat浮点数(javascript 不存在 double)，也就是非整数。
虽然 “3” 和 “ 3.” 以及 “3.00000” 都等于 3，按照数值大小来说的确是属于整数，但是严格来说（可能有点钻牛角尖了），“3.” 这种只要包含了 点号 就认为是非整数，因为有写成小数的意图。
不过站长的方法十分简便有效，但是 对于 314. 这种数字还是会被判定位整数，不过也符合题意了，也不算bug。
以上是我的见解，恳请大家批评指正。
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2024-07-26
节点属性修改练习
2024-03-11
三问一答
2022-08-26
后两题答案
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 46 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
