Web API操作元素内容与属性

web API 是使用JS去操作html和浏览器。他分为DOM（文档对象模型）和BOM（浏览器对象模型）两种。

什么是DOM？

DOM是浏览器提供的一套专门用来操作网页内容的功能的，开发网页内容特效和实现用户交互。

DOM树是什么？

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

DOM对象是什么？

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

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

获取DOM对象

CSS选择器获取：包含一个或多个有效的CSS选择器用‘’ 包含（字符串），返回的是一个HTMLElement对象，如果没有匹配到，则返回null.

获取一个

选择一个：CSS选择器匹配的第一个元素，可以直接操作修改

<body>

    <div class="bod">123</div>
    <div class="box">abc</div>
    <p id="nav">导航栏</p>
    <ul>
      <li>测试1</li>
      <li>测试2</li>
      <li>测试3</li>
    </ul>

    <script>
      //声明常量 = 文档.查询选择器，选择匹配的第一个元素，可以是标签
      const bod = document.querySelector('div')  // 123
      console.log(bod)

      //声明常量 = 文档.查询选择器，选择匹配的第一个元素，可以是css选择器
      const box = document.querySelector('.box') // abc
      console.log(box)

      const nav = document.querySelector('#nav') // 导航栏
      console.log(nav)

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

  </body>

获取多个

选择多个：CSS选择器匹配的NodeList对象集合，不可以，只能通过遍历的方式一次给里面的元素做修改

const lis = document.querySelectorAll('ul li')
console.log(lis)

得到的是一个伪数组，有长度，有索引号，但是没有pop(),push()等数组方法，想要得到里面的每一个对象，则需要遍历for()的方式获得。

const lis = document.querySelectorAll('.nav li')
console.log(lis)

// 遍历数组
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i])  // 每个小li
  lis[i].style.color = 'red' // 每个都改变颜色
}
// 给数组某个对象改变样式
lis[0].style.color = 'blue'

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

其他获取DOM元素方法（了解）,慢慢这些不常用了

// 根据css id 获取一个元素，不加#
document.getElementById('nav')
//根据标签获取一个元素，所有的div
document.getElementsByName('div')
// 根据clss类名获取一个元素，不加.
document.getElementsByClassName('toc')

操作元素内容

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

对象.innerText 属性(文字)

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

// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改文字内容 对象，innerText对象
console.log(box.innerText) // 获取文字内容
box.innerText = '我叫霍欣标' // 修改文字内容

对象.innerHTML 属性

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

// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改文字内容 对象，innerHTML对象
console.log(box.innerHTML) // 获取文字内容
box.innerHTML = '<strong>我叫霍欣标</strong>' // 修改文字内容添加html标签

如果还在纠结到底用谁，你可以选择innerHTML，你可以不写标签。

案例：年会抽奖

需求：从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面。分析：

① 声明数组：const personArr =［'周杰伦，'刘德华’,'周星驰,'霍欣标’,”张学友］
② 一等奖：随机生成一个数字（0~数组长度），找到对应数组的名字

③ 通过innerText 或者innerHTML将名字写入span元素内部

④ 二等奖依次类推

// 1. 声明数组
const personArr = ['周杰伦', '刘德华', '周星驰', '霍欣标', '张学友']

// 2. 先做一等奖，随机数
const random = Math.floor(Math.random() * personArr.length)
// 获取one元素
const one = document.querySelector('#one')
one.innerHTML = personArr[random]
personArr.splice(random, 1) //删除数组这个名字

// 3. 先做二等奖，随机数
const random2 = Math.floor(Math.random() * personArr.length)
// 获取two元素
const two = document.querySelector('#two')
two.innerHTML = personArr[random2]
personArr.splice(random2, 1) //删除数组这个名字

// 4. 先做三等奖，随机数
const random3 = Math.floor(Math.random() * personArr.length)
// 获取three元素
const three = document.querySelector('#three')
three.innerHTML = personArr[random3]
personArr.splice(random3, 1) //删除数组这个名字

<div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
</div>

.wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }

传智教育年会抽奖

一等奖：???

二等奖：???

三等奖：???

操作元素属性

操作元素常用属性

可以通过js设置修改标签元素属性，比如通过src更换图片，常见的属性还有href title src等。

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

案例：随机更换图片

需求：当我们刷新页面，页面中的图片随机显示不同的图片，分析：

