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

一、web API 基础认知

1.作用和分类

作用：就是使用js去操作html 和浏览器简单来说：就是一套我们可以直接操作页面元素的代码功能

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

2.什么是DOM

DOM 是用来呈现以及与任意html 或 XML 文档交互的API 大白话来说：就是浏览器根据标签自动生成了对应的js对象

原因：js不能直接操作页面内容，就需要一个东西能让js操作页面内容，这就是DOM

作用：可以让我们通过js的方式很方便控制页面的标签

3.DOM树

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

效果如下：

作用：文档树直观的体现标签与标签之间的关系

4.DOM对象

DOM对象：浏览器根据html标签生成的js对象；所有的标签属性都可以在这个对象上面找到；修改这个对象的属性会自动映射到标签身上

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

document 对象：是DOM 里提供的一个对象，简单来说jdocument 理解成JS单独针对DOM 所封装的一个大大管家，大管家里面有很多工具，可以辅助我们操作页面标签的代码，如：document.addEventListener( ）、document.querySelector( )；

所以它提供的属性和方法都是用来访问和操作网页内容的，网页所有内容都在document里面

二、获取DOM对象

我们想要操作某个标签首先就是要选中这个标签，跟CSS选择器类似，选中标签才能操作

查找元素DOM元素就是选择页面中标签元素

1.获取DOM对象方法

方法一：选择匹配的第一个元素

语法：

特点：

只能匹配一个元素；当多个元素满足CSS选择器时，它只能选到第一个元素
可以直接对获取的元素操作修改
返回值：CSS选择器匹配的第一个元素，一个HTMLElement 对象

如果没有匹配到则返回null

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    
    <script>

        // 获取dom元素p
        let p = document.querySelector('p')//选择到第一个元素，变量p为一个对象。
    </script>
</body>

方法二：选择匹配多个元素

语法

特点

可以选择到满足CSS选择器的所有元素
不可以对获取到的元素直接修改，只能通过遍历的方式依次给里面的元素做修改
返回值：CSS选择器匹配到NodeList 对象集合, 简单来说：就是获得的是一个伪数组，有长度有索引号的数组，但没有pop（）， push（）等数组方法

注意点：哪怕是只有一个元素，通过document.querySelectorAll（）获取到的也是一个伪数组，里面只有一个元素而已

 <body>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <div>123</div>

    <script>

      /* 
      querySelectorAll 不管你的选择器写对与否，返回值都是数组 
      querySelector  
        1 能找到 返回 dom元素 dom对象
        2 找不到了  返回null 
      
       */



      // querySelector 只能获取第一个符合要求的li标签
      // let li = document.querySelector('li');

      // 获取所有的li标签 返回一个数组
      // let lis = document.querySelectorAll('li');

      // // 数组就可以和循环搭配
      // for (let index = 0; index < lis.length; index++) {
      //   // lis[index]  dom元素

      //   // 文本
      //   lis[index].innerText = `这个是li标签 ` + index;
      // }

      // let divs = document.querySelectorAll('div');
      // console.log(divs); // 输出什么 ？ 空数组！！ 
      // console.log(divs); // 输出什么 [ div dom元素 ]  1个元素 


      console.log( document.querySelector("button") );
    </script>
  </body>
</html>

总结

这两个方法里面写CSS选择器；必须是字符串，也就是必须加引号

数组和伪数组

真正的数组，简单的判断，有一个方法 filter，document.querySelectorAll 获取的数组就是伪数组

方法三：根据id获取的一个元素（了解）

方法四：根据标签获取一类的元素获取页面所有的div

方法五：根据类名获取元素，获取页面所有类名为W的

2.设置/修改DOM元素内容

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

方式一：document.write （）方法

特点：功能比较弱，比较少用

方式二：对象.innerText 属性

方式三：对象.innerTHML 属性

<title>3种方式设置文本内容方式</title>
</head>
<body>
 
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    //  document.write 比较少用，功能比较弱，只能写在 /body标签上面
    // document.write ('修改文字')

    // innerText 只能设置文本，不能解析html字符串
    document.querySelector('li:nth-child(2)').innerText = '修改文字'

    // innerHTML 能设置文本，并且能解析html字符串
    document.querySelector('li:nth-child(3)').innerHTML = ' <button>修改文字和样式</button>'
  </script>
</body>

总结：

innerText 只能设置文本，不能解析html字符串
innerHTML 能设置文本，并且能解析html字符串
如果还在纠结到底使用谁，可以选择使用 innerHTML

3.设置/修改DOM元素属性（重点）

3.1设置/修改元素常用属性

最常见的属性比如有 a 标签身上的 href 图片 src alt id type class 属性
语法：对象.属性 = 值

<title>dom元素-属性.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">跳转到</a>
    <img src="./images/1.jpg" title="有惊喜" alt="" />
    <p id="nav"></p>
    <input type="text" />
    <button type="button"></button>
    <h1 class="dfdf"></h1>
    <script>
      /* 
       a 标签身上的  href 图片 src alt  id type class 属性 
        1 获取标签对应的dom元素
        2 dom.属性名=属性值 
       */

      // let aDom = document.querySelector('a');
      // 修改a标签的属性
      // aDom.href = 'https://www.processon.com/mindmap/623c471107912906f5184873';

      let imgDom=document.querySelector("img");
      // 修改图片的src
      imgDom.src="./images/2.jpg";

      // 动态修改 title属性
      imgDom.title="你妈妈叫你回去吃饭";
    </script>
  </body>

3.2设置/修改元素样式属性

方式一：通过style 属性操作CSS

语法：对象.style.样式属性 = 值

案例代码

<title>随机更换背景图片</title>
    <style>
      .d1 {
        background-image: url(http://md.zbztb.cn/uploads/103610168149/1.png);
      }
      .d2 {
        background-image: url(http://md.zbztb.cn/uploads/103610168149/2.png);
      }
      .d3 {
        background-image: url(http://md.zbztb.cn/uploads/103610168149/3.png);
      }
      .d4 {
        background-image: url(http://md.zbztb.cn/uploads/103610168149/4.png);
      }
      .d5 {
        background-image: url(http://md.zbztb.cn/uploads/103610168149/5.png);
      }
    </style>
  </head>
  <body>
    <script>
     // 一组图片
      let imgs = ["d1", "d2", "d3", "d4", "d5"];
		// 图片随机数的范围
      let index = Math.round(Math.random() * (imgs.length - 1));
      // 获取body对象使用style修改样式
      document.body.style.backgroundImage = `url(${imgs[index]})`;
    </script>

注意点

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

方式二：操作类名（className）操作CSS

如果修改的样式比较多，直接通过style属性修改会比较繁琐，所以可以通过CSS类名的形式

语法

代码案例

    <title>className练习</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      /* 
    className 
    会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类 

    如果想要同时设置多个 class  以空格做分割即可 
    
     */
      // 先获取dom元素
      let div = document.querySelector("div");
      // 获取多个样式
      div.className = "box";
    </script>

注意：

由于class是关键字, 所以使用className去代替
className赋值会覆盖以前的类名, 如果需要添加一个类,需要保留之前的类名

方式三：通过 classList 操作类控制CSS

由于className会比较容易覆盖以前的类名，所以可以通过classList 方式来追加或者删除类名

语法

补充说明：

add 追加一个类，如果前面有这个类名，则会覆盖它；不会覆盖掉前面其他的类

remove 删除一个类，不会影响前面其他的类

toggle 之前如果没有的话，表示增加；如果之前有就表示切换

代码案例

<title>classList练习</title>
  <style>
    .d1 {
      width: 100px;
    }
    .d2 {
      height: 200px;
    }
    .d3 {
      background-color: pink;
    }
    .d4 {
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="d2 d4">111</div>
  <script>
    // 获取dom元素
    let div = document.querySelector('div')
    // classlist控制CSS
    // add 表示增加
    div.classList.add('d3')
    // remove 表示删除
    div.classList.remove('d1')
    // toggle 之前如果没有的话，表示增加；如果之前有就表示切换
    div.classList.toggle('d2')
  </script>

总结：使用 className 和classList的区别？

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

3.3设置/修改表单元素属性

innerText 和 innerHTML 主要是用来设置双标签的内容, 像单标签可以使用value设置内容

表单属性的总结

      1 设置普通的输入框  input.value ="表单的值"
      2 设置 按钮的禁用
        button.disabled=true   禁用
        button.disabled=false  启用
      3 设置单选框或者复选框
        radio.checked=true   选中
        checkbox.checked=false  取消选中

      4 设置下拉列表 select
        option.selected=true  选中

文本域既是属于表单元素，又是双标签

value 和 innerHTML 的区别方式一：设置 textarea 里面文本的内容的时候，可以选择在标签内写文本即可方式二想要获取内容 .value 原样获取内容 .innerHTML 获取的内容如果包含html 会转移

 <title>表单属性设置</title>
</head>
<body>
  <!-- 表单文本框 -->
  <input type="text" class="username"><br>
  <!-- 表单单选框 -->
  <input type="radio"class='isagree'>是否同意协议 <br>
  <!-- 表单多选框 -->
  <input type="checkbox"checked> 唱歌 <br>
  <!-- 表单按钮框 -->
  <button class="btu">发送验证码</button> <br>
  <!-- 表单下拉菜单 -->
  <select class="address">
    <option >深圳</option>
    <option >广州</option>
    <option >北京</option>
    <option >上海</option>
  </select>
  <textarea ></textarea>
  <script>

    // 获取表单文本dom元素
    let username = document.querySelector('.username')
    // 获取表单单选框dom元素
    let isagree = document.querySelector('.isagree')
    // 获取按钮dom元素
    let btu = document.querySelector('.btu')
     // 获取下拉菜单dom元素
    let Option = document.querySelector('Option:nth-child(2)')

    
   // 设置表单文本dom元素
    username.value = '我的用户名'

    // 设置表单单选框dom元素
    isagree.checked = true //勾选上
    // isagree.checked = false  //不勾选上

  //  设置button 按钮dom元素 disabled 禁用
   btu.disabled = true // 禁用
   btu.disabled = false // 启用

  //设置下拉菜单dom元素
    Option.selected = true // 选中
    // Option.selected = false // 不选中

    // 获取文本域标签，文本域既是属于表单元素，又是双标签
    let textarea = document.querySelector('textarea')

     // 获取文本域中的值
    console.log(textarea.value); //ok
    // console.log(textarea.innerText); //不OK
    // console.log(textarea.innerHTML); //ok
  
    // value   有区别  innerHTML
      // 设置 textarea 里面文本的内容的时候
      // 可以选择 在标签内写文本即可
      // 想要获取 内容
      // .value  原样获取内容
      // .innerHTML 获取的内容如果包含html 会转移

      // 通过js的方式来设置内容 三种方式都可以
      // textarea.value= '你好' //ok
      // textarea.innerText = '你好' //ok
      textarea.innerHTML = '你好' //ok
</script>
</body>

三、定时器-间歇函数（重点）

定时器函数在开发中使用的场景

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

1.开启定时器

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

注意：

函数名字不需要加括号
定时器返回的是一个id数字。

2.关闭定时器

场景：一般人们会经常用到定时器，但是也不一定会让他一直运行下去；然而我们开启了定时器，它是不会自动停止的，都需要我们手动配置，然后才会关闭。

作用：可以根据时间自动重复执行某些代码

语法

原理

我们每开启一个定时器，定时器就会有一个返回值id，我们正是利用这个id来准确关闭定时器的。

网页轮播图案例：

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

<body>
  <img src="./pics/b01.jpg" alt="">
  <script>
    /* 需求：每隔一秒，就切换显示一张图片
       */
      // 定义一个时间
      let time = 1
      // 获取img对象
      let img = document.querySelector('img')
      // 倒计时
      setInterval(function () {
        // 修改对象属性
        img.src = `./pics/b0${time}.jpg`
        time++
        if(time ===10) {
          time = 1
        }
      },1000)
  </script>
</body>

web API (获取DOM对象，定时器)