JS 基础到 JS Web API 知识！

没故事的燕同学
931 阅读2分钟

之前我们讲的都是JS的语法的基础知识,今天我们讲 Web API 1. JS基础知识，规定语法（ECMA262标准）

2. JS Web API，网页操作的API（W3C标准）

目录

  1. DOM
  2. BOM
  3. 事件绑定
  4. AJAX
  5. 存储

一、 DOM 操作(Document Object ModeI)

前言：现在都是 Vue React 框架封装了DOM操作，但是DOM操作一直是前端工程师的必备知识，只会框架的程序员不会长久~~~

1. 题目

  • DOM是哪种数据结构
  • DOM操作的常用API
  • attr和property的区别
  • 一次性插入多个DOM节点，考虑性能

2. 知识点

  • DOM 本质
  • DOM 节点操作
  • DOM 结构操作
  • DOM性能

<1> DOM 本质： 是一颗树（xml 或者 html 解译为的一棵树），xml 可以自定义，html 是只能用规定标签的树

<2> DOM 节点操作

获取节点的方式：
document.getElementById('div1')
document.getElementByTagName('div') //所以div 的集合
document.getElementByClassName('xxx') //所以类名为xxx 的集合
document.querySelectorAll('p') //所有P标签的集合
获取到节点之后，可以改变这个节点的属性

property 形式改，修改的是JS变量，不会对真实的标签产生影响 image.png

attribute 形式改 **属性, 特性 修改的是标签的内容，直接作用的标签上的 image.pngimage.png

property 是通过获取JS某个节点的所以属性并修改来改变的，但是arrtibute 是直接去改变这个节点的值(推荐使用property 方式，因为JS的一些机制会减少重复节点的渲染 ，但是attribute 只要一变，肯定变化！！)

image.png

<3> DOM 结构操作(增删改查)

<4> DOM 性能

  • DOM操作非常昂贵，避免频繁的DOM操作
  • 对DOM查询做缓存
  • 多个操作合成一次性操作 例如下方的例子： image.png

二、BOM 翻译为浏览器对象模型（虽然很少，但是你不能不会）

<1> 如何识别浏览器的类型

navigator srceen location history

<2> 分析拆解 url 的各个部分

image.png

<3> navigator 和 screen 各个浏览器的UA检测方案

image.pngimage.png

<4> location 和 history 通过location 的各种API 获取 URL的各个部分

image.pngimage.png

三、 事件绑定

常考题目

image.png

知识点

image.png
image.pngimage.png
image.png

image.png
先判断模式，是普通事件绑定还是代理绑定
Element.matches（）
如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。
事件代理是基于 事件冒泡产生的

四、 AJAX

image.png

<1> XMLHttpRequest

image.png
false 代表这个请求是需要异步的 ，xhr.status 就是HTTP的状态码

image.png

<2> 状态码

<3> 跨域

image.png

<4> 常考题目

手写一个简易的AJAX
image.png

<5> 几个ajax 的工具

jQuery 的 ajax ;Fetch API；axios

五、 存储（需要知道）

<1> 题目

image.png

image.png

cookie 只能存4kb ,而且会发给客户端

avatar
文章
阅读
粉丝