在JS中获取元素的集中方式

获取元素的几种方式

一，获取单个元素的几种方式

语法：document.querySelector('选择器')

只能获取到满足条件的 第一个 元素，如果页面中的元素没有获取成功，就返回的是空值 null。

例子：

<span>我是第一个span标签</span>
<span>我也是span，不过是第二个</span>
<a href="" class="mya">我是a标签</a>
<h3 id="myh2">我是标题标签h3</h3>
<span>我还是span标签</span>

1.通过html的 标签选择器 进行元素的获取

例如：let mya = document.querySelector('a')

2.通过 类选择器 进行元素的获取

例如：let mya = document.querySelector('.mya')

3.通过 id选择器 进行元素的获取

例如：let myh2 = document.querySelector('#myh2')

二，获取多个元素的方式

1.语法：document.querySelectorAll('选择器')

获取满足条件的 所有 元素，返回一个list的 伪数组，并不是一个真正意义上的数组，不能直接调用数组的api，而是通过遍历的方式进行下一步的元素操作。

例如：我需要获取页面中所有的span标签，然后给所有的span标签设置统一的红色样式。

let spans = document.querySelectorAll('span')
for (let i = 0; i < spans.length; i++) {
        console.log(spans[i])
        spans[i].style.color = 'red'
      }

三，通过后代选择器进行元素的获取

在一个数组整体里面查找到里面的某一个元素，例如在ul中找到其中一个li

<ul class="nav">
   <li>我的首页</li>
   <li>产品介绍</li>
   <li>联系方式</li>
</ul>

let lis = document.querySelectorAll('.nav2 > li')

上面是使用后代选择器的方式获取到的元素，以下是第二种方式

//先获取外面的父元素大盒子
let nav2 = document.querySelector('.nav2')
// 再从父元素中，查找需要的子元素
let lis = nav2.querySelectorAll('li')

\