API-获取DOM元素

雪碧bibi是我的好大二

于 2024-06-18 19:11:28 发布

阅读量305

点赞数 9

分类专栏： Web API 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64105917/article/details/139780940

版权

Web API 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

掌握获取DOM元素

学习内容：

获取DOM对象
根据CSS选择器来获取DOM元素（重点）
其他获取DOM元素方法（了解）

获取DOM对象：

我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟CSS选择器类似，选中标签才能操作。
查找元素DOM元素就是利用JS选择页面中标签元素。

根据CSS选择器来获取DOM元素（重点）：

选择匹配的第一个元素

document.querySelector('CSS选择器')

参数：包含一个或多个有效的CSS选择器字符串。

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。

<title>获取dom元素</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <div class="box">abc</div>
  <p id="nav">导航栏</p>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
<script>
    //1.获取匹配的第一个元素
     //const box = document.querySelector('div')

    // const box = document.querySelector('.box')
    // console.log(box)

    // const nav = document.querySelector('#nav')
    // console.log(nav)
    // nav.style.color = 'red'

   //我要获取第一个小li
    const li = document.querySelector('ul li:first-child')
    console.log(li)
  </script>
  </body>

选择匹配的多个元素

document.querySelectorAll('CSS选择器')

参数：包含一个或多个有效的CSS选择器字符串。

返回值：CSS选择器匹配的NodeList 对象集合

<title>获取dom元素</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <div class="box">abc</div>
  <p id="nav">导航栏</p>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    //2.选择所有的小li
     const lis = document.querySelectorAll('ul li')
     console.log(lis)
  </script>
</body>

小结

获取一个DOM元素我们使用谁？能直接操作修改吗？
querySelectorAll()
可以
获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改？
querySelectorAll()
不可以，只能通过遍历的方式一次给里面的元素做修改。
他们两者小括号里面的参数有什么注意事项？
里面写CSS选择器
必须是字符串，也就是必须加引号

  <title>获取dom元素</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    //1.获取元素
    const lis = document.querySelectorAll('.nav li')
    // console.log(lis)
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]) //每一个小li对象
    }

  </script>

</body>

</html>

得到的是一个伪数组：

有长度有索引号的数组。
但是没有pop() push()等数组方法

想要得到里面的每一个对象，则需要遍历for的方式获得。

注意：哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已。

练习

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-请控制台依次输出3个li的DOM对象</title>
</head>

<body>
  <ul class="nav">
    <li>我的首页</li>
    <li>产品介绍</li>
    <li>联系方式</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    console.log(lis)
  </script>

</body>

</html>

其他获取DOM元素方法（了解）：

    //1.根据id获取一个元素
    document.getElementById('nav')

    //2.根据标签获取一类元素  获取页面 所有div
    document.getElementsByTagName('div')

    //3.根据类名获取元素  获取页面 所有类名为 w的
    document.getElementsByClassName('w')