JS基础（DOM获取，修改元素常用属性，classList操作css样式，设置元素样式，设置/修改 表单属性，设置修改DOM元素内容，定时器的开启，清除）

求解决bug的99种方法
1,457 阅读3分钟

[toc]

web APIs

Snipaste_2022-04-03_23-20-27.png 1，作用和分类

  • 作用：就是使用JS去操作html和浏览器
  • 分类： DOM(文档对象模型) ，BOM（浏览器对象模型） （注意：DOM属于BOM里面）

JavaScript:

1,ECMAScript (定义规则)

2，Web APIs :

  • 2-1:DOM 页面对象模型
  • 2-2:BOM 浏览器对象模型

DOM-获取DOM元素，修改属性

DOM定义：

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

*  开发网页内容特效和实现用户交互

小结：

Web API阶段我们学习那两部分？ DOM BOM DOM 是什么？有什么作用？ DOM 是文档对象模型 操作网页内容，可以开发网页内容特效和实现用户交互

DOM树

定义：可以把HTML文档以树状结构直观的表现出来，（文档树或DOM数）

​ 描述网页内容关系的名词

作用：DOM树可以直接体现标签之间的关系

image-20220402234830614

image-20220402234746912

DOM对象

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

所有标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM的核心：把网页内容当做对象来处理

document对象：

1，DOM里面提供的一个对象

2，它提供的属性和方法都是用来访问和操作网页内容的

document.write()

注意：网页所有的内容都在document中

  1. DOM 树是什么？ 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 作用：文档树直观的体现了标签与标签之间的关系
  3. DOM对象怎么创建的？ 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理
  4. document 是什么？ 是 DOM 里提供的一个对象 网页所有内容都在document里面

获取DOM元素

可以：根据css选择器来获取DOM元素

操作某个标签 ，先得选中这个标签，与css选中器理性

查找元素DOM元素就是选种某个标签元素

获取DOM对象

1，根据css选择器来获取DOM元素

语法：

document.querySelector("css选择器")  //css选择器 为：类名

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

返回值：

如果有多个选择的标签时，CSS选择器匹配第一个元素，一个HTMLElement对象

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

文档：developer.mozilla.org/zh-CN/docs/…

2，根据css选择器来获取多个DOM元素

语法：document.querySelectorAll("css选择器")

document.querySelectorAll("css选择器") 获取到符合要求的多个元素组成的伪数组

 let li = document.querySelectorAll("css选择器")

<ul>
    <li>1</li>
	<li>2</li>
</ul>

let li = document.querySelector("ul li")
console.log(li)   //一个li
console.dir(li)  //第一个li

参数：

包含一个或者多个有小CSS选择器 字符串

返回值 ：

css选择器匹配的NodeList 对象集合

如：

<ul>
    <li>1</li>
	<li>2</li>
</ul>

let lis = document.querySelectorAll("ul li")
console.log(lis)   //数组 里面两个li

querySelect和querySelectAll举例：

<!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.querySelectorAll("css选择器")</title>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div>123</div>
    <script>
      // 获取第一个符合要求的li
      let li = document.querySelector('li');
      console.log('li  ----->  ', li);
      // 缩写  qsa
      // 获取所有的li标签   返回一个伪数组
      // 不管有没都返回伪数组
      let lis = document.querySelectorAll('li');
      console.log('lis  ----->  ', lis);
      // 伪数组 和 for循环搭配
      for (let i = 0; i < lis.length; i++) {
        // lis[i]   dom元素
        // 文本
        lis[i].innerText = `这是第${i + 1}个li标签`;
      }
      //
      let divs = document.querySelectorAll('div'); //没有这个元素时是空数组
      console.log('divs  ----->  ', divs); //[div]//有一个div就

      /* 
      小结：querySelect和querySelectAll区别：
        querySelect
        1，能找到  返回dom元素  dom对象
        2，找不到  返回null
        querySelectAll
        1，能找到  返回含dom的伪数组
        2，找不到  返回一个空的伪数组
        */
    </script>
  </body>
</html>

小结：

