DOM的查找方法

最新推荐文章于 2023-06-18 13:40:42 发布

虚诚

最新推荐文章于 2023-06-18 13:40:42 发布

阅读量1k

点赞数

文章标签： dom DOM的查找方法

本文链接：https://blog.csdn.net/qq_43614064/article/details/102963048

版权

在这里插入图片描述实例：

<body>
  <div class="box" id="box" >yuansu</div>
  
 <script>
    // 获取id为box的元素
    var box=document.getElementById("box");
    console.log(box);
 </script>   
</body>

打印结果

<div class="box" id="box">yuansu</div>

通常情况下，id在代码中都是独一无二的，若是一段代码中有两个id=“box”，那么他只返回第一个，比如

<body>
  <div class="box" id="box" >yuansu</div>
  <div class="box" id="box" >元素</div>
 <script>
    // 获取id为box的元素
    var box=document.getElementById("box");
    console.log(box);
 </script>   
</body>

打印结果跟上一个结果是一样的在这里插入图片描述这是第二种方法，因为是要取多个元素，所以返回值是数组，
实例：

<body>
 <ul id="list1">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
 <script>
    // 获取所有的li
    var box=document.getElementsByTagName("li");
    console.log(box.length);
 </script>   
</body>

打印结果：3
因为我们打印的是box的长度，getElementsByTagName()的返回值是数组，数组的长度就是所取的标签的个数，有三个li，所以length是3.
假如你只想去一部分代码中的一部分相同标签，可以跟getElementById()结合使用，实例：
代码在这里插入图片描述取ul下的li

 var box=document.getElementById("list1").getElementsByTagName("li");

这样打印出box.length就是3

虚诚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的查找方法

实例：<body> <div class="box" id="box" >yuansu</div> <script> // 获取id为box的元素 var box=document.getElementById("box"); console.log(box); </script> </...
复制链接

扫一扫