0
0

js-webApi笔记1

前言

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

  1.     <div>第一个div</div>
  2.     <div class="box">我是一个盒子</div>
  3.     <ul>
  4.         <li>第一个li</li>
  5.         <li>第2个li</li>
  6.         <li>第3个li</li>
  7.         <li>第4个li</li>
  8.     </ul>
  9.     <p>我是P</p>
  11.      const div=document.querySelector('div')
  12.       console.log(typeof div)//object
  13.           console.dir(div)//展开
  14.             const box=document.querySelector('.box')
  15.            console.log(box)
  16.          const firstLi=document.querySelector('ul li')
  17.            console.log(firstLi)

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

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

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

  1.   // lis.push(100)//报错
  1.  获取具体的元素，用document.querySelectorAll( 'css选择器' ） 获取的元素，即使只有一个，也必须按数组下标的方式来获取具体的元素
  1.  //获取具体的元素
  2.             console.log(lis[0])
  3.             console.log(lis[2])
  5.             const p=document.querySelectorAll('p')
  6.             console.log(p)
  7.             console.log(p[0])

2、其他查找元素方法

  1. 1.根据id值查找
  2.  document.getElementById( 'id的值' )
  4. 2.根据标签名查找
  5.  document. getElementsByTagName( )
  7. 3.根据class查找
  8.  document.getElementsByClassName( )
  10. 4.根据name查找
  11.  document.getElementsByName( )
  1.  <body>
  2.     <div class="box">这是第一个div</div>
  3.     <ol>
  4.       <li>111</li>
  5.     </ol>
  6.     <ul>
  7.       <li>北京</li>
  8.       <li id="sh">上海</li>
  9.       <li>广州</li>
  10.     </ul>
  11.     <div class="box">这是第二个div</div>
  12.     <p class="box">lalala</p>
  13.     <input type="text" name="username" />
  14.     <input type="text" name="password" />
  15.     <script>
  16.       // 1 document.getElementById('id的值')
  17.       const ele = document.getElementById('sh')
  18.       console.log(ele)
  19.       // 2 根据标签名查找 document.getElementsByTagName()
  20.       // 获取所有li
  21.       const list = document.getElementsByTagName('li')
  22.       console.log(list) // HTML元素集合
  23.       for (let i = 0; i < list.length; i++) {
  24.         console.log(list[i])
  25.       }
  26.       //  3 根据class查找
  27.       const list2 = document.getElementsByClassName('box')
  28.       console.log(list2)
  29.       //  4  根据name查找
  30.       const list3 = document.getElementsByName('username')
  31.       console.log(list3[0])
  32.     </script>
  33.   </body>

3、操作元素

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

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

其中：

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

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

  1. <body>
  2.     <div>学好js,高薪在望</div>
  3.     <ul>
  4.       <li>HTML5</li>
  5.       <li>CSS3</li>
  6.       <li>JS</li>
  7.     </ul>
  9.     <script>
  10.       // 1  获取元素
  11.       const oDiv = document.querySelector('div')
  12.       // 2 通过元素.innerText  获取文本内容
  13.       console.dir(oDiv.innerText)
  14.       // 3  修改文本内容
  15.       //oDiv.innerText = '学好js,月薪过万'
  16.       //  4 删除
  17.       //oDiv.innerText = ''
  18.       //oDiv.innerText += '!!!'
  20.       // 元素.innerHTML
  21.       const ul = document.querySelector('ul')
  22.       console.log(ul.innerText) // 支持文本
  23.       console.log(ul.innerHTML) // 支持标签
  24.       oDiv.innerHTML = `<p>${oDiv.innerText}</p>`
  25.     </script>
  26.   </body>

4、操作元素属性

操作元素属性:

修改/设置元素属性

  1.    <img src="./1.webp22" alt="我是一张图片 " width="400" height="300" />
  2.     <script src="./tool.js"></script>
  3.     <script>
  4.       // 1 获取元素
  5.       const oImg = document.querySelector('img')
  6.       console.dir(oImg)
  7.       // 2 改图片src width  height
  8.       //  oImg.src = './2.webp'
  9.       // oImg.width = 300
  10.       // oImg.height = 200
  12.       // const arr = ['./1.webp', './2.webp', './3.webp']
  13.       // const index = getRndNum(0, arr.length - 1)
  14.       // oImg.src = arr[index]
  15.     </script>

5、 操作元素样式 style

通过style操作样式:

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

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

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

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

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

  1.    <style>
  2.         .box{
  3.             width: 300px;
  4.             height: 300px;
  5.             background-color: darkcyan;
  6.         }
  7.         .active{
  8.             width: 500px;
  9.             height: 500px;
  10.             background-color: lightskyblue;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <div class="demo box">box</div>
  17.     <script>
  18.         //获取元素
  19.         const box = document.querySelector('div')
  20.         //设置行内样式
  21.         // box.style.width='300px'
  22.         // box.style.height='300px'
  23.         // box.style.backgroundColor='pink'
  25.         //设置类样式
  26.         // box.className='box'//添加会覆盖原有的类
  27.         box.className +=' box2'//拼接类，前加一个空格，保留原有的类
  29.         //通过classList操作类
  31.         // box.classList.add('box')//在原有的基础上加一个box类
  32.         // box.classList.remove('demo')  //删除demo类
  33.         // box.classList.toggle('active')  //切换
  34.     </script>

6、操作自定义属性

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

获取元素

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

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

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

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

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

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

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

添加一个属性data-info

  1.   box.dataset.info = 123

7、 操作表单元素属性

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

获取文本框

  1.  const txt = document.querySelector('input[name="username"]')
  2.       console.log(txt.value)
  3.       // txt.value = '456' // 修改
  4.       txt.value = '' // 清空
  6.       txt.type = 'password'

禁用按钮

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

设置复选框状态

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

8、事件

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

  1. 事件三要素：1.事件源（谁身上发生了）
  2.                       2.事件名称（具体行为）
  3.                       3.事件处理逻辑(当事件行为发生后,导致什么结果)
  1.     js处理事件      事件源.事件名称·=·function() { }
  1. <button>按钮</button>
  2.     <script src="./tool.js"></script>
  3.     <img src="./1.webp" alt="我是一张图片 " width="400" height="300" />
  1.  1.获取事件源
  1.   const btn = document.querySelector('button')
  2.       const arr = ['./1.webp', './2.webp', './3.webp']
  3.       const oImg = document.querySelector('img')
  1.  2.绑定事件（注册事件）
  1.  // 2 绑定事件(注册事件)
  2.       btn.onclick = function () {
  3.         // alert('被点击了!!!')
  4.         // 随机产生一张图片
  5.         const index = getRndNum(0, arr.length - 1)
  6.         oImg.src = arr[index]
  7.       }

9、事件绑定

  1.   <button>唐伯虎</button>

1 获取事件源

  1.  const btn = document.querySelector('button')

2 绑定事件

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

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

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

  1.  元素.addEventListener( '事件名称'，事件处理程序)
  1.   btn.addEventListener('click', function () {
  2.         alert('秋香')
  3.       })
  5.       btn.addEventListener('click', function () {
  6.         alert('秋香123')
  7.       })

10、常用鼠标事件

  1.  click                鼠标单击
  2.  mouseenter     鼠标移入
  3.  mouseleave     鼠标离开
  4.  dblclick             鼠标双击
  1.   // DOM 0
  2.       // 1 获取事件源
  3.       const btn = document.querySelector('button')
  4.       // 2 绑定事件
  5.       // DOM 2级 可以对同一事件绑定多次，以后会依次执行
  6.       /*
  7.          元素.addEventListener('事件名称', 事件处理程序)
  8.       */
  9.       btn.addEventListener('click', function () {
  10.         alert('秋香')
  11.       })
  13.       // btn.addEventListener('mouseenter', function () {
  14.       //   alert('鼠标移入')
  15.       // })
  17.       // btn.addEventListener('mouseleave', function () {
  18.       //   alert('鼠标移出')
  19.       // })
  20.       
  21.       // 双击
  22.       // btn.addEventListener('dblclick', function () {
  23.       //   console.log('双击')
  24.       // })

11、定时器

  1. 定时器----间歇函数
  2.  有的 代码逻辑需要隔一段时间执行一次
  4. setInterval( function ( ) {.    .   .} ,1000)
  6. 开启定时器    setInterval( )
  7.  取消定时器    clearInterval(  )
  1.  // 定时器-间歇函数 // 有的代码逻辑需要隔一段时间执行一次
  2.       // setInterval(function() { ...},1000)
  4.       function repeat() {
  5.         console.log('每隔1s执行一次')
  6.       }
  7.       const timer = setInterval(repeat, 1000)
  8.       const timer2 = setInterval(repeat, 1000)
  10.       console.log(timer, timer2) // 数字
  12.       // 给按钮绑定事件
  13.       document.querySelector('button').addEventListener('click', function () {
  14.         // 取消定时器
  15.         clearInterval(timer)
  16.         clearInterval(timer2)
  17.       })

12、定时器案例

发送短信倒计时

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: skyblue;
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <input type="text"><button>发送</button>
  20.     <script>
  21.         var btn = document.querySelector('button')
  22.         var num = 3
  23.         btn.onclick = function () {
  24.             // 点击的时候让按钮禁用
  25.             btn.disabled = true
  26.             var timer = setInterval(function () {
  27.                 if (num == 0) {
  28.                     // 时间等于0时,清除定时器
  29.                     clearInterval(timer)
  30.                     btn.innerHTML = '发送'
  31.                     btn.disabled = false
  32.                     num = 3
  33.                 } else {
  34.                     btn.innerHTML = num + '秒'
  35.                     num--
  36.                 }
  38.             }, 1000)
  39.         }
  40.     </script>
  41. </body>
  43. </html>

5秒关闭广告

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: gold;
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <div></div>
  20.     <script>
  22.         //   5秒关闭广告（进入页面后展示倒计时从5秒 4秒 3秒 2秒 1秒 然后自动关闭)
  23.         var div = document.querySelector('div')
  24.         var num = 4
  25.         div.innerHTML = '还剩5秒'
  26.         var timer = setInterval(function () {
  28.             if (num == 0) {
  29.                 div.style.display = 'none'
  30.                 clearInterval(timer)
  31.             } else {
  32.                 div.innerHTML = '还剩' + num + '秒'
  33.                 num--
  34.             }
  36.         }, 1000)
  37.     </script>
  38. </body>
  40. </html>

标签： javascript 开发语言 ecmascript
本文转载自: https://blog.csdn.net/m0_56713342/article/details/134349284
版权归原作者 诗霖雪 所有， 如有侵权，请联系我们删除。
登录后发布评论

“js-webApi笔记1”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。