JS 中常用的 Web

这篇主要是说 JS 的一些 api ,其中包括 DOM,BOM,事件,ajax,存储,都是实际开发会用到的,但是这些都是 JS 的哦,很少涉及 jquery,vue 框架等。

一、DOM 操作

知识点

1.事件模型

  • 捕获
  • 冒泡

2.事件流

  • 捕获用户行为 -> 目标阶段 -> 冒泡
  • 捕获的具体流程: window -> document -> html -> body -> 元素之间的传递
    冒泡是从下往上

3.Event 对象的常见用法

  • 阻止冒泡:event.stopPropagation()
  • 阻止默认行为:event.preventDefault()
  • 同一个元素绑定多个事件,点击哪个执行哪个:event.stopImmediatePropagation()
  • 绑定当前事件的元素:event.currentTarget(事件代理时候会用)
  • 当前被点击的元素:event.target(事件代理时候会用)

4.DOM 结构操作

  • 新增节点
1
2
3
4
var p = document.createElement('p');
p.innerHTML = 'new P';
var div1 = document.getElementById('div1');
div1.appendChild(p);
  • 移动节点
1
2
3
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
  • 获取父元素,获取子元素
1
2
3
var div1 = document.getElementById('div1');
console.log(div1.parentNode);
console.log(div1.childNodes);
  • 删除节点
1
2
var div1 = document.getElementById('div1');
div1.removeChild(div1.childNodes[1]);

问题

1.DOM 是哪种基本的数据结构

树型结构

2.DOM 操作常用的 api 有哪些

  • 获取及修改 attribute、property
  • 上面说的 DOM 结构操作
    • 添加节点
    • 移动节点
    • 删除节点
    • 获取子节点
    • 获取父节点

3.DOM 中 attr 和 property 有何区别

attribute 是对 html 标签属性的修改 property 是对一个 JS 对象的属性的修改

二、BOM 操作

1.检测浏览器类型

navigator.userAgent

2.url 不同部分的拆解

通过location去查看对象有哪些属性 如图:

3.history

  • history.back()

4.screen

  • screen.width(屏幕宽度)
  • screen.height(屏幕高度)

三、事件

1.编写一个通用的事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function bindEvent(ele, type, selector, fn) {
  // 没有事件代理时,将第三个参数赋值给fn
  if (fn == null) {
    fn = selector;
    selector = null;
  }
  ele.addEventListener(type, function(e) {
    var target = e.target;
    if (selector) {
      // 使用事件代理
      if (target.matches(selector)) {
        fn.call(target, e);
      }
    } else {
      // 不使用事件代理
      fn(e);
    }
  });
}

2.事件冒泡

  • DOM 树型结构
  • 事件逐层冒泡
  • 阻止事件冒泡
  • 因为有事件冒泡,所以有事件代理

3.对于一个有无限下拉的图片的操作,怎么给每个图片绑定事件

  • 使用事件代理
  • 什么是事件代理
    就是给父元素绑定事件,子元素和父元素都会有这个事件
  • 使用代理的好处:
    • 代码简洁
    • 减少浏览器内存消耗

四、ajax 及 http

知识点

1.readyState

  • 0 -(未初始化)还没有调用 send 方法
  • 1 -(载入)已经调用 send 方法,正在发送
  • 2 - (载入完成)已经发送完成,send 执行完成,已经接受到全部相应内容
  • 3 - (交互)正在解析响应内容
  • 4 - (完成)解析响应内容完成,客户端可以调用了

2.status

  • 1xx - 请求已接收,继续处理
  • 2xx - 表示处理成功,如 200
    • 200:客户端请求成功
    • 206:客户端发送了一个带有 Range 的 GET 请求头,服务器完成了他(video,audio)
  • 3xx - 需要重定向,浏览器直接跳转
    • 301:已经转移到新的 url
    • 302:临时转移到了新的 url
    • 304:缓存
  • 4xx - 客户端请求错误,如 404
    • 400:客户端有语法错误
    • 401:请求未授权(参数和方式可能错误)
    • 403:资源禁止被访问
    • 404:资源不存在
  • 5xx - 服务端错误
    • 500:服务器错误
    • 503:服务器宕机或者过载

3.跨域

  • 什么是跨域
    浏览器会有同源策略,域名,协议,端口只要有一个不同就是跨域 - 协议:http,https - 端口:http 协议默认是 80,https 默认是 443

  • 可以跨域的三个标签

    • img:(如果图片不做防盗链,是可以在其他的域名下访问),可以用作打点统计,统计的网站是其他域
    • link:因为不受跨域限制,所以可以使用 CDN 链接
    • script:可以使用 CDN 链接,可以使用 JSONP

4.http 的特点

  • 简单快速
  • 灵活
  • 无连接
  • 无状态

问题

1.手动编写一个 ajax,不依赖其他库,写主要功能即可

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/index', false);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
      alert(xhr.responseText);
    }
  }
};
xhr.send(null);

2.跨域的几种实现方式

  • JSONP
  • 服务端设置头信息 CORS
  • postMseeage
  • WebSocket

3.POST 和 GET 的区别

  • GET 请求浏览器回退是无害的,但是 POST 会重新发送请求
  • GET 产生的地址会被收藏,但是 POST 不会
  • GET 会被浏览器主动缓存,而 POST 的不会,需要手动设置
  • GET 请求只能进行 url 编码,而 POST 支持多种编码方式
  • GET 请求的参数会被完整保留到历史记录里,POST 参数不会保存
  • GET 请求在 url 中传送的参数有长度限制,POST 没有
  • 对参数的数据类型,GET 只接受 ASCII 字符,POST 没有限制
  • GET 参数会暴露在 url 中,不要放敏感信息
  • GET 参数通过 url 传递,POST 通过 request body 中

五、存储

描述一下 cookie,localStorage,sessionStorage 的区别

  • 容量:cookie 是 4KB,storage 是 5M
  • API 不同:cookie 需要自己封装,但是 storage 不需要,有现成的 api