APIs -- 获取元素

虾小眠0526

已于 2023-04-23 18:24:12 修改

阅读量415

点赞数

分类专栏：前端学习之旅文章标签： javascript 前端 html

于 2023-04-08 17:32:14 首次发布

本文链接：https://blog.csdn.net/weixin_58470558/article/details/130019216

版权

前端学习之旅专栏收录该内容

60 篇文章 2 订阅

订阅专栏

本文介绍了JavaScript中的变量声明，推荐使用const优先，解释了const和let的区别。接着详细讲解了DOM的概念、DOM树以及如何通过CSS选择器获取和操作DOM对象。此外，还探讨了如何修改元素内容、属性和样式，以及通过classList管理CSS类。最后，文章阐述了定时器函数setInterval和clearInterval的使用方法。

摘要由CSDN通过智能技术生成

变量声明：

变量声明有三个 var 、let 和 const：首先var 先排除，老派写法，问题很多，可以淘汰掉…

let or const 建议: const 优先，尽量使用const，
原因是：

const 语义化更好
很多变量我们声明的时候就知道他不会被更改了，那直接用 const
实际开发中也是，比如react框架，基本const

数组和对象建议使用const来声明
const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址。

1. Web API 基本认知

1.1 作用和分类

作用：就是使用JS去操作 html 和浏览器
分类： DOM(文档对象模型)、BOM (浏览器对象模型)

1.2 DOM

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

简言之 DOM 是浏览器提供的一套操作网页内容的功能（用来动态修改 HTML ），其目的是开发网页特效及用户交互。

1.3 DOM树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

在这里插入图片描述

1.4 DOM对象（重点）

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

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想：

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

document 对象

是 DOM 里提供的一个对象
所以它提供的居性和方法都是用来访问和操作网页内容的例: document.write()
网页所有内容都在document里面

2. 获取DOM对象

2.1 根据CSS选择器获取（重点）

查找/获取元素DOM元素利用JS选择页面中标签元素

选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个有效的css选择器字符串（所以要加引号）
返回值：css选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配到，则返回null

const box = document.querySelector('div')
const box = document.querySelector('.box')
const nav = document.querySelector( '#nav')
// 1.我要获取第一个小 uL Li
const li = document.querySelector('ul li:first-child')

选择匹配多个元素
语法：document.querySelectorAll('css选择器')
参数：包含一个或多个有效的css选择器字符串（所以要加引号）
返回值：css选择器匹配的NodeList对象集合，一个HTMLElement对象

// 2.选择所有的小Li
const lis = document.querySelectorAll('ul li')

document.querySelectorAll(‘css选择器’)得到的是个伪数组：有长度有索引号但是没有pop（）push（）等数组方法。先得到里面的每一个对象，需要遍历（for）的方式获得

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

// 根id获取一个元素
document .getElementById('nav')
// 根据标签获取一类元素 获取页面 所有div
document .getElementsByTagName('div')
// 根 名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')

3. 操作元素内容

目标：修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象（即使用点语法）。

3.1 对象.innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

3.2 对象.innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

4. 操作元素属性

4.1 `操作元素常用属性`

通过JS 设置/修改标签元素属性，比如通过 src更换图片
最常见的属性比如: href、title、src 等
语法：对象.属性 = 值

// 举例说明
// 1. 获取元素
const pic = document.querySelector( 'img')
// 2. 操作元素
pic.src = './images/b02.jpg'
pic.title ='刘德华演唱会'

4.2 操作元素`样式`属性

还通过]S 设置/修改标签元素的样式属性比如通过轮播图小回点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等

通过 style 属性操作CSS
操作类名(className)操作CSS
通过 classList 操作类控制CSS

const box = document.querySelector('.box')
// 修改元素样式
box.style.width = '200px'
box.style.marginTop = '15px'
box.style.backgroundColor = 'pink'

注意：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加CSS单位

4.2.1 通过 style 属性操作CSS

语法：对象.style.样式属性=值

4.2.2 操作类名(className)操作CSS

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

语法:

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

注意：

由于class是关键字，所以使用className去代替
className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名

<!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>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .nav {
      color: red;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
</head>

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

</html>

4.2.3 `通过 classList 操作类控制CSS`

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

// 追加一个类  类名不加点，并且是字符串
元素.classList.add('类名')	
// 删除一个类元素	类名不加点，并且是字符串
元素.classList.remove('类名')
// 切换一个类  有就删除，没有就加上
元素.classList.toggle('类名')

4.3 操作`表单元素`属性

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

正常的有属性有取值的跟其他的标签属性没有任何区别
获取： DOM对象.属性名
设置：DOM对象属性名=新值

表单.value ='用户名'
表单.type ='password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性。如: disabled、checked、selected

<!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>Document</title>
</head>

<body>
  <!-- <input type="text" value="电脑"> -->
  <input type="checkbox" name="" id="">
  <button>点击</button>
  <script>
    // 1 获取元素
    // const uname = document.querySelector('input')
    // 2. 获取值  获取表单里面的值 用的  表单.value
    // console.log(uname.value) // 电脑
    // console.log(uname.innerHTML)  innertHTML 得不到表单的内容
    // 3. 设置表单的值
    // uname.value = '我要买电脑'
    // console.log(uname.type)
    // uname.type = 'password'

    // 1. 获取
    const ipt = document.querySelector('input')
    // console.log(ipt.checked)  // false   只接受布尔值
    ipt.checked = true
    // ipt.checked = 'true'  // 会选中，不提倡  有隐式转换

    // 1.获取
    const button = document.querySelector('button')
    // console.log(button.disabled)  // 默认false 不禁用
    button.disabled = true   // 禁用按钮

  </script>
</body>

</html>

4.4 自定义属性

标准属性：标签天生自带的属性比如lass id title等,可以直接使用点语法操作比如：disabled、checked、selectedt
自定义属性：

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<body>
	<div class="box" data-id="19" data-spm="不知道">盒子</div><script>
	const box = document.querySelector('.box')
	console.log(box.dataset.id)
	console.log(box.dataset.spm)
</script>
</body>

5. 定时器 – 间歇函数

5.1 定时器函数介绍

网页中经常会需要一种功能: 每隔一段时间需要自动执行一段代码，不需要我们手动去触发。如：网页中的倒计时

要实现这种需求，需要定时器函数

5.2 定时器函数基本使用

5.2.1 开启定时器

语法：setInterval(函数，间隔时间)
作用：每隔一段时间调用这个函数；间隔时间单位是毫秒

function repeat() {
console.log('前端程序员，就是头发多')
}
// 每隔一秒调用repeat函数
setInterval(repeat, 1000)

注意：

函数名字不需要加括号
定时器返回的是一个id数字

5.2.2 关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearInterva1(变量名)

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

let timer = setInterval(function() {
	console.log('hi~~')
},1000)
clearInterval(timer)

注意：

函数名字不需要加括号
定时器返回的是一个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>Document</title>
</head>

<body>
  <script>
    // setInterval(函数, 间隔时间)
    // setInterval(function () {
    //   console.log('一秒执行一次')
    // }, 1000)

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

    // let m = setInterval(function () {
    //   console.log(11)
    // }, 2000)
    // console.log(m)

    // const num = 10
    // num = 10
    // console.log(num)
    let i = 1
    setInterval(function () {
      i++
      document.write(`${i} `)
    }, 200)
  </script>
</body>

</html>