Web APIs之DOM

一.Web API基本认知

二.获取DOM对象

三.操作元素内容

四. 操作元素属性

五.定时器-间歇函数

一、Web API基本认知

*作用和分类
*什么是DOM
*DOM树
*DOM对象

1.作用和分类

（1）作用：使用JS去操作html和浏览器
（2）分类：DOM(文档对象模型)、BOM(浏览器对象模型)

2.什么是DOM？

（1）DOM(Document Object Model—文档对象模型)，是浏览器提供的一套专门用来操作网页内容的功能。
（2）DOM作用：开发网页内容特效和实现用户交互

3.DOM树是什么？

（1）将HTML文档以树状结构直观的表现出来。DOM树
（2）描述网页内容关系的名词
（3）作用：文档树直观的体现了标签与标签之间的关系

4.DOM对象

（1）是什么？
浏览器根据html标签生成的JS对象
①所有的标签属性都可以在这个对象上面找到
②修改这个对象的属性会自动映射到标签身上

  <!--div 在html中是标签 -->
  <div>123</div>
  <script>
      const div = document.querySelector('div');
      //打印对象
      console.dir(div);//div在js中是dom对象
  </script>

（2）核心思想
把网页内容当做对象来处理

（3）document对象
①是DOM里提供的一个对象
②它提供的属性和方法都是用来访问和操作网页内容的

 例如：document.write()

③ 网页所有内容都在document里面

二、获取DOM对象

*根据css选择器来获取DOM元素（重点）
*其他获取DOM元素方法（了解）

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

（1）选择匹配的第一个元素
语法：

document.querySelector('css选择器')

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

返回值：
css选择器匹配的第一个元素，一个HTMLElement对象
如果没有匹配到，则返回null

<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
</ul>
<script>
    //1.获取匹配的第一个元素
    const box = document.querySelector('div');
    console.log(box);//123

    const box1 = document.querySelector('.box');
    console.log(box1);//123

    const nav = document.querySelector('#nav');
    console.log(nav);//导航栏

    //获取第一个ul li
    const li = document.querySelector('ul li:first-child')
    console.log(li) //测试1
</script>

（2）选择匹配的多个元素
语法：

  document.querySelectorAll('css选择器')

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

返回值：
CSS选择器匹配的NodeList对象集合

//2.选择所有的小li
//document.querySelectorAll('ul li')
const lis = document.querySelectorAll('ul li')
console.log(lis)

通过querySelectAll()得到一个伪数组：
*有长度有索引号的数组
*但是没有pop() push()等数组方法
想要得到里面的每一个对象，则需要遍历(for)的方式获得

哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

<ul class="nav">
	  <li>1</li>
	  <li>2</li>
	  <li>3</li>
</ul>
<script>
  const lis = document.querySelectorAll('.nav li')
  for(let i=0;i<lis.length;i++){
      console.log(lis[i])//每一个小li对象
  }
</script>

（3）总结：
①.获取一个DOM元素我们使用谁？能直接操作修改吗？
querySelector()，可以
②.获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改？
querySelectorAll()，不可以，只能通过遍历的方式依次给里面的元素做修改
③.获取页面中的标签常用的两种方式？区别？
querySelector()只能选择第一个元素，可以直接操作
querySelectorAll()可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
④.它们两者小括号里面的参数有什么注意事项？
里面写css选择器
必须是字符串，也就是必须加引号

2.其他获取DOM元素方法（了解）

(1)根据id获取一个元素

document.getElementById('nav')

(2)根据标签获取一类元素 获取元素所有div

 document.getElementsByTagName('div')

(3)根据类名获取元素 获取页面 所有类名为w的

 document.getElementsByClassName('w')

三、操作元素内容

目标：能够修改元素的文本更换内容
*DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。
*修改元素里面的内容，可以使用如下方式：

*对象.innerText属性
*对象.innerHTML属性

1.元素innerText属性，只识别文本，不解析标签

（1）将文本内容添加/更新到任意标签位置
（2）显示纯文本，不解析标签

<div class="box">文字内容</div>
<script>
    const box = document.querySelector('.box');
    box.innerText = '盒子';
    box.innerText = '<strong>我是一个盒子</strong>'  //不解析标签
</script>

2.元素.innerHTML属性，识别文本，解析标签

（1）将文本内容添加/更新到任意标签位置
（2）会解析标签，多标签建议使用模板字符

<div class="box">文字内容</div>
<script>
   const box = document.querySelector('.box');
   box.innerHTML = '盒子';
   box.innerHTML = '<strong>我是一个盒子</strong>'  //解析标签
</script>

