js-webApi笔记1

前言

Web API的概念

什么是DOM

DOM树

1、查找元素

2、其他查找元素方法

3、操作元素

4、操作元素属性

5、操作元素样式 style

6、操作自定义属性

7、操作表单元素属性

8、事件

9、事件绑定

10、常用鼠标事件

11、定时器

12、定时器案例

前言

Web API的概念

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

什么是DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

DOM树

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

1、查找元素

document.querySelector( 'css选择器' )
document.querySelectorAll( 'css选择器' )

document.querySelector( 'css选择器' )
返回满足条件的第一个元素（dom元素对象），找不到返回null

    <div>第一个div</div>
    <div class="box">我是一个盒子</div>
    <ul>
        <li>第一个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
    </ul>
    <p>我是P</p>

	 const div=document.querySelector('div')
 	 console.log(typeof div)//object
    	  console.dir(div)//展开
       	 const box=document.querySelector('.box')
      	 console.log(box)
     	const firstLi=document.querySelector('ul li')
       	console.log(firstLi)

document.querySelectorAll( 'css选择器' )
   返回满足条件的所有元素
   返回的结果是一个伪数组（有length，有序号），但是不能调用数组的方法，如push，pop...
   对象{0:第一个div对象,1:第二个div,length: 2}

   <ul>
       		 <li>第一个li</li>
        		<li>第2个li</li>
        		<li>第3个li</li>
       		 <li>第4个li</li>
   	 </ul>
       	 const lis=document.querySelectorAll('li')
       	 console.log(lis)

不能调用数组的方法，会报错

  // lis.push(100)//报错

