javaScript 05 API中DOM

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

🥳博主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：DOM概念、DOM常见用法、定时器的使用

一、DOM概念：

1.1什么是DOM

1.2DOM树介绍

二、DOM对象的获取

2.1 DOM对象

2.2 document对象

2.3 获取DOM对象

2.3.1获取第一个DOM对象

2.3.2获取多个DOM对象

2.4 拓展伪数组介绍

三、innerHTML与innerText的区别

针对上述知识的综合案例-年会抽奖

四、className与classList的区别

className（一次只能修改一个，会覆盖）

className（可以解决会覆盖的问题）

来个综合案例：轮播图刷新

五、定时器setInterval & clearInterval

setInterva开启方法：

clearInterval关闭方法：

一、DOM概念：

捡起来我们在 JS 01 学的知识

javaScript 05 API中DOM_css3

1.1什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
大白话：DOM是浏览器提供的一套专门用来操作网页内容的功能

1.2DOM树介绍

javaScript 05 API中DOM_javascript_02

DOM树直观的体现了标签与标签之间的关系
DOM树本质是一个对象

二、DOM对象的获取

2.1 DOM对象

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

2.1.1 DOM对象的核心思想

把网页内容当做对象来处理
所有的HTML标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

2.2 document对象

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的

例：document.write()
网页所有内容都在document对象里面

2.3 获取DOM对象

2.3.1获取第一个DOM对象

const 变量 = document.querySelector('css选择器')

点击超链接查看官方的定义 document.querySelector

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

返回值：

获取成功 CSS选择器匹配的第一个元素,一个 HTMLElement对象
获取失败 null

注意点：

类选择器记得加 . id选择器记得加 #

const 变量名 = document.querySelectorAll('css选择器')

举个栗子

javaScript 05 API中DOM_html5_03

控制台查看（注意看是只有第一个div）

javaScript 05 API中DOM_css3_04

2.3.2获取多个DOM对象

const 变量名 = document.querySelectorAll('css选择器')

点击超链接查看官方的定义 document.querySelectorAll

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

返回值：

获取成功得到一个 伪数组（后面会介绍） 数组元素是 dom 对象
获取失败 空数组

注意点：

类选择器记得加 .
id选择器记得加 #

举个栗子

javaScript 05 API中DOM_javascript_05

控制台查看

javaScript 05 API中DOM_前端_06

以下是DOM获取多个元素的源码

<!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>
  <div>001</div>
  <div>002</div>
  <div>003</div>
  <script>

    // 获取成功
    // 注意点：选择器里面不是写变量
    const divs = document.querySelectorAll('div')
    console.log(divs);

  // 访问里面的元素
    for(let i=0;i<divs.length;i++){
console.log(divs[i]);
    }
  </script>
</body>

</html>

2.4 拓展伪数组介绍

伪数组具有数组的样子，有数组的长度属性。不可以对数组进行追加/删除等等操作

三、innerHTML与innerText的区别

innerHTML可解析标签

javaScript 05 API中DOM_css3_07

innerText无法解析标签纯文本显示

javaScript 05 API中DOM_前端_08

针对上述知识的综合案例

年会抽奖

<!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>年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

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

const arr = ['张飞','赵云','刘备','关羽','马超']

const spans =document.querySelectorAll('span')
// console.log(index);
for(let i =0;i<spans.length;i++){
  const index =getRandom(0,arr.length-1)
  // const Res=arr[index] 错误
  // 与spans产生关联
  spans[i].innerHTML=arr[index]
  arr.splice(index,1)
}





// 随机函数
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
  </script>
</body>

</html>

四、className与classList的区别

3.1 className（一次只能修改一个，会覆盖）

const 变量 = dom对象.className

dom对象.className = '新的值'

// 比如：
dom对象.className = 'aa'  // 将元素的class修改为 aa
dom对象.className = 'aa bb'  // 将元素的class属性修改为 aa bb

3.2 className（可以解决会覆盖的问题）

常用三种方法：

3.2.1 添加类名

dom对象.classList.add('类名')

3.2.2 删除类名

dom对象.classList.remove('类名')

2.2.3 切换类名（如果标签里面没有这个类名就添加，有则移除）

dom对象.classList.toggle('类名')

来个综合案例：轮播图刷新

需求：1. 刷新浏览器随机显示图片