3.随机抽奖案例：

    <!-- 1.声明数组：const personArr = ['lily','rose','pink'] -->
    <!-- 2.一等奖：随机生成一个数字（0-数组长度），找到对应数组的名字 -->
    <!-- 3.通过innerText或innerHTML将名字写入span元素内部 -->
    <!-- 4.二等奖依次类推 -->
    <div class="wrapper">
        <strong>123</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h2>二等奖：<span id="two">???</span></h2>
        <h5>三等奖：<span id="three">???</span></h5>
    </div>

    <script>
        //1.
        const personArr = ['lily','rose','pink']
        //2.先做一等奖
        //2.1随机数  数组下标
        const random = Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])//pink

        //2.2获取one元素
        const one = document.querySelector('#one')
        //2.3把名字给one
        one.innerHTML = personArr[random];
        //2.4删除这个名字
        personArr.splice(random,1);
        console.log(personArr);//['lily','rose']

        const random2 =Math.floor(Math.random()*personArr.length)
        const two = document.querySelector('#two');
        two.innerHTML = personArr[random2];
        personArr.splice(random2,1);
        
        const random3 = Math.floor(Math.random()*personArr.length)
        const three = document.querySelector('#three')
        three.innerHTML = personArr[random3]
        personArr.splice(random3,1)

    </script>

四、操作元素属性

*操作元素常用属性
*操作元素样式属性
*操作表单元素属性
*自定义属性
1.操作元素常用属性
*还可以通过js设置/修改标签元素属性，比如通过src更换图片
*最常见的属性比如：href、title、src等
语法：
对象.属性 = 值

// 1.获取元素
const pic = document.querySelector('img')
//2.操作元素
pic.src = './images/b02.jpg'
pic.title = 'lily在新西兰'

2.操作元素样式属性
*通过style属性操作css
*操作类名(className)操作css
*通过classList操作类控制css

（1） 通过style属性操作css
语法：对象.style.样式属性 = 值

const box = document.querySelector('.box')
box.style.width = '300px'
box.style.backgroundColor = 'hotpink'

（2）操作类名(className)操作css
*如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
①语法：

//active是一个css类名
元素.className = 'active'

②注意：
1.由于class是关键字，所以使用className去代替
2.className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

 <style>
       .nav{
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .box{
           width: 900px;
           height: 900px;
       }
   </style>

    <div class="nav">123</div>
    <script>
        const div = document.querySelector('div')
        div.className = 'nav box' //共存 900 900 pink
        // div.className = 'box' //box覆盖 nav 
    </script>

①使用className有什么好处？
可以同时修改多个样式
②使用className有什么注意事项？
直接使用className赋值会覆盖以前的类名

（3）通过classList操作类控制css

  <div class="box">文字</div>
    <script>
        //通过classList添加
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式
        //2.1追加类add() 类名不加点，并且是字符串
        box.classList.add('active')

        //2.2删除类  remove() 类名不加点，并且是字符串
        box.classList.remove('box')

        //2.3切换类 toggle() 有还是没有啊，有就删掉，没有就加上
        box.classList.toggle('active')
    </script>

3.操作表单元素属性
①常见表单需要修改属性情况：
点击眼睛，可以看到密码，本质是把表单类型转换为文本框
②正常的有属性有取值的，跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

  表单.value = '用户名'
  表单.type = 'password'

案例：

<input type="text" value="电脑">
 <script>
     //1.获取元素
     const uname = document.querySelector('input')

     //2.获取值
     console.log(uname.value)//电脑
     console.log(uname.innerHTML);//innerHTML得不到表单的内容

     //3.设置表单的值
     uname.value = '我要买电脑'
     console.log(uname.type)//text
     uname.type = 'password'
 </script>

③表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true,代表添加了该属性。如果是false代表移除了该属性
比如：disabled checked selected
4.自定义属性
（1）标准属性：标签天生自带的属性。比如class id title等，可以直接使用点语法操作比如：disabled、checked、selectes
（2）自定义属性：
在html5中推出了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<div class="box" data-id="10">盒子</div>
 <script>
     const box = document.querySelector('.box')
     console.log(box.dataset.id)
 </script>

五.定时器-间歇函数

1.定时器在开发中的使用场景：
（1）在网页中经常会需要一种功能：每个一段实际需要执行一段代码，不需要我们手动去触发
（2）例如：网页中的倒计时
（3）要实现这种需求，需要定时器函数
（4）定时器函数有两种：现在先介绍间歇函数

2.定时器-间歇函数
作用：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
（1）开启定时器

  setInterval(函数，间隔时间)

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

//1
setInterval(function(){
    console.log('一秒执行一次')
},1000)

//2
function fn(){
    console.log('一秒执行一次')
}
//setInterval(函数名，间隔时间)  函数名不要加小括号
setInterval(fn,1000)

（2）关闭定时器

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

function fn(){
     console.log('一秒执行一次')
 }
 //setInterval(函数名，间隔时间)  函数名不要加小括号
 let n = setInterval(fn,1000)
 //关闭定时器
 clearInterval(n)
 //再次开启定时器
 n = setInterval(fn,1000)