JS-Web-Api面试题

这篇主要是说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结构操作

• 新增节点

var p = document.createElement('p')
p.innerHTML = 'new P';
var div1 = document.getElementById('div1');
div1.appendChild(p);

• 移动节点

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);

• 获取父元素，获取子元素

var div1 = document.getElementById('div1');
console.log(div1.parentNode);
console.log(div1.childNodes);

• 删除节点

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去查看对象有哪些属性
如下图：

location.png

3. history

• history.back()

4. screen

• screen.width（屏幕宽度）
• screen.height（屏幕高度）

三、事件

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

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，不依赖其他库

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    if(xhr.status === 200) {
      alert(xhr.responseText);
    }
  }
}
xhr.send(null)

2. 跨域的几种实现方式

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

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
• cookie可以用于客户端和服务端交互