① 随机显示，则需要用到随机函数
② 更换图片需要用到图片的src 属性，进行修改

<body>
  <img src="./images/1.webp" alt="">
  <script>
    // 使用函数封装生成N-M之间的随机数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }

    // 1. 获取图片对象
    const img = document.querySelector('img')
    // 2. 随机得到序号
    const random = getRandom(1, 6)
    // 3. 更换路径
    img.src = `./images/${random}.webp`
  </script>
</body>

案例：随机更换背景图片

body不需要获取，可以直接修改

// 使用函数封装生成N-M之间的随机数
function getRandom(N, M) {
  return Math.floor(Math.random() * (M - N + 1)) + N
}

// 可以给任意值
const random = getRandom(1, 10)
document.body.style.backgroundImage = `url(./images/${random}.webp)`

body {
      background: url(./images/1.webp)no-repeat top center;
    }

操作元素样式属性

可以通过JS设置或修改标签元素的样式属性。比如：轮播图小圆点，自动更换颜色样式，点击按钮可以滚动图片，这是移动的图片的位置等。

style属性操作CSS

如果css是多组单词必须使用小驼峰命名法。

// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改样式，要跟单位
box.style.width = '300px'
// 多组单词的采取使用小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'

className操作CSS

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

// 1. 获取元素
const div = document.querySelector('div')
// 2. 添加类名，class是关键字，我们用className
div.className = 'box'

// 3. 也可以添加多个class类名
div.className = 'box nav'

div {
  width: 200px;
  height: 200px;
  background-color: pink;
}

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

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

classList操作CSS

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

// 1. 获取元素
const box = document.querySelector('.box')
// 2. 追加类，修改颜色 add()类名不加点，并且是字符串
box.classList.add('active')
// 3. 删除类
box.classList.remove('box')
// 4. 切换类 有还是没有啊？有就删点，没有就加上
box.classList.toggle('active')

.box {
  width: 300px;
  height: 300px;
  color: #333;
}

.active {
  color: red;
  background-color: pink;
}

<div class="box">文字</div>

案例：轮播图随机版

当我们刷新页面，页面中的轮播图会显示不同图片以及样式：Demo

分析：

① 准备一个数组对象，里面包含详细信息（素材包含）

② 随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容

③ 利用这个随机数字，让小圆点添加高亮的类addClass ，利用css结构伪类选择器

// 初始数据 数组对象
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)' },
]
// 1. 需要一个随机数 (数组里面的下标)
const random = parseInt(Math.random() * sliderData.length)

// 2.  把对应的数据渲染到标签里
// 2.1 获取图片
const img = document.querySelector('.slider-wrapper img')
// 2.2 修改图片路径 = 对象.url
img.src = sliderData[random].url
// 3. 把p里面的文字内容替换
const p = document.querySelector('.slider-footer p')
p.innerHTML = sliderData[random].title
// 4. 修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
// 5. 小圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
// 让当前这个小li，添加 active这个类，让其高亮
li.classList.add('active')

* {
  box-sizing: border-box;
}

.slider {
  width: 560px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  width: 100%;
  height: 320px;
}

.slider-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

.slider-footer {
  height: 80px;
  background-color: rgb(100, 67, 68);
  padding: 12px 12px 0 12px;
  position: relative;
}

.slider-footer .toggle {
  position: absolute;
  right: 0;
  top: 12px;
  display: flex;
}

.slider-footer .toggle button {
  margin-right: 12px;
  width: 28px;
  height: 28px;
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.slider-footer .toggle button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.slider-footer p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}