获取具体的元素，用document.querySelectorAll( 'css选择器' ）获取的元素，即使只有一个，也必须按数组下标的方式来获取具体的元素

 //获取具体的元素
       	 console.log(lis[0])
        	console.log(lis[2])

       	 const p=document.querySelectorAll('p')
       	 console.log(p)
       	 console.log(p[0])

2、其他查找元素方法

   1.根据id值查找
   document.getElementById( 'id的值' )

   2.根据标签名查找
   document. getElementsByTagName( )

   3.根据class查找
   document.getElementsByClassName( )

   4.根据name查找
   document.getElementsByName( )

 <body>
    <div class="box">这是第一个div</div>
    <ol>
      <li>111</li>
    </ol>
    <ul>
      <li>北京</li>
      <li id="sh">上海</li>
      <li>广州</li>
    </ul>
    <div class="box">这是第二个div</div>
    <p class="box">lalala</p>
    <input type="text" name="username" />
    <input type="text" name="password" />
    <script>
      // 1 document.getElementById('id的值')
      const ele = document.getElementById('sh')
      console.log(ele)
      // 2 根据标签名查找 document.getElementsByTagName()
      // 获取所有li
      const list = document.getElementsByTagName('li')
      console.log(list) // HTML元素集合
      for (let i = 0; i < list.length; i++) {
        console.log(list[i])
      }
      //  3 根据class查找
      const list2 = document.getElementsByClassName('box')
      console.log(list2)
      //  4  根据name查找
      const list3 = document.getElementsByName('username')
      console.log(list3[0])
    </script>
  </body>

3、操作元素

操作元素，首先要获取元素，然后用元素名.innerText 或元素名.innerHTML去操作元素的内容

可以进行的操作有修改文本内容，删除文本内容

其中：

innerText 可以获取元素内容，可以改变元素内容，无法识别标签，无法识别换行

innerHTML 可以获取元素内容，可以改变元素内容，可以识别标签，可以识别换行

<body>
    <div>学好js,高薪在望</div>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JS</li>
    </ul>

    <script>
      // 1  获取元素
      const oDiv = document.querySelector('div')
      // 2 通过元素.innerText  获取文本内容
      console.dir(oDiv.innerText)
      // 3  修改文本内容
      //oDiv.innerText = '学好js,月薪过万'
      //  4 删除
      //oDiv.innerText = ''
      //oDiv.innerText += '!!!'

      // 元素.innerHTML
      const ul = document.querySelector('ul')
      console.log(ul.innerText) // 支持文本
      console.log(ul.innerHTML) // 支持标签
      oDiv.innerHTML = `<p>${oDiv.innerText}</p>`
    </script>
  </body>

4、操作元素属性

操作元素属性:

修改/设置元素属性

   <img src="./1.webp22" alt="我是一张图片 " width="400" height="300" />
    <script src="./tool.js"></script>
    <script>
      // 1 获取元素
      const oImg = document.querySelector('img')
      console.dir(oImg)
      // 2 改图片src width  height
      //  oImg.src = './2.webp'
      // oImg.width = 300
      // oImg.height = 200

      // const arr = ['./1.webp', './2.webp', './3.webp']
      // const index = getRndNum(0, arr.length - 1)
      // oImg.src = arr[index]
    </script>

5、操作元素样式 style

通过style操作样式:

使用style修改样式: 元素.style.样式属性=属性值

通过style修改的样式是添加在行内样式里面(不建议使用，因为权重比较高)

属性要写成驼峰命名（单词连接需要首字母大写）

通过className设置元素样式（其实就是给元素添加class类名）元素.className='类名'

如果元素本身有class类名时又不想丢失就需要在设置类名时把原本的类名也写上 div.className='boxs box'

   <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: darkcyan;
        }
        .active{
            width: 500px;
            height: 500px;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="demo box">box</div>
    <script>
        //获取元素
        const box = document.querySelector('div')
        //设置行内样式
        // box.style.width='300px'
        // box.style.height='300px'
        // box.style.backgroundColor='pink'

        //设置类样式
        // box.className='box'//添加会覆盖原有的类
        box.className +=' box2'//拼接类，前加一个空格，保留原有的类

        //通过classList操作类

        // box.classList.add('box')//在原有的基础上加一个box类
        // box.classList.remove('demo')  //删除demo类
        // box.classList.toggle('active')  //切换
    </script>

6、操作自定义属性

    <div id="box" class="box" a="1" data-num="10" data-msg="hello"></div>

获取元素

   //  1 获取元素
      const box = document.querySelector('.box')
      console.dir(box.className) //  原生属性 元素.原生属性名
      console.log(box.id)

元素.getAttribute('属性名') 获取元素属性名

   // 元素.getAttribute('属性名') 获取元素属性名
      console.dir(box.getAttribute('a'))
      console.dir(box.getAttribute('id'))

元素.setAttribute('属性名',值) 设置元素属性

     //  元素.setAttribute('属性名',值) 设置元素属性
      box.setAttribute('a', 10)

针对data-开头的自定义属性名

  // 针对data-开头的自定义属性名
      console.log(box.getAttribute('data-num'))
      box.setAttribute('data-num', 'abc')
      console.log(box.dataset.num) // {num: "10", msg: 'hello'}
      console.log(box.dataset.msg)

添加一个属性data-info

  box.dataset.info = 123

7、操作表单元素属性

   <input type="text" name="username" id="username" value="123" />
    <button>按钮</button>
    <input type="checkbox" />唱歌

获取文本框

 const txt = document.querySelector('input[name="username"]')
      console.log(txt.value)
      // txt.value = '456' // 修改
      txt.value = '' // 清空

      txt.type = 'password'

禁用按钮

 const btn = document.querySelector('button')
      btn.disabled = true // true 禁用

设置复选框状态

  const cbox = document.querySelector('input[type="checkbox"]')
      // cbox.checked = 'true' // 有隐式转换 字符串'true'->true 不推荐这么使用
      cbox.checked = true

8、事件

js dom事件单击
用户对dom元素（比如按钮，div,span...)进行某种操作行为(单击、双击、鼠标移入,...键盘按下)，页面会做出响应。

事件三要素：1.事件源（谁身上发生了）
2.事件名称（具体行为）
3.事件处理逻辑(当事件行为发生后,导致什么结果)