获取一个DOM元素我们使用谁？ querySelector() 获取多个DOM元素我们使用谁？ querySelectorAll() querySelector() 方法获取到的元素能直接操作修改吗？ 可以 querySelectorAll() 方法获取到的元素能直接修改吗？ 如果不能可以怎么做到修改？ 不可以， 只能通过遍历的方式。依次给里面的元素做修改

document.querySelectorAll("css选择器")得到是一个伪数组：

  • 有长度有索引的数组
  • 但是没有pop() push()等数组方法

如果得到里面的每一个对象，则需要遍历（for） 的方式获得

用document.querySelectorAll("css选择器")，即使一个也是伪数组，里面一个元素

querySelect和querySelectAll区别：

  小结：querySelect和querySelectAll区别：
        querySelect
        1，能找到  返回dom元素  dom对象
        2，找不到  返回null
        querySelectAll
        1，能找到  返回含dom的伪数组
        2，找不到  返回一个空的伪数组

根据其它方式获取DOM元素

根据id获取一个元素

document.getElementById("nav")

根据标签获取一类元素，获取页面所有div

document.getElementsByTagName("div")

根据类名获取元素 获取页面所有类名为 pp的

document.getElementsByClassName("pp")

image-20220403152512631

小结：

  1. 获取页面中的标签我们最终常用那两种方式？ querySelectorAll() querySelector()
  2. 他们两者的区别是什么？ querySelector() 只能选择一个元素， 可以直接操作 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
  3. 他们两者小括号里面的参数有神马注意事项？ 里面写css选择器 必须是字符串，也就是必须加引号
<!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>innerText和innerHTML</title>
</head>
<body>
    <div id="nav">id选择器</div>
    <p>我是p1标签</p>
    <p>我是p2标签</p>
    <div class="box">11111</div>
    <p class="box">11111</p>
    <script>
        // 根据id来获取  一个dom
        let nav = document.getElementById("nav")
        console.log('nav  ----->  ', nav);
        // 根据标签  来获取 元素  一组元素
        let p = document.getElementsByTagName('p')
        console.log('p  ----->  ', p);
        // 根据类名获取元素  ---带s  一组伪元素
        let box = document.getElementsByClassName('box')
        console.log('box  ----->  ', box);
        box[0].innerText = "我是box"
        /* 
        innerText  给元素dom插入内容
        dom.innerText = 内容
        */
    </script>
</body>
</html>

设置修改DOM元素内容

作用：可以修改元素文本更好元素的内容

DOM对象是根据标签生成的，所以操作标签，本质是操作DOM对象

就是操作对象使用的点语法

document.write() 方法 对象.innerText 属性 对象.innerHTML 属性

document.write()

作用：

1,只能将文本内容追加到标签前面的位置

2，文本中包含的标签会被解析

如：

document.write(`<h1>你好</h1>`)
只能将文本内容追加到<body>标签前面的位置的操作，局限性大

元素innerText属性

作用：

1，将文本内容添加/更新到任意标签位置

2，文本包含的标签不会被解析

如：

<ul>
    <li>1</li>
	<li id="info">2</li>
</ul>

let li = document.getElementById("info")
info.innerText = "1111"  //页面对应的Li标签内容出现11111
 元素.innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析

小结：

设置/修改DOM元素内容有哪3钟方式？ document.write() 方法 元素.innerText 属性 元素.innerHTML 属性 2. 三者的区别是什么？ document.write() 方法 只能追加到body中 元素.innerText 属性 只识别内容，不能解析标签 元素.innerHTML 属性 能够解析标签 如果还在纠结到底用谁，你可以选择innerHTML

innerHTML

作用；

1，将文本内容添加/更新到任意标签位置

2，文本中包含的标签会被解析

<ul>
    <li>1</li>
	<li id="info">2</li>
</ul>


let li = document.getElementById("info")
info.innerText = "1111"  //页面对应的Li标签内容出现11111
 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析

小结：

  1. 设置/修改DOM元素内容有哪3钟方式？ document.write() 方法 元素.innerText 属性 元素.innerHTML 属性
  2. 三者的区别是什么？ document.write() 方法 只能追加到body中 元素.innerText 属性 只识别内容，不能解析标签 元素.innerHTML 属性 能够解析标签 一般选择innerHTML