<!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>轮播图点击切换</title>
  <style>
    * {
      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;
    }
  </style>
</head>

<body>
  <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>
  <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)' },
    ]


    // 1. 刷新浏览器 随机显示 图片
    // 1.1 准备随机函数
    // 1.2 将数组的 0下标作为 随机数的最小值 将数组的最大下标作为 随机数的最大值
    // 1.3 根据下标获取数组里面的元素
    // 1.4 获取对应的url属性 
    // 1.5 获取目标元素 img 标签
    // 1.6 给 img 的 src 属性赋值


    // 1.2 将数组的 0下标作为 随机数的最小值 将数组的最大下标作为 随机数的最大
    const index = getRandom(0, sliderData.length - 1)
    // 1.3 根据下标获取数组里面的元素
    const obj = sliderData[index]
        // 1.4 获取对应的url属性 
    const url = obj.url
        // 1.5 获取目标元素 img 标签
    // 1.6 给 img 的 src 属性赋值
    document.querySelector('img').src = url

    // 颜色属性
const color = obj.color
const footer=document.querySelector('.slider-footer')
// dom对象.style.属性
footer.style.backgroundColor=color

//字
const words =obj.title
//  获取p标签
const p =document.querySelector('p')
// 往p标签中写入新的内容用innerHTML
p.innerHTML=words
//不可
// console.log(P.innerHTML);

// 添加小圆点
const lis = document.querySelectorAll('li')
// 这个index的随机性共同作用在url与小圆点中，随机的下标都是一样的
lis[index].classList.add('active')





    // 随机函数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }
  </script>
</body>

</html>

五、定时器setInterval & clearInterval

每隔一段时间需要自动执行一段代码，不需要我们手动去触发，比如倒计时功能

setInterva开启方法：

setInterval(执行的程序, 间隔的时间)

写法1

javaScript 05 API中DOM_html5_09

控制台查看

javaScript 05 API中DOM_前端_10

写法2（了解）

javaScript 05 API中DOM_css3_11

注意点：

执行的程序，一般要用一个函数
间隔的时间，单位是毫秒（1秒 = 1000毫秒）
注意：如果执行的程序是具名函数，不要加小括号，直接写函数名

clearInterval关闭方法：

let intervalID = setInterval(执行的程序, 间隔的时间)
clearInterval(intervalID)

返回值：intervalID 是一个非零数值，用来标识通过 setInterval() 创建的定时器，这个值可以用来作为 clearInterval() 的参数来清除对应的定时器

javaScript 05 API中DOM_javascript_12

开启后就看到了计时器停止了

javaScript 05 API中DOM_前端_13

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: JavaScript Java

返回列表

上一篇：1028 List Sorting

下一篇：9810是什么意思（9810读作）

“javaScript 05 API中DOM” 的相关文章

java中continue和break区别1年前 (2023-02-02)

Java中两个字符串进行大小比较1年前 (2023-02-02)

【Java】一文秒懂http请求获取FlexManager平台FBox盒子信息1年前 (2023-02-02)

【JavaScript】循环和数组1年前 (2023-02-02)

Java注解详解1年前 (2023-02-02)

Java 面向对象程序设计消息、继承与多态实验课程设计研究报告1年前 (2023-02-02)

JavaScript高级 ES6类1年前 (2023-02-02)

java.lang.NoSuchMethodError: org.junit.platform.commons.util.ReflectionUtils.tryToLoadClass1年前 (2023-02-02)

Java安装详细教程1年前 (2023-02-02)

协程和线程的区别、协程原理与优缺点分析、在Java中使用协程1年前 (2023-02-02)

javaScript 05 API中DOM

一、DOM概念：

1.1什么是DOM

1.2DOM树介绍

二、DOM对象的获取

2.1 DOM对象

2.2 document对象

2.3 获取DOM对象

2.3.1获取第一个DOM对象

2.3.2获取多个DOM对象

2.4 拓展 伪数组介绍

三、innerHTML与innerText的区别

针对上述知识的综合案例

年会抽奖

四、className与classList的区别

3.1 className（一次只能修改一个，会覆盖）

3.2 className（可以解决会覆盖的问题）

来个综合案例：轮播图刷新

五、定时器setInterval & clearInterval

setInterva开启方法：

clearInterval关闭方法：

“javaScript 05 API中DOM” 的相关文章

阿里云国际版

2.4 拓展伪数组介绍