前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)

简介: 本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。

一、通过id获取元素(一次一个元素)

一个id在一个页面是唯一的,所以我们可以使用

document.getElementById("id名")

获取元素,使用变量来接收,直接就能获取到这个元素,通过 id 名去获取元素,一次只能获取一个元素。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
  </script>
</body>

</html>

在这里插入图片描述
直接能获取到这个元素。

二、通过标签名元素(一次多个元素)

通过标签名获取:

document.getElementsByTagName("标签名");

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing = document.getElementsByTagName('div')
    console.log(Liuqing, 'Liuqing')
    console.log(Liuqing[0], 'Liuqing[0]')
  </script>
</body>

</html>

在这里插入图片描述

通过

 var Liuqing = document.getElementsByTagName('div')

获取所有div标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是id名为box的元素。

三、通过类名元素(一次多个元素)

通过类名获取:

document.getElementsByClassName("类名");

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing = document.getElementsByClassName('Liuqing')
    console.log(Liuqing, 'Liuqing')
    console.log(Liuqing[0], 'Liuqing[0]')
  </script>
</body>

</html>

在这里插入图片描述
通过

 var Liuqing = document.getElementsByClassName('Liuqing')

获取所有class名称为Liuqing的标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是第一个calss名称为Liuqing的元素。

四、querySelector(获取第一个匹配成功的元素)

用法:

document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')

注意:
获取第一个匹配成功的元素

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing Liuqing2">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing1 = document.querySelector('.Liuqing')
    console.log(Liuqing1, 'Liuqing1')
    var Liuqing2 = document.querySelector('.Liuqing2')
    console.log(Liuqing2, 'Liuqing2')

  </script>
</body>

</html>

在这里插入图片描述

五、querySelectorAll(获取所有匹配成功的元素)

用法:

document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')

注意:
获取所有匹配成功的元素

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
   
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box" class="Liuqing">
    <span class="smallSpan">
      span内容
    </span>
  </div>
  <div class="Liuqing">
    <span class="smallSpan">
      span内容
    </span>
  </div>
  <script>
    var Liuqing = document.querySelectorAll('.Liuqing .smallSpan')
    console.log(Liuqing, 'Liuqing')

  </script>
</body>

</html>

在这里插入图片描述
document.querySelectorAll中可以写选择样式,css中怎么写,这里就可以怎么写。

目录
相关文章
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
6月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
6月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
4月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
4月前
|
JavaScript 前端开发
|
5月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
143 4
|
5月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
527 1
|
5月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
104 2
|
4月前
|
JavaScript 前端开发 API
|
6月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
42 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    详解智能编码在前端研发的创新应用
  • 4
    智能编码在前端研发的创新应用
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布