改标签内容

<!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>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <script>
      // document.write  功能弱  只能把标签写在body标签下面  ---不能写《/body》
      //  改文字
      document.querySelector('li:nth-child(2)').innerText =
        '<span>随便改<span>';
      document.querySelector('li:nth-child(3)').innerHTML =
        '<span>随便改1111<span>';
      /* 
            3种方式在标签中写  动态设置文本
            1，document.write  只能在body标签中写 以后看不到
            2，innerText 只能设置文本 ， 不能解析 html字符串
            3，innerHTML  可以设置文本  也可以解析html 字符串
            */
    </script>
  </body>
</html>

案例-随机抽取的名字显示到指定的标签内部

<body>
    <div class="box">
       抽中英雄是： <span></span> <span></span>
    </div>
    <script>
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        let random = Math.floor(Math.random()*arr.length)
        let span = document.querySelector('span')
        span.innerText = arr[random]
    </script>
</body>

设置/修改元素常用属性

可以通过JS设置/修改标签元素属性，比如 src更好 图片

常见属性都可以修改：href,title,src等。。。。

语法：

对象.属性 = 值
<ul>
    <li>1</li>
	<li >2</li>
	<img id="info"/>
</ul>


let img = document.getElementById("info")
img.src = "/image/o1.jpg"
img.title = "这是神图"

案例-页面刷新-更换图片


  <div class="box">
        图片：<img src="./images/09.jpg" id="img" alt="">
    </div>
    <script>
        let num = ["00","01","02","03","04","05","06","07","08","09",10]
        let random = Math.floor(Math.random()*num.length)
        console.log('random  ----->  ', num[random]);
        let img = document.getElementById("img")
        img.src = `./images/${num[random]}.jpg`

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。 比如通过 轮播图小圆点自动更换颜色样式 点击按钮可以滚动图片，这是移动的图片的位置 left 等等 学习路径： 通过 style 属性操作CSS ，立即可以生效 操作类名(className) 操作CSS ，会覆盖之前类名 通过 classList.add 操作类控制CSS ,不会覆盖之前类名

通过 style 属性操作CSS

语法：

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

let box = document.querySelector(".box")
box.style.backgroundColor = "yellow"
box.style.width = "400px"
box.style.marginTop = "50px"

背景颜色随机显示

<!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>09-背景颜色的随机显示.html</title>
    <style>
      body {
        height: 100vh;
      }
      .box {
        background-image: linear-gradient();
      }
    </style>
  </head>
  <body>
    <script>
   function getColor(){
    let color1 = Math.round(Math.random() * 255);
      let color2 = Math.round(Math.random() * 255);
      let color3 = Math.round(Math.random() * 255);
      let color4 = Math.round(Math.random() * 255);
      let color5 = Math.round(Math.random() * 255);
      let color6 = Math.round(Math.random() * 255);
      console.log('  ----->  ', `rgb(${color1},${color2},${color3})`);
      // console.log('  ----->  ',  document.getElementsByTagName('body')[0]);
      // document.getElementsByTagName('body')[0].style.backgroundColor = `rgb(${color1},${color2},${color3})`
      document.getElementsByTagName(
        'body'
      )[0].style.backgroundImage = `linear-gradient(rgb(${color1},${color2},${color3}),rgb(${color4},${color5},${color6}),rgb(${color2},${color2},${color1}))`;
   }
      setInterval(() => {
        getColor()
      }, 1000);
    </script>
  </body>
</html>

小结：

  1. 设置/修改元素样式属性通过style属性引出来 2. 如果需要修改一个div盒子的样式，比如 padding-left, 如何写？ element.style.paddingLeft = ‘300px’ 小驼峰命名法 3. 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

操作类名（className）操作css

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

语法：


  <div class="box">
        图片：<img src="./images/09.jpg" id="img" alt="">
    </div>

元素.className = "active"
注意：
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名


