Web API重要知识点总结

查：元素的方法

你会在什么时候使用document.querySelector('选择器')

• 需求决定： 只需要获取一个元素

你会在什么时候使用document.querySelectorAll('选择器') 

• 需求决定： 需要获取多个元素

• querySelector : 获取null|dom对象， 可以直接使用dom语法
• querySelectorAll : 获取伪数组，不可以直接用dom语法

• 注意事项 ：
  • 伪数组一定要通过下标取出dom对象，才可以使用dom语法

• 你有没有注意到，querySelector的参数是一个选择器字符串,id选择器和id名，类选择器与类名的区别 例如有一个盒子

<div class="box"></div>

• 类名是： box

• 类选择器是： .box

• 其实，querySelector查元素是通过选择器来查询的（相当于一个通过身份证来找到一个人），dom中还有一种方式是通过节点关系来查询元素的。（相当于我想找你爸爸，我先找到你就知道你爸爸是谁了），

  • 获取一个元素所有的子元素： 元素.children
  • 获取一个元素的父元素： 元素.parentNode
  • 获取一个元素的上一个元素(哥哥): 元素.previousElementSibling
  • 获取一个元素的下一个元素(弟弟):元素.nextElementSibling

 查：查属性

• 你能说出元素属性和元素样式属性的区别？（从概念和语法这两个角度，也可以举例加深印象）

  • 概念：

    • 元素属性： html标签自身的属性。 例如 src、href、title、alt
    • 样式属性： css属性

  • 语法：

    • 元素属性： 元素.属性名
    • 样式属性： 元素.style.属性名

• innerText和innerHTML的区别

  • innerText : 获取文本
  • innerHTML : 获取文本+标签

• 在dom语法中，表单元素有一些属性与普通元素不一样，叫做表单元素独有属性

  • value : 获取表单的值
  • disabled : 是否禁用
  • checked、selected：是否选中

改：属性

• 当我想要修改一个样式的时候使用：

  • 元素.style.样式名 = 样式值
  • 注意： 权重是行内权重

• 当我想要修改多个样式的时候使用：

  • 元素.classList.add()/remove()/toggle()/contains()

    • 注意：权重是类名权重
• 操作自定义行内属性
  • 元素.getAttribute(); 获取行内属性
  • 元素.setAttribute(); 设置行内属性
  • 元素.removeAttribute(); 删除行内属性

学过的事件

 

鼠标事件

mouseenter  鼠标经过

mouseleave  鼠标离开 

焦点事件

focus 获取焦点

blur  失去焦点

键盘事件

keydown   键盘按下

keyup   键盘抬起

文本事件

input   用户输入事件

阻止a标签跳转

• 给a加点击事件，return false
• 把a标签的href改为： javascript:void(0)
• 给a加点击事件，点击事件里阻止事件默认行为： e.preventDefault()

计时器

• setInterval：开启一个计时器，每隔一段时间触发一次。除非自己写代码停止，否则一直调用
• clearInterval：停止计时器
• setTimeout：开启一个计时器，这个计时器只执行一次，相当于延迟执行某段代码

this 

 this就是一个关键字，是一个变量，它的值存的是一个对象
    那么，这个对象又等于什么？
     1.全局环境里面，this指向window  （指向===>理解为等于）
    2.函数内部，this这个对象的值取决于函数被调用的方式

一句话就是，谁调用，this就指向谁

事件流 

过程: 事件捕获 => 事件目标阶段 => 事件冒泡  整个完整的过程就是事件流 

 事件冒泡：默认就存在，指的是某个元素的事件被触发后，会依次调用所有父级元素的同名事件
事件捕获：跟冒泡相反，默认不存在，要用addEventListener 添加的事件，并且第三个参数写true才能看到
阻止冒泡： e.preventDefault();
e.target： 获取到事件源（真正触发事件的元素）
 

事件委托

原理：利用事件冒泡.将事件监听绑定在父级元素上,通过父级元素来监听元素事件 

 触发的目标元素 e.target.tagName = 'LI'

