JavaScript 基础与进阶（APIs）---1（DOM获取和属性操作）

小鲫鱼学前端

已于 2023-05-04 22:23:24 修改

阅读量224

点赞数

文章标签： javascript 前端开发语言

于 2023-05-02 23:29:42 首次发布

本文链接：https://blog.csdn.net/love33441314520/article/details/130372384

版权

Web API 基本认知

变量申明

建议：const 优先，尽量使用const，有了变量先给const，如果发现它后面是被修改的，再改为let

建议数组和对象使用 const 来声明

作用和分类

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

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

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

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

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

DOM树

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

描述网页内容关系的名词

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

DOM对象

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

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

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

DOM的核心思想

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

document 对象

是 DOM 里提供的一个对象

它提供的属性和方法都是用来访问和操作网页内容

网友所以内容都在document里面

获取DOM对象

根据CSS选择器来获取DOM元素

1.选择匹配的第一元素

语法：

document.querySelector('css选择器') // 包含一个或多个有效的CSS选择器 字符串
// 返回值 CSS选择器匹配的第一个元素，一个HTMLElement对象

2.选择匹配的多个元素

语法：

    const li = document.querySelectorAll('CSS选择器') // 参数：包含一个或多个有效的CSS选择器 字符串
    // 返回值：CSS选择器匹配的NodeList 对象集合
document.querySelectorAll('CSS选择器') 得到的是一个伪数组：
    有长度有索引号的数组
    但是没有pop() push() 等数组方法
    想要得到里面的每一个对象，需要遍历（for）的方式获得

注意事项：参数必须是字符串，必须加引号

操作元素内容

元素innerText 属性

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

显示纯文本，并解析标签

<div class="box">我是文字的内容</div>
const box = document.querySelector('.box')
    // 2.修改文字内容，对象.innerText 属性
    console.dir(box.innerText) //获取文字内容
    // box.innerText = '我是js' // 修改文字内容
    box.innerText = '<strong>我是js</strong>' // 不解析标签

元素innerHTML属性

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

会解析标签，多标签建议使用模板字符

// 3.innerHTML 解析标签
    console.log(box.innerHTML)
    // box.innerHTML = '我要更换'
    box.innerHTML = '<strong>我要更换</strong>'

操作元素属性

操作元素常用属性

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

常用属性比如：href、title、src

语法：

对象.属性 = 值

<img src="../images/1.webp" alt="">
  <script>
    // 获取图片元素
    const img = document.querySelector('img')
    // 修改图片对象的属性
    img.src = '../images/2.webp'
    img.title = '艺术照'
  </script>

操作元素样式属性

操作元素 style 属性

<div class="box"></div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 修改样式属性 对象.style.样式属性 = '值'
    box.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    box.style.backgroundColor = 'skyblue'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red '
  </script>

操作类名（className）操作CSS

修改的样式比较多，可以借助css类名的形式

语法：

// active 是一个css类名
元素.className = 'active'

 <div class="nav">123</div>
  <script>
    // 获取元素
    const div = document.querySelector('div')
    // 添加类名 class 是个关键字 我们用 className
    div.className = 'nav box'
  </script>

注意：

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

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

通过 classList 操作类控制CSS

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

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

<div class="box active">文字</div>
  <script>
    // 通过classList添加
    const box = document.querySelector('div')
    // 修改样式   add() 类名不加点，并且是字符串
    box.classList.add('active')
    // 删除类 remove() 类名不加点，并且是字符串
    box.classList.remove('box')
    // 切换类 toggle()    有还是没有，有就删除，没有就加上
    box.classList.toggle('active')

  </script>

操作表单元素属性

获取：DOM对象.属性名

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

自定义属性

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

自定义属性：

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

在标签上一律以data-开头

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

  <div data-id="1" data-spm="喵喵喵">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>
  <script>
    const one = document.querySelector('div')
    console.dir(one.dataset.id) // 1
    console.dir(one.dataset.spm) // 喵喵喵
  </script>

定时器-间歇函数

自动执行一段代码

定时器函数基本使用

1.开启定时器

setInterval(函数, 间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

// setInterval(函数, 间隔时间)
    // setInterval(function() { 
    //   console.log('一秒执行')
    //  }, 1000)
     function fn() { 
      console.log('一秒')
      }
    // setInterval(函数, 间隔时间) 函数名不加小括号
    let n = setInterval(fn, 1000)

2.关闭定时器

let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

一般不会刚创建就停止，而是满足一定条件在停止

综合案例

div class="slider">
    <div class="slider-wrapper">
      <img src="../images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: '../images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: '../images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: '../images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: '../images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    // 获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    let i = 0 // 控制图片张数
    // 开启定时器
    // console.log(sliderData[i])
    let n = setInterval(function() { 
      i++
      // 无缝衔接位置 一共把张图片，到了最后一张就是 8，数组长度就是 8
      // console.log(i)
      if(i >= sliderData.length) {
        i = 0
      }
      // console.log(sliderData[i])
      // 更换图片路径
      img.src = sliderData[i].url
      // 把文字写到 p里面
      p.innerHTML = sliderData[i].title
      // 颜色渲染
      footer.style.backgroundColor = sliderData[i].color
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
     }, 1000)

  </script>