|
|
|
示例 2 : 通过标签名称获取元素节点 示例 3 : 通过类名获取元素节点 示例 4 : 通过表单元素的name获取元素节点 示例 5 : 为什么会获取不到? 示例 6 : 获取属性节点 示例 7 : 获取内容节点
在设计html的时候，一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象 <html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
所有的元素都有标签名
通过 getElementsByTagName 根据标签名称获取一个元素数组。 <html>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
<html>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
参考本例代码，和通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。
这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。 <html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue 如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性 as["id"].nodeValue 注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习节点的属性 <html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
</html>
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
</html>
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。 注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习节点的属性 <html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-06-30
我是小白，我想请问下节点是用来干什么的，有什么作用？
2022-02-06
为什么评论都是2021年的呢，还有人看吗？
7 个答案
atatim111 跳转到问题位置 答案时间：2023-11-16 为什么没有,一直都有
1014026348 跳转到问题位置 答案时间：2023-05-31 有
攀爬的fly 跳转到问题位置 答案时间：2023-04-16 有
请继续学习 跳转到问题位置 答案时间：2023-02-27 有：）
MayBeMT 跳转到问题位置 答案时间：2022-04-07 有呀~
logiczqr 跳转到问题位置 答案时间：2022-03-25 来了
hcc520520 跳转到问题位置 答案时间：2022-02-07 当然
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-07-01
CSS的Style也是attributes吗
2020-03-25
为什么我用forin循环属性节点，明明数组长度是3，但是还是输出了一堆不明物体......
2019-12-27
为啥变红啊，在viscode编辑的
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 8 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