优点： 减少事件注册的次数,提高程序性能

日期对象

date.getFullYear()  年 

date.getMonth() + 1  月 

date.getDate()  日 

date.getDay()  星期几 

date.getHours()  小时 

date.getMinutes()  分

date.getSeconds()   秒 

时间戳

1.date.getTime()    //1662345649579

2.+new Date()  可以指定某个具体的时间  （重点记忆）

3.Date.now() 

节点操作

节点-查

 父级: parentNode

子集: children           伪数组  遍历

兄弟

nextElementSibling    后一个兄弟元素节点

previousElementSibling   前一个兄弟元素节点

节点-增

创建新节点

document.createElement(标签名称)

追加节点

parent.appendChild(child)  注意:是在父元素的最后追加

parent.insertBofore(child, refChild)

节点-删

parent.removeChild(child)

克隆节点

node.cloneNode()       false：括号为空，或者里面写false,只复制标签，不复制内容
                                    true:复制标签和标签里面的内容

页面滚动

事件循环 

 线程和进程

进程（process） : 一个进程就是一个正在运行的程序（打开任务管理器）

线程（thread）  : 一个进程内执行着的每一个任务 （录屏程序： 录声音，录画面）
                           线程是允许应用程序并发执行多个任务的一种机制。

          同步任务： 同步任务都在主线程上执行, 形成一个执行栈. 同步任务是依次执行的.

          异步任务：
                        JS的异步任务一般是通过回调函数来实现的, 在做某个任务的同时还可以处理其他任务

 同步异步

 常见的三种类型:
         1. 事件: click, resize 监听 回调函数
        2. 定时器: setTimeout / setInterval  回调
        3. 资源加载: load DOMContentLoaded 回调

     面试题  1. 首先判断JS任务是同步任务, 还是异步任务.  同步任务会在主线程的执行栈中依次执行.
         2. 异步任务会提交给异步进程处理, 比如setTimeout/ click事件等.
           满足触发条件后, 异步进程会将异步任务(回调函数)放到任务队列里面去
         3. 当主线程执行完所有的(所有的,所有的) 同步任务后, 会去任务队列中查看是否有可以执行的异步任务.
          如果有,  就拿到主线程中执行. 执行完之后再去任务队列里面查找, 依次循环.

location对象

location.href  记录了URL的完整地址. 可读写 , 所以还可以设置==>可以跳转

location.reload()刷新

locaction.search  ?后面的内容

locaction.hash   #后面的内容

navigator对象

主要用来获取浏览器的信息

navigator.userAgent

histroy对象

history.forward(） 前进一步

history.back()  后退一步

history.go()     history. go(-1)  1前进，-1后退

本地存储

 存：localStorage.setItem('键', '值')

取：localStorage.getItem('键')

删：localStorage.removeItem('键')

注意： 本地存储只能存储字符串

         面试题:

        localStorage本地存储 和sessionStorage会话存储 的区别?

         1.生命周期  2.数据共享

         localStorage

         1.生命周期：用久上生效（数据一直存在），除非手动删除，否则页面关闭有也会出存在

       2.数据共享：可以多窗口（页面）共享，同一浏览器，同一个域名（地址下）

        sessionStorage

        1. 生命周期 ： 关闭浏览器窗口， 数据清除

         2. 数据共享性： 在同一个窗口（页面）下数据可以共享 (前提：同一个域名下)

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

JSON.stringify(复杂数据类型)   将复杂数据转换成JSON字符串

JSON.parse(JSON字符串)       将JSON字符串转换成对象

面试题:
         localStorage本地存储 和sessionStorage 
          会话存储 的区别?
        1.生命周期  2.数据共享

loop  面试题

宏任务:
         1. 整个script代码块
         2. setTimeout
          3. setInterval
          4. setImmediate

微任务:
         1. promise的回调 ==> promise.then()  promise.catch()
        2. async await
         3. mutationObserver  (vue源码)
         4. process.nextTick  (node)

         每执行完一个宏任务, 就会清空当前的所有微任务队列.