使用 className 有什么好处？
可以同时修改多个样式
2. 使用 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>08-className设置样式类来操作css样式</title>
    <style>
        .active{
            color: red;
        }
        .btn{
            color:pink;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href=""><buttton class="pp kk">点击</buttton> </a></li>
        <li><a href="">3</a></li>
    </ul>
    <script>
        let red = document.getElementsByTagName("a")
        red[1].className = "active"
        let btn = document.getElementsByClassName("pp")
        btn[0].className = "btn"
    </script>
</body>
</html>

通过设置classList操作类控制css

有的：

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

追加一个类：   元素。classList.add("类名")
删除一个类：   元素.classList.remove("类名")
切换一个类：   元素.claseeList.toggle("类名")
判断一个类有无：  元素.classList.contains("类名")  //返回true和false

小结：

使用 className 和classList的区别？ 修改大量样式的更方便 修改不多样式的时候方便 classList 是追加和删除不影响以前类名

设置元素样式


<!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>07-设置元素的样式</title>
    <style>
        ul li {
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
    </style>
</head>
<body>
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度1</a></li>
            <li><a href="#">百度2</a></li>
            <button id="btn">点击</button>
            <input type="" class="inp">
        </ul>
    <script>
        // 设置元素的样式
        let baiDu = document.getElementsByTagName("a")
        baiDu[0].href = "https://www.baidu.com/"
        document.getElementById("btn").disabled = "false"
        document.getElementsByClassName("inp")[0].type = "password"
    </script>
</body>
</html>

设置/修改 表单元素 属性

作用：设置表单类型框转文本框

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

表单.value = "用户命"
表单.type = "password"

特点：

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

如：disabled checked, selected

定时器--（间歇函数）

作用：

每隔一段时间需要自动执行一段代码，不需要我们手动去触发

运用：网页中的倒计时

  • 定时器函数有两种：
    • 定时器
    • 延时器

作用：能够使用定时器函数重复执行代码

定时器函数可以开启和关闭定时器：

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

function repeat(){
    console.log("万少今天真帅")
}
setInterval(repeat,1000)  //一秒调用一次
注意：
函数名字不需要加括号
定时器返回的是一个id数字  句柄，可以用来关闭定时器

2，关闭定时器

let 变量名 = setIterval(函数，间隔时间)
clearInterval(变量名)
一般不会刚创建就停止，而是满足一定条件再停止
注意：
函数名字不需要加括号
定时器返回的是一个id数字

小结：

定时器函数有什么作用？ 可以根据时间自动重复执行某些代码 定时器函数如何开启？ setInterval(函数名, 时间) 定时器函数如何关闭？

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

clearInterval(变量名)

定时器的使用和清理

<!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>10定时器的使用和清除</title>
  </head>
  <body>
    <script>
      /* 
           每隔一秒执行一次函数  时间单位  毫秒  1000毫秒 = 1 秒 
           1,语法：
          前面有函数 调用函数  setInterval(匿名函数，时间)
           */
      //    function repeat(){
      //       document.write("我喜欢你")
      //    }
      //    setInterval(repeat,5000)   //注意  ： 函数不带括号  setInterval(匿名函数，时间)
      //   2，语法：
      setInterval(function () {
        document.write('打印');
      }, 1000);

      //   定时器清理 用 句柄（end）   let end =      setInterval(function () {
      //     document.write('打印');
      //   }, 1000);
      //   clearInterval(句柄end)  句柄关闭定时器
    </script>
  </body>
</html>

案例-倒计时60秒定时器关闭-按钮可以点击

   <button disabled>倒计时<span>60</span>秒</button>
    <script>
        let btn = document.getElementsByTagName("button")
        let num = document.getElementsByTagName("span")
        console.log('btn  ----->  ', btn);
        // let num = document.querySelector('button')
        console.log('num  ----->  ', num);
        let end = setInterval(() => {
            num[0].innerText--
            if(num[0].innerText == 0){
                console.log('1111  ----->  ', 1111);
                clearInterval(end)
                btn[0].disabled = false
            }
        }, 60);

简易轮播图案例：

<!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>0-0轮播图案例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            margin: 50px auto;
            position: relative;
            width: 700px;
            height: 320px;
            background-color: #ff0;
            display: flex;
            flex-direction: column;
        }
        ul{
            width: 700px;
            height: 320px;
            overflow: hidden; 
        }
        ul li{
            width: 700px;
            height: 320px;
            display: none;
            list-style: none;
        }
        img{
         width: 100%;
        }
        .active{
            display: block;
        }
        .title{
            width: 100%;
            left: 0;
            bottom: 0;
            background-color: #232c2f;
            position: absolute;
            color: #8fd40f;
            padding: 5px;
            display: block;
        }
    </style>
</head>
<body>
 <div class="box">
    <ul>
        <li class="active">
            <img src="./image/b01.jpg" alt="">
        </li>
        <li>
            <img src="./image/b02.jpg" alt="">
        </li>
        <li>
            <img src="./image/b03.jpg" alt="">
        </li>
        <li>
            <img src="./image/b04.jpg" alt="">
        </li>
        <li>
            <img src="./image/b05.jpg" alt="">
        </li>
        <li>
            <img src="./image/b06.jpg" alt="">
        </li>
        <li>
            <img src="./image/b07.jpg" alt="">
        </li>
        <li>
            <img src="./image/b08.jpg" alt="">
        </li>
        <li>
            <img src="./image/b09.jpg" alt="">
        </li>
        <li>
            <img src="./image/b10.jpg" alt="">
        </li>
        <li>
            <img src="./image/b11.jpg" alt="">
        </li>
        <li>
            <img src="./image/b12.jpg" alt="">
        </li>
        <li>
            <img src="./image/b13.jpg" alt="">
        </li>
    </ul>
    <div class="title">第1张图的描述信息</div>
 </div>
    <script>
        let lis = document.querySelectorAll("li")
        let title = document.querySelector('.title')
        let i = 0
        let end = setInterval(() => {
            if(i > 12){i = 0}
            document.querySelector(".active").classList.remove("active")
            lis[i].classList.add("active")
            title.innerText = `第 ${i + 1} 张图的描述信息`
            i++
        }, 1000);
    </script>
</body>
</html>

image-20220403213500579

题目

浏览器从上到下解析 ， 碰到

image-20220403095854252

3 c BOM 包含 DOM

image-20220403095905687

4 css样式没有//

5, d 变量数字开头错

image-20220403095951331

image-20220403100019655

7 b 数组Array 是引用型类型

image-20220403100032483

8, b if(true)let aaa = 123 console.log(aaa) //报错

​ a 如果 if 大括号里面只有一行代码 可以省略大括号

if  简写
if(true)  console.log("正常")

image-20220403100040602

9，b pop() 删除最后一个 返回删除的元素

image-20220403100428963

11 d num2++ + num1* 2 + num2*2 - 2

image-20220403100911044

image-20220403100923595

image-20220403100949666

image-20220403101017560

image-20220403101028790

在外面定义,报错 ，i全局变量

image-20220403101057042

obj.aaa 直接往里找

image-20220403101209346

image-20220403101233382

image-20220403101313486

引用类型

image-20220403101401491

函数不调用，自己不执行，形参一定是局部变量

image-20220403101643096

image-20220403101810077

image-20220403101913184

image-20220403102029089

image-20220403102036893

image-20220403102053233

image-20220403102129675

image-20220403102157872

image-20220403102209647

转布尔类型 都是true

转布尔类型 都是false 数字0转布尔为false

0 “ ” false undefined NaN null

image-20220403102216890

image-20220403102501077

image-20220403102558484

image-20220403102607394

image-20220403102636540

image-20220403102710294

image-20220403102717656

image-20220403102803032

image-20220403102848951

image-20220403102855992

image-20220403102927700

image-20220403102939434

image-20220403102959467

image-20220403103029551

image-20220403103037177

image-20220403103059054

image-20220403103123610

多行注释不能套多行注释

image-20220403103211816

image-20220403103237404

image-20220403103502551

image-20220403103529024

一些测试题

image-20220403194601554

image-20220403194623996

avatar
文章
阅读
粉丝