JS-进阶-CSDN博客

本文链接：https://blog.csdn.net/2401_83593387/article/details/137726232

变量声明

优先const,原因：语义化更好；变量不再改变，需要初始化

对引用变量，const声明的变量里面存的不是值而是地址。

Web APIs

作用：用JS操作HTML和浏览器

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

DOM

用来呈现以及与任意HTML或XML文档交互的API。开发网页内容特效和实现用户交互。

DOM树

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

DOM对象（重要）

浏览器根据HTML标签生成的JS对象

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

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

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

document对象：是DOM提供的一个对象；它提供的属性与方法都是用来访问和操作网页内容的；网页所有内容都在document里

获取DOM元素

CSS选择器方式

语法1：

选择匹配的第一个元素

<script>
    document.querySelector('css选择器')
</script>


<body>
  <div class="box"></div>
  <p id="nav">daohanglan</p>
  <ul>
    <li>ceshi</li>
    <li>eshi</li>
    <li>eshi</li>
  </ul>
<script>
 const box = document.querySelector('div')
 console.log(box)
 const nav = document.querySelector('id')
 console.log(nav)
 const li = document.querySelector('ul li:first-child')
 console.log(li)
</script>
</body>

返回值：

CSS选择器匹配的Nodelist 对象集合

参数：

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

语法2：

可选多个元素

<script>
  document.querySelectorAll('css选择器')
</script>

得到的是一个伪数组：

1.有长度有索引号的数组；2.但是没有 pop()push()等数组方法
想要得到里面的每一个对象，则需要遍历(for)的方式获得。
注意事项
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已。

<script>
 const lis = document.querySelectorAll('.nav li')
 for(let i=0;i<lis.length;i++)
    console.log(lis[i])
  const p=document.querySelectorAll('#nav')
  p[0].style.color='red'
</script>

ID方式

document.getElementById('id')

类名方式

多个类名间空格隔开，返回一个数组

 document.getElementsByClassName('class')

标签名方式

  document.getElementsByTagName('tag')

事件监听

事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法：

元素对象.addEventListener('事件类型',要执行的函数)

三要素：

例子


<body>
  <button>点击</button>
<script>
 const btn = document.querySelector('button')
 btn.addEventListener('click',function (){
  alert('你好')
 })
</script>
</body>

事件类型：

事件对象

一个对象，包含事件触发时的相关信息。可判断用户按下哪个键、鼠标点击哪个元素，从而做出相应反应。

获取方式：

在事件绑定的回调函数的第一个参数就是事件对象。一般命名为event、ev、e。

常用属性：

type，获取当前的事件类型

clientX/clientY，获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY，获取光标相对于当前DOM元素左上角的位置

key，用户按下的键盘键的值

<body>
<input type="text">
<script>
 const input = document.querySelector('input')
 input.addEventListener('keyup',function(event){
  console.log(event.key)
  console.log(event.type)
 })
</script>
</body>

事件流

指事件完整执行过程中的流动路径。分俩个阶段：捕获阶段和冒泡阶段

事件捕获：

从DOM的根元素开始去执行对应的事件（从外到里）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制）

是否捕获机制默认为false；使用时写true

<body>
<div class="fa">
  <div class="son"></div>
</div>
<script>
 const fa=document.querySelector('.fa')
 const son=document.querySelector('.son')
 document.addEventListener('click',function(){
  alert('爷爷')
 },true)
 fa.addEventListener('click',function(){
  alert('爸爸')
 },true)
son.addEventListener('click',function(){
  alert('儿子')
 },true)
</script>
</body>

事件冒泡

一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的

阻止冒泡

前提，拿到事件对象

语法：事件对象.stopPropagation()

此方法可以阻断事件流动传播，不光在冒泡有效，捕获阶段也有效

<body>
<div class="fa">
  <div class="son"></div>
</div>
<script>
 const fa=document.querySelector('.fa')
 const son=document.querySelector('.son')
 document.addEventListener('click',function(){
  alert('爷爷')
 })
 fa.addEventListener('click',function(){
  alert('爸爸')
 })
son.addEventListener('click',function(e){
  alert('儿子')
  e.stopPropagation()
 })
</script>
</body>

事件解绑

语法1：

<body>
<button>dianji</button>
<script>
const btn = document.querySelector('button')
//绑定事件
btn.onclick = function(){
  alert('dianji')
}
//解绑事件
btn.onclick=null
</script>
</body>

语法2：

<body>
<button>dianji</button>
<script>
  const btn = document.querySelector('button')
function fn(){
  alert('dj')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)
</script>
</body>

注意：匿名函数无法被解绑

事件委托

利用事件流的特征解决一些开发需求

优点：

减少注册次数，提高程序性能

原理：

事件冒泡的特点。给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件。

<body>
<ul>
  <li>5</li>
  <li>5</li>
  <li>5</li>
  <li>5</li>
  <li>5</li>
</ul>
<script>
 const ul = document.querySelector('ul')
 ul.addEventListener('click',function(e){
  console.log(e.target)
  if(e.target.tagName='LI'){
    e.target.style.color='red'
  }
 })
</script>
</body>