DOM--获取元素

原创已于 2024-01-02 20:40:12 修改 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #css #前端

于 2023-12-19 11:20:30 首次发布

1.1 Web API 基本认知

（1）Web API 作用和分类

1.作用：

就是使用 JS 去操作 html 和浏览器

2.分类：

DOM（文档对象模型）

BOM（浏览器对象模型）

（2）什么是DOM

1.DOM（Document Object Model —— 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的API

2.白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

3.DOM作用：

开发网页内容特效和实现用户交互

（3）DOM树

1.DOM树是什么：

将 html 文档以树状结构直观的表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

（4）DOM对象（重要）

1.DOM对象：

浏览器根据 html 标签生成的 JS 对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

2.DOM的核心思想：

把网页内容当做对象来处理

3.document 对象：

是DOM里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的（例如：document.write（））

网页所有内容都在document里面

1.2 获取DOM对象

（1）CSS选择器获取（重点）

1.选择匹配的第一个元素：

<script>
  // 语法:
  document.querySelector('css选择器')
  // 参数:包含一个或多个有效的CSS选择器 字符串
  // 返回值:CSS选择器匹配到的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null
</script>

2.选择匹配的多个元素：

<script>
  // 语法:
  document.querySelectorAll('css选择器')
  // 参数:包含一个或多个有效的CSS选择器 字符串
  // 返回值:CSS选择器匹配的NodeList 对象集合
</script>

匹配得到多个元素，存在一个伪数组内，伪数组：

1.有长度有索引号的数组，但是没有 pop（） push（）等数组方法

2.想要得到里面的每一个对象，则需要使用遍历（for）的方式获得

3.哪怕只有一个元素，通过 querySelectorAll（）获取过来的也是一个伪数组，里面只有一个元素而已

3.整合案例：

<body>
<ul class="nav">
  <li>我的首页</li>
  <li>产品介绍</li>
  <li>联系方式</li>
</ul>
<script>
  // 输出第一个li
  let nav = document.querySelector('.nav li')
  console.dir(nav)
  // 输出所有li
  let navAll = document.querySelectorAll('.nav li')
  console.dir(navAll)
  // for循环遍历伪数组,依次输出li
  for (let i = 0; i < navAll.length; i++) {
      console.dir(navAll[i])
  }
</script>
</body>

（2）其他方式（了解）

1.3 操作元素内容

（1）.innerText 属性

1.将文本内容添加到/更新到任意标签位置

2.显示纯文本，不解析标签

<body>
<div class="box">我是一个div</div>
<script>
  // 获取元素
  const box = document.querySelector('.box')
  // 使用 对象.innerText属性,修改文字内容
  box.innerText = '我是一个盒子'   //修改文字内容
  box.innerText = '<strong>我是一个盒子</strong>'   //仅修改文字内容,不解析标签
</script>
</body>

（2）.innerHTML 属性

1.将文本内容添加到/更新到任意标签位置

2.可以解析标签，多个标签建议使用模版字符串

<body>
<div class="box">我是一个div</div>
<script>
  // 获取元素
  const box = document.querySelector('.box')
  // 使用 对象.innerHTML属性,修改文本
  box.innerHTML = '我是一个盒子'
  // 使用 对象.innerHTML属性,修改文本,标签修饰
  box.innerHTML = '<strong>我是一个加粗的盒子</strong>'
  // 使用 对象.innerHTML属性,模版字符串,修改文本,标签修饰
  box.innerHTML = `<strong>我是盒子1</strong><br>我是盒子2`
</script>
</body>

3.整合案例：从数组随机抽取一等奖、二等奖、三等奖，显示到对应的标签里面

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  .box {
      width: 500px;
      height: 300px;
      background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
      margin: 50px auto;
  }

  p {
      line-height: 80px;
      margin-left: 60px;
  }

  .first_prize {
      font-size: 30px;
      font-weight: bold;
  }

  .access {
      font-size: 25px;
      font-weight: bold;
  }

  .the_third_prize {
      font-size: 20px;
      font-weight: bold;
  }
</style>
</head>

<body>
<div class="box">
  <p class="first_prize">一等奖: <span></span></p>
  <p class="access">二等奖: <span></span></p>
  <p class="the_third_prize">三等奖: <span></span></p>
</div>
<script>
  // 定义数组
  const arr = ['周杰伦', '刘德华', '周星驰', '小李老师', '张学友']
  // 从数组中取随机数
  let num1 = Math.floor(Math.random() * arr.length)
  // 获取元素
  let span1 = document.querySelector('.first_prize span')
  // 数组占位补充文本
  span1.innerHTML = `${arr[num1]}`
  // 避免重复取值,删除已使用的值
  arr.splice(num1, 1)

  // 从数组中取随机数
  num2 = Math.floor(Math.random() * arr.length)
  // 获取元素
  let span2 = document.querySelector('.access span')
  // 数组占位补充文本
  span2.innerHTML = `${arr[num2]}`
  // 避免重复取值,删除已使用的值
  arr.splice(num2, 1)

  // 从数组中取随机数
  num3 = Math.floor(Math.random() * arr.length)
  // 获取元素
  let span3 = document.querySelector('.the_third_prize span')
  // 数组占位补充文本
  span3.innerHTML = `${arr[num3]}`
  // 避免重复取值,删除已使用的值
  arr.splice(num3, 1)
</script>
</body>

</html>

1.4 操作元素属性

（1）操作元素常用属性

1.可以通过 JS 设置/修改标签元素属性，比如通过 src 更换图片

2.最常见的属性比如：href、title、src 等

