当前位置：网站首页>js4day(DOM开始：获取DOM元素内容，修改元素样式，修改表单元素属性，setInterval定时器，轮播图案例)

js4day(DOM开始：获取DOM元素内容，修改元素样式，修改表单元素属性，setInterval定时器，轮播图案例)

2022-07-02 09:45:00 【荻风溪畔】

文章目录

DOM简介

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
在这里插入图片描述

获取DOM对象

1. 根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数:
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

参看文档：

选择匹配的多个元素

语法：

document.querySelectorALL('css选择器')

参数:
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的元素NodeList集合。
得到的是一个伪数组：
 有长度有索引号的数组
 但是没有 pop()push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
如果没有匹配到，则返回null。

设置/修改DOM元素内容

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：

document.write() 方法
只能将文本内容追加到 </body> 前面的位置
文本中包含的标签会被解析

document.write('<strong>有点意思~</strong>')

对象.innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析

box.innerText = '有点意思~'

对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析

box.innerHTML = '<strong>有点意思~</strong>'

设置/修改元素常用样式属性

语法：
对象.属性=值

        // 1.获取元素 图片
        let pic = document.querySelector('img')
        //操作元素
        pic.src = `./images/1.webp`
        pic.title = '我是图片'

设置/修改元素样式属性

1.通过 style 属性操作CSS

注意：style属性只能获取和设置行内样式，在类样式定义的样式通过style获取不到。
在这里插入图片描述

      let box = document.querySelector('div')
      box.style.background = 'skyblue'
      box.style.width = '400px'
      box.style.marginTop = '100px'

标签选择body时，因为body是唯一的标签，可以直接写 document.body.style

	document.body.style.backgroundImage = `url(./images/desktop_${
      num}.jpg)`

2. 操作类名(className) 操作CSS

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

      let box = document.querySelector('div')
      box.className = 'active'

缺陷： 如果div中原来有类会覆盖原有的类（因为相当于给div的class重新赋值）。

3. 通过 classList 操作类控制CSS

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

    box.classList.add('active')				// 追加一个类
    box.classList.remove('active')			// 删除一个类
    // 切换类，元素中有active就删除，没有active就追加
    box.classList.toggle('active')

**总结：**使用 className 和classList的区别？
className可以同时修改多个样式，但是直接使用 className 赋值会覆盖以前的类名
classList修改较少样式的时候方便， classList 是追加和删除不影响以前类名

设置/修改表单元素属性

在这里插入图片描述

    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" class="agree">
    <script>
        // 1.获取元素
        let input = document.querySelector('input')

        // 2.取值或者设置值 得到input里面的值可以用value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'
        let btn = document.querySelector('button')
        // btn.disabled = false //相当于删掉这个属性了
        let checkbox = document.querySelector('.agree')
        checkbox.checked = 'checked'
    </script>

在这里插入图片描述

定时器-间歇函数

在这里插入图片描述

1. 开启定时器

在这里插入图片描述

   let time = setInterval(function () {
    document.write("我是个倒计时<br>")}, 1000)

注意：

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

2. 关闭定时器

在这里插入图片描述

  clearInterval(time)  //可以写进setInterval的函数内

注册协议倒计时案例

在这里插入图片描述

<!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>
    <textarea name="" id="" cols="30" rows="10">
        逮虾户注册协议
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script> let btn = document.querySelector('.btn') let i = 6; function countDown() {
       i--; btn.innerHTML = `我已经阅读用户协议(${
        i})` if (i === 0) {
       clearInterval(timer) //清除定时器 btn.disabled = false //开启按钮 btn.innerHTML = `我同意该协议` //更换文字 } } let timer = setInterval(countDown, 1000) </script>
</body>

</html>

在这里插入图片描述

简单轮播图案例

每隔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>Document</title>
    <style> .img-box {
       width: 700px; height: 320px; margin: 50px auto 0; background: #000; position: relative; } .img-box .tip {
       width: 700px; height: 53px; line-height: 53px; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 10; } .img-box .tip h3 {
       width: 82%; margin: 0; margin-right: 20px; padding-left: 20px; color: #98E404; font-size: 28px; float: left; font-weight: 500; font-family: "Microsoft Yahei", Tahoma, Geneva; } .img-box .tip a {
       width: 30px; height: 29px; display: block; float: left; margin-top: 12px; margin-right: 3px; } .img-box ul {
       position: absolute; bottom: 0; right: 30px; list-style: none; z-index: 99; } </style>
</head>

<body>
    <div class="img-box">
        <img class="pic" src="./images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>
    <script> let data = [ {
       imgSrc: 'images/b01.jpg', title: '挑战云歌单，欢迎你来' }, {
       imgSrc: 'images/b02.jpg', title: '田园日记，上演上京记' }, {
       imgSrc: 'images/b03.jpg', title: '甜蜜攻势再次回归' }, {
       imgSrc: 'images/b04.jpg', title: '我为歌狂，生为歌王' }, {
       imgSrc: 'images/b05.jpg', title: '年度校园主题活动' }, {
       imgSrc: 'images/b06.jpg', title: 'pink老师新歌发布，5月10号正式推出' }, {
       imgSrc: 'images/b07.jpg', title: '动力火车来到西安' }, {
       imgSrc: 'images/b08.jpg', title: '钢铁侠3，英雄镇东风' }, {
       imgSrc: 'images/b09.jpg', title: '我用整颗心来等你' }, ] let i = 0 //不能在函数中for循环访问（脱离了定时器，会在1秒内结束函数），要设置全局变量根据定时器改变i的值 function lunbo() {
       i++; // 获取数据 let dat = data[i]; let img = dat.imgSrc let title = dat.title // 获取标签 let pic = document.querySelector('.pic') let text = document.querySelector('.text') pic.src = img text.innerHTML = title // 更改标签属性值 if (i === data.length - 1) {
       i = -1; //如果i=0，则第一张图片会跳过轮播（因为头部的i++） } } setInterval(lunbo, 1000) </script>

</body>

</html>