js 根据id，标签名，属性查找元素

最新推荐文章于 2025-06-10 09:18:20 发布

原创最新推荐文章于 2025-06-10 09:18:20 发布 · 1.9w 阅读

11 ·

CC 4.0 BY-SA版权

练习同时被 3 个专栏收录

201 篇文章

订阅专栏

笔记

185 篇文章

订阅专栏

59 篇文章

订阅专栏

本文介绍如何使用getElementById, getElementsByClassName, getElementsByTagName和getElementsByName等方法在网页中精确查找和定位元素，通过实例演示了每种方法的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查找元素

getElementById：根据ID，获取的是一个元素
getElementsByClassName：根据class属性查找元素，返回的是数组
getElementsByTagName：根据标签名查找元素，返回的是数组
getElementsByName：根据name属性查找元素，返回的是数组

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <a id='baidu' href="http://www.baidu.com"> 百度一下</a>
       <div class="shici">安能摧眉折腰事权贵，使我不得开心颜。</div>
       <div class="shici">山重水复疑无路，柳暗花明又一村</div>
       <div class="shici">年年岁岁花相似，岁岁年年人不同</div>
<span name="gequ">健康歌</span>
       <span name="gequ">亲亲我的宝贝</span>
       <span name="gequ">青花瓷</span>

   </body>
   <script>
//根据ID获取元素
var baidu= document.getElementById('baidu')
alert(baidu.innerText)
//根据class属性查找元素
var shici=document.getElementsByClassName('shici')
alert(shici[1].innerText)
//根据标签名查找元素
var aDiv=document.getElementsByTagName('div')
alert(aDiv[2].innerText)
//根据name属性查找元素
var aSpan=document.getElementsByName('gequ')
alert(aSpan[1].innerText)