js处理事件事件源.事件名称·=·function() { }

<button>按钮</button>
    <script src="./tool.js"></script>
    <img src="./1.webp" alt="我是一张图片 " width="400" height="300" />

1.获取事件源

  const btn = document.querySelector('button')
      const arr = ['./1.webp', './2.webp', './3.webp']
      const oImg = document.querySelector('img')

2.绑定事件（注册事件）

 // 2 绑定事件(注册事件)
      btn.onclick = function () {
        // alert('被点击了!!!')
        // 随机产生一张图片
        const index = getRndNum(0, arr.length - 1)
        oImg.src = arr[index]
      }

9、事件绑定

  <button>唐伯虎</button>

1 获取事件源

 const btn = document.querySelector('button')

2 绑定事件

 btn.onclick = function () {
        alert('秋香')
      }

DOM 0 级事件绑定会覆盖之前同名事件

DOM 2 级可以对同一事件绑定多次，以后会依次执行

元素.addEventListener( '事件名称'，事件处理程序)

  btn.addEventListener('click', function () {
        alert('秋香')
      })


      btn.addEventListener('click', function () {
        alert('秋香123')
      })

10、常用鼠标事件

click 鼠标单击
   mouseenter 鼠标移入
   mouseleave 鼠标离开
   dblclick 鼠标双击

  // DOM 0
      // 1 获取事件源
      const btn = document.querySelector('button')
      // 2 绑定事件
      // DOM 2级 可以对同一事件绑定多次，以后会依次执行
      /*
         元素.addEventListener('事件名称', 事件处理程序)
      */
      btn.addEventListener('click', function () {
        alert('秋香')
      })

      // btn.addEventListener('mouseenter', function () {
      //   alert('鼠标移入')
      // })

      // btn.addEventListener('mouseleave', function () {
      //   alert('鼠标移出')
      // })
      
      // 双击
      // btn.addEventListener('dblclick', function () {
      //   console.log('双击')
      // })

11、定时器

定时器----间歇函数
   有的代码逻辑需要隔一段时间执行一次

   setInterval( function ( ) {. . .} ,1000)

   开启定时器 setInterval( )
   取消定时器 clearInterval( )

 // 定时器-间歇函数 // 有的代码逻辑需要隔一段时间执行一次
      // setInterval(function() { ...},1000)

      function repeat() {
        console.log('每隔1s执行一次')
      }
      const timer = setInterval(repeat, 1000)
      const timer2 = setInterval(repeat, 1000)

      console.log(timer, timer2) // 数字

      // 给按钮绑定事件
      document.querySelector('button').addEventListener('click', function () {
        // 取消定时器
        clearInterval(timer)
        clearInterval(timer2)
      })

12、定时器案例

发送短信倒计时

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <input type="text"><button>发送</button>
    <script>
        var btn = document.querySelector('button')
        var num = 3
        btn.onclick = function () {
            // 点击的时候让按钮禁用
            btn.disabled = true
            var timer = setInterval(function () {
                if (num == 0) {
                    // 时间等于0时,清除定时器
                    clearInterval(timer)
                    btn.innerHTML = '发送'
                    btn.disabled = false
                    num = 3
                } else {
                    btn.innerHTML = num + '秒'
                    num--
                }

            }, 1000)
        }
    </script>
</body>

</html>

5秒关闭广告

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>

<body>
    <div></div>
    <script>

        //   5秒关闭广告（进入页面后展示倒计时从5秒 4秒 3秒 2秒 1秒 然后自动关闭)
        var div = document.querySelector('div')
        var num = 4
        div.innerHTML = '还剩5秒'
        var timer = setInterval(function () {

            if (num == 0) {
                div.style.display = 'none'
                clearInterval(timer)
            } else {
                div.innerHTML = '还剩' + num + '秒'
                num--
            }

        }, 1000)
    </script>
</body>

</html>