打卡学习-JavaScript面试题(六)

MINT
146 阅读5分钟

菜鸟打卡

1.列举 DOM 元素增删改查的 API

创建 DOM:

  • document.createElement();
  • document.createDocumentFragment();

查 找 DOM:

  • document.getElementById();
  • document.getElementsByClassName();
  • document.getElementsByName();
  • document.querySelectorAll();
  • document.querySelector(); ...

追加 DOM:

  • parentDom.appendChild();
  • ...

移除 DOM:

  • parentDom.removeChild()

2.BOM 中有哪些常用的对象?

location:

  • location.href; 页面 url 地址
  • location.hash; url 中#后的部分
  • location.search; url 中?后的部分(查询字符串)
  • location.reload(); 刷新页面;

navigator:

  • navigator.userAgent: 浏览器的 userAgent 信息

history:

  • history.go(1);前进 1 步
  • history.go(-1);后退 1 步;
  • history.forward();前进
  • history.back(); 后退

screen:

  • screen.availWidth: 屏幕有效宽度
  • screen.availHeight: 屏幕有效高度

3.列举几个常见的浏览器兼容问题?

主流浏览器发送 ajax 使用 XMLHttpRequest 创建异步对象

IE 浏览器时候用 XActive 创建异步对象

主流浏览器注册事件

addEventListener("eventType","handler","true|false"); 
removeEventListner("eventType","handler","true|false");

IE 浏览器:

注册事件:attachEvent( "eventType"，"handler") 
移除事件:detachEvent("eventType"，"handler" )

阻止事件冒泡:

主流浏览器:event.stopPropagation()
IE 浏览器:event.cancleBubble=true

获取事件源:

主流浏览器: event.target
IE 浏览器:event.srcElement

4.什么是事件委托?事件委托的原理是什么?

事件委托：本应该注册给子元素的事件, 注册给父元素

委托原理： 事件冒泡, 因为有事件冒泡的存在, 所以子元素的事件会向外冒泡, 触发父元素的相同事件, 根据事件对象可以找到真正触发事件的事件源.

5.H5 都新增了那些新特性?

  • 语义化的标签(header,nav,footer,aside,article,section)

  • 本地存储 sessionStorage,localStorage;

  • 拖拽释放(Drag and drop) API 音频、视频 API(audio,video)

  • 画布(Canvas) API

  • 地理(Geolocation) API

  • 表单控件，calendar、date、time、email、url、search

  • 新的技术 websocket

6.sessionStorage,localStorage 和 cookie 三者有什么区别?

共同点:它们三者都是浏览器端的存储介质, 可以存储一些数据.

不同点:

sessionStorage 是将数据存储在页面的内存中, 所以数据会跟随页面的关闭而销毁, 存储数据相对较少(5M 左右), 只能存储字符串;

localStorage 是将数据存储在电脑的磁盘上, 存储数据量大(20M 左右), 需要手动删除, 只能存储字符串;

cookie 是http 协议的重要组成部分, 存储数据量相对比较少(4K 左右), 存储cookie 的时候可以设置过期时间, 到达过期时间后, 会自动销毁, 如果没有设置, 则跟随浏览器的关闭而销毁. cookie 中存储的数据会伴随每一次http 请求被发送到服务端, 所以不建议在cookie 中存储大量数据.

7.常见 HTTP 状态码都有哪些？

  • 100 => 正在初始化（一般是看不到的）
  • 101 => 正在切换协议（websocket 浏览器提供的）
  • 200 或者以 2 开头的两位数 => 都是代表响应主体的内容已经成功返回了
  • 202 => 表示接受
  • 301 => 永久重定向/永久转移
  • 302 => 临时重定向/临时转移（一般用来做服务器负载均衡）
  • 304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验
  • 400 => 参数出现错误（客户端传递给服务器端的参数出现错误）
  • 401 => 未认证，没有登录网站
  • 403 => 禁止访问，没有权限
  • 404 => 客户端访问的地址不存在
  • 500 => 未知的服务器错误
  • 503 => 服务器超负荷（假设一台服务器只能承受 10000 人，当第10001 人访问的时候，如果服务器没有做负载均衡，那么这个人的网络状态码就是 503）

8.你知道的 HTTP 请求方式有几种？

  1. GET 请求指定的页面信息，并返回实体主体。
  2. HEAD 类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头
  3. POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
  4. PUT 从客户端向服务器传送的数据取代指定的文档的内容。
  5. DELETE 请求服务器删除指定的页面。
  6. CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
  7. OPTIONS 允许客户端查看服务器的性能。
  8. ....

9.请尽可能详尽的解释 ajax 的工作原理

第一步:创建一部对象 var xhr=new XMLHttpRequest()

第二步:设置请求行 xhr.open(‘请求方式’,请求地址);

第三步:发送请求 Get 方式 xhr.send(null),

如果是 post 请求还要设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded ');
xhr.send("name=zs&age=18");
//第四步:监听服务端的响应
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
// 获取 json
var json=xhr.responseText&&JSON.parse(xhr.responseText)
// 获取 xml
var xml=xhr.responseXML; 
  console.log(json,xml)
 }
}

10. jsonp 跨域的原理是什么?

动态在页面中创建一个 script 标签, 使其 src 属性指向后端数据接口, 后 端 数 据 接 口 必 须 返 回 一 个 js 函 数 的 调 用 字 符 串 ( 如cb('{"name":"zs","age":18}')), 将要返回给前端的 json 数据作为函数的实参, 当 script 标签加载完毕后会在浏览器中执行后端返回的函数调用,所以前端必须事先对调用的函数进行声明. 因为函数是在 js 中声明的, 所以可以在函数内部拿到服务端调用的时候传入的实参, 所以就间接实现了跨域请求数据.

avatar
文章
阅读
粉丝