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

一、通过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中怎么写，这里就可以怎么写。