.slider-indicator {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.slider-indicator li {
  width: 8px;
  height: 8px;
  margin: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  cursor: pointer;
}

.slider-indicator li.active {
  width: 12px;
  height: 12px;
  opacity: 1;
}

<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></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev"><</button>
        <button class="next">></button>
      </div>
    </div>
  </div>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，正常的有属性有取值的，跟其他的标签属性没有任何区别。

表单

<input type="text" value="电脑">

// 1. 获取表单元素
const uname = document.querySelector('input')
// 2. 获取表单里面的值，表单.value
console.log(uname.value)

// 3. 设置表单的值
uname.value = '我要买电脑'

// 表单类型改为···密码类型
uname.type = 'password'

复选框

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

<input type="checkbox" name="" id="">

// 1. 获取
const ipt = document.querySelector('input')
console.log(ipt.checked) // false
ipt.checked = true // 复选框给个布尔值：对，选项打钩

// 不提倡，有默认的隐式转换，字符串为true，空位为false
ipt.checked = 'true'

按钮

  <!-- H5 新规范，属性和值相同可以省略 -->
  <button>点击</button>
  <button disabled="disabled"></button>

  <!-- 只写属性，就是禁用按钮 -->
  <button disabled=></button>

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

自定义属性

标准属性：

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

自定义属性：

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

在标签上一律以data开头

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

<body>
  <!--自定义属性：data-xx 可以给多个自定义属性-->
  <div data-id="1" data-smp="又是自定义一个值">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>
    // 获取第一个div元素
    const one = document.querySelector('div')
    // 打印自定义属性的值
    console.log(one.dataset.id) // 1
    console.log(one.dataset.smp) // 又是自定义一个值
  </script>
</body>

定时器-间歇函数

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

例如：网页中的倒计时，要实现这种需求，需要定时器函数，定时器函数有两种，今天我先讲间歇函数。

开启定时器

定时器执行函数，不是立刻执行，是设置多长时间，多长时间后不停的执行。

// setInterval(函数，间隔时间：毫秒)
setInterval(function () {
  console.log('一秒执行一次');
}, 1000)

function fn() {
  console.log('一秒执行一次');
}

// 每隔1秒钟，自动去调用 fn()
// setInterval(函数名不加小括号, 1000)
setInterval(fn, 1000)

// 极为少见，不推荐使用
setInterval('fn()', 1000)

关闭定时器

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

定时器返回的是一个id数字

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

console.log(m)

// 关闭定时器
clearInterval(m)

倒计时效果

let i = 1
setInterval(function () {
  i++
  document.write(i)
}, 1000)

阅读注册协议

按钮60秒之后才可以使用 Demo

分析：

① 开始先把按钮禁用（disabed 属性）
② 一定要获取元素
③ 函数内处理逻辑：秒数开始减减；按钮里面的文字跟着一起变化；如果秒数等于0停止定时器里面文字变为同意最后按钮可以点击

// 1. 获取元素
const bth = document.querySelector('.btn')
// 2. 倒计时
let i = 5
let n = setInterval(function () {
  i--
  bth.innerHTML = `我已阅读用户协议${i}`
  if (i === 0) {
    clearInterval(n)  //关闭定时器
    bth.disabled = false //打开按钮
    bth.innerHTML = '同意'
  }
}, 1000)

<textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>

案例：轮播图定时版

需求：每隔一秒钟切换一个图片 Demo

分析：

① 准备一个数组对象，里面包含详细信息（素材包含）

② 获取元素

③ 设置定时器函数：

a. 设置一个变量++；

b. 找到变量对应的对象；

c. 更改图片、文字信息

d. 激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类

④ 处理图片自动复原从头播放（放到变量++后面，紧挨）

如果图片播放到最后一张，就是大于等于数组的长度则把变量重置为0

// 1. 获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')

// 2. 开启定时器
// 刚打开页面出现的是第一张图片，所以从第二张开始切换
let i = 0
setInterval(function () {
  i++
  // 无缝衔接的位置，加上判断条件，播放到最后的图片归零
  if (i >= sliderData.length) {
    i = 0
  }
  img.src = sliderData[i].url
  p.innerHTML = sliderData[i].title
  // 小圆点
  // 删除之前li删除active(高亮)
  document.querySelector('.slider-indicator .active').classList.remove('active')
  // 让当前小li添加active(高亮)
  document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}, 1000)

  <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"><</button>
        <button class="next">></button>
      </div>
    </div>
  </div>

* {
  box-sizing: border-box;
}

.slider {
  width: 560px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  width: 100%;
  height: 320px;
}

.slider-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

.slider-footer {
  height: 80px;
  background-color: rgb(100, 67, 68);
  padding: 12px 12px 0 12px;
  position: relative;
}

.slider-footer .toggle {
  position: absolute;
  right: 0;
  top: 12px;
  display: flex;
}

.slider-footer .toggle button {
  margin-right: 12px;
  width: 28px;
  height: 28px;
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.slider-footer .toggle button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.slider-footer p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
}

.slider-indicator {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.slider-indicator li {
  width: 8px;
  height: 8px;
  margin: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  cursor: pointer;
}

.slider-indicator li.active {
  width: 12px;
  height: 12px;
  opacity: 1;
}

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/110.html