3.语法：对象.属性 = 值

<body>
<img src="../11.8/homework/1.webp" alt="">
<script>
  // 语法: 对象.属性 = 值
  // 例如:
  // 第一步:获取元素
  const img = document.querySelector('img')
  // 第二步:设置属性
  img.innerHTML = '../11.8/homework/2.webp'   //实现换张图片
  img.title = '最爱玩王者'   //设置title属性

</script>
</body>

4.案例：页面刷新输出随机图片

<body>
<!-- 定义一张图片 -->
<img src="../11.8/homework/1.webp" alt="">
<script>
  // 需求:当我们刷新页面,页面中的图片随机显示不同的图片
  // 准备了20张图片,定义0-21之间的随机数
  let num = Math.floor(Math.random() * 21)
  // num = String(num)
  // 获取元素
  console.log(num)
  let img = document.querySelector('img')
  // 给元素设置 src 属性,把获得的随机数进行替换
  img.src = `../11.8/homework/${num}.webp`
</script>
</body>

（2）操作元素样式属性

1.通过 JS 设置/修改标签元素的样式属性

比如通过轮播图小圆点自动更换颜色样式

点击按钮可以滚动图片这是移动的图片的位置 left 等等

2.通过 style 属性操作 CSS

语法：

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 为盒子设置初始样式 -->
<style>
.box {
   width: 300px;
   height: 300px;
   margin: 50px auto;
   background-color: antiquewhite;
}
</style>
</head>

<body>
<!-- 定义一个盒子 -->
<div class="box"></div>
<script>
// 获取元素
const box = document.querySelector('.box')
// 修改样式属性 对象.style.样式属性 = '值'  需要跟单位,如px
box.style.width = '600px'
// 遇到多组单词,使用小驼峰命名法
box.style.backgroundColor = 'hotpink'
</script>
</body>

</html>

注意：

修改样式通过 style 属性引出

如果属性有 - 连接符，需要转换为小驼峰命名法

赋值的时候，需要的时候不能忘记加CSS单位

案例：页面刷新，随机更换背景图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刷新背景图片</title>
    <style>
          /* css样式 */
        body {
            background-image: url(../11.8/homework/1.webp);
        }
    </style>
</head>

<body>
    <script>
        /*
        需求:当我们刷新页面,页面中的背景图片随机显示不同的图片
        分析:
            1.需要使用随机函数
            2.css页面背景图片 background-image
            3.标签选择body,因为body是唯一的标签,可以直接写document.body,style
        */
        let num = Math.floor(Math.random() * 21)
        document.body.style.backgroundImage = `url(../11.8/homework/${num}.webp)`
    </script>
</body>

</html>

操作类名（className）操作CSS

1.如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式

2.语法：

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>className</title>
<style>
  /* 原始样式 */
  div {
      width: 200px;
      height: 200px;
      margin: 60px auto;
      background-color: aqua;
  }

  /* className待用样式,注意:调用后只会覆盖重复的,不会删除原始样式 */
  .box {
      width: 600px;
      height: 600px;
      background-color: pink;
  }
</style>
</head>

<body>
<div></div>
<script>
  // className语法
  // 1.获取元素
  const div = document.querySelector('div')
  // 2.添加类名
  div.className = 'box'
  // 3.如果原本元素有class属性,想要保留
  div.className = '初始class名 新增的class名'
</script>
</body>

</html>

3.注意：

由于class是关键字，所以使用className去代替

className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

4.通过 classList 操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  /* 原始样式 */
  .box {
      width: 200px;
      height: 200px;
      color: black;
  }

  /* 新增样式 */
  .active {
      width: 200px;
      height: 200px;
      color: aquamarine;
      background-color: pink;
  }
</style>
</head>

<body>
<!-- 新建div元素 -->
<div class="box">123</div>
<script>
  /*
  classList语法:
      1.追加一个类名
      元素.classList.add('类名')

      2.删除一个类名
      元素.classList.remove('类名')

      3.切换一个类名
      元素.classList.toggle('类名')
  */
  // 实例,使用classList操作div元素
  // 1.先选中div元素
  const div = document.querySelector('.box')
  // 2.使用classList操作元素
  // 追加
  div.classList.add('active')
  // 删除
  div.classList.remove('active')
  // 切换
  div.classList.toggle('active')
</script>
</body>

</html>

（3）操作表单元素属性

1.表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

2.正常的有属性有取值的，跟其他标签属性没有任何区别

3.语法：

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 新建表单 -->
    <input type="text" value="电脑">
    <script>
        /*
        语法:
           获取 表单.value = '用户名'
            表单.type = 'password'
        */
        // 获取元素
        const uname = document.querySelector('input')
        // 获取表单值,需使用 value 关键字
        console.log(uname.value)
        // 修改值
        uname.value = '我要买电脑'

        // 获取属性使用 type 关键字
        console.log(uname.type)
        // 修改属性
        uname.type = 'password'
    </script>
</body>

</html>

4.表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为 true 代表添加了该属性，如果是 false 代表移除了该属性；比如：

（4）自定义属性

1.标准属性：

标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法进行操作，例如：disabled、checked、selected

2.自定义属性：

在html5中推出了专门的 data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以 dataset 对象方式获取

3.语法：

<body>
<!-- data-自定义属性名 -->
<div data-id="1" data-num="2">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<div data-id="6">6</div>
<script>
  // 获取元素
  const div = document.querySelector('div')
  // 调用  dataset关键字
  console.log(div.dataset)
  // 精确调用
  console.log(div.dataset.num)
</script>
</body>