how2j.cn


关键字 简介 示例代码
document.getElementById
通过id获取元素节点
示例代码
getElementsByTagName
通过标签名称获取元素节点
示例代码
getElementsByClassName
通过类名获取元素节点
示例代码
getElementsByName
通过表单元素的name获取元素节点
示例代码
null
为什么会获取不到?
示例代码
attributes
获取属性节点
示例代码
childNodes
获取内容节点
示例代码
示例 1 : 通过id获取元素节点   
示例 2 : 通过标签名称获取元素节点   
示例 3 : 通过类名获取元素节点   
示例 4 : 通过表单元素的name获取元素节点   
示例 5 : 为什么会获取不到?   
示例 6 : 获取属性节点   
示例 7 : 获取内容节点   

示例 1 :

通过id获取元素节点

在设计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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

通过标签名称获取元素节点

所有的元素都有标签名
通过 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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

通过类名获取元素节点

与 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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

通过表单元素的name获取元素节点

表单元素都有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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

为什么会获取不到?

参考本例代码,和通过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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

获取属性节点

首先通过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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

获取内容节点

首先通过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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2017-08-22 script部分为什么要写在body内,写在body外部效果不显示,是什么原因
司马懿曹操



script部分为什么要写在body内,写在body外部效果不显示,是什么原因
<!DOCTYPE html>



<html>

<head>
	<title></title>
</head>


<script>
var  divs = document.getElementsByTagName("div");
 
for(i=0;i<divs.length;i++){
  document.write(divs[i]);
  document.write("<br>");
}
 
</script>
<body>






<div>hello javascript</div>
<div>hello BOm </div>
<div> hello Dom</div>




</body>
</html>

							


3 个答案

asd无间 答案时间:2017-12-12
先执行的是<script>标签里面的东西,但是你<script>标签里面用了div的东西,对于<script>而言,它根本就不认识div,那可不执行不出来吗

Borelset 答案时间:2017-10-17
html是顺序加载的,运行脚本的时候后续<div>还没加载上,可以当作不存在的。

how2j 答案时间:2017-08-23
不是body里外的问题,而是div元素前后的问题,多琢磨琢磨




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-08-11 关于顺序执行的一点疑问
呜哩哇啦



如右图代码,设置的button是点击后的函数执行为什么能获得 id ="demo"的元素,script在<p>上面不是应该获取不到这个id
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>


<script>
    function displayDate() {
        document.getElementById("demo").innerHTML=Date();
    }
   /* document.getElementById("abutton").onclick = function () {
     displayDate()
     }*/
</script>
<button type="button" id="abutton" onclick="displayDate()">
d
</button>
    <p id="demo">
    dsadf
    </p>
</body>
</html>

							


1 个答案

how2j 答案时间:2017-08-14
你是声明了函数,而不是执行函数。 真正执行的时候,这些元素已经存在了呀




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-08-03 事例7中childNodes获取节点的集合中包含多少节点
2017-07-05 示例6中 元素出现顺序问题
2017-05-03 那外部js文件的引用不是得放在body下面了
2017-04-19 概念混淆
2016-07-19 getElementsByName




提问之前请登陆
关于 前端基础-HTML DOM-获取节点 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图