DOM学习1-节点概念的初步认识和获取节点

最新推荐文章于 2023-05-25 22:57:05 发布

PERCENTILE__

最新推荐文章于 2023-05-25 22:57:05 发布

阅读量230

点赞数 1

文章标签： DOM

本文链接：https://blog.csdn.net/PERCENTILE__/article/details/86603890

版权

1.DOM的概念
DOM 全拼Document Object Model( 文档对象模型 )

DOM是把html里面的各种数据当作对象进行操作的一种思路。
DOM把所有的html都转换为节点
整个文档是一个节点
元素是节点
元素属性是节点
元素内容是节点
注释也是节点
实战中
通过document.getElementById获取了对应id的某标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点。

<html>
<body>
<div id="d1">hello HTML DOM</div>
 </body>
  <script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
  </html>

2.获取节点
通过id获取元素节点：
document.getElementById
通过标签名称获取元素节点：
document.getElementsByTagName
通过类名(即class=""这种形式)获取元素节点 :
document.getElementsByClassName

<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获取元素节点 :
document.getElementsByName

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

使用时注意js是解释语言，是按顺序进行的。无法获取在它之下的节点。

3.获取属性节点
首先通过getElementById获取元素节点
然后通过元素节点的attributes获取其下的所有属性节点
因为属性节点是多个，所以是以数组的形式返回出来的，
接着通过for循环遍历，查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值
sz[“id”]

4.获取内容节点
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。