javaScript 05 API中DOM-阿里云开发者社区

javaScript 05 API中DOM

2023-02-20 95

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： DOM概念、DOM常见用法、定时器的使用

一、DOM概念：

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

1.1什么是DOM

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

1.2DOM树介绍

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选择器')

举个例子

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

2.3.2获取多个DOM对象

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

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

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

返回值：

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

获取失败空数组

注意点：

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

举个例子

控制台查看

以下是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可解析标签

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

针对上述知识的综合案例

年会抽奖

<!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">&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)' },
    ]
    // 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

控制台查看

写法2（了解）

注意点：

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

clearInterval关闭方法：

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

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

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

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

一、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关闭方法：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2.4 拓展伪数组介绍