javascript概念部分

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

  • e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性
  • e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用getAttribute进行访问
  • e.getAttribute()返回值是源文件中设置的值,类型是字符串或者null(有的实现返回"")
  • e.propName返回值可能是字符串、布尔值、对象、undefined等
  • 大部分attribute与property是一一对应关系,修改其中一个会影响另一个,如id,title等属性
  • 一些布尔属性的检测设置需要hasAttribute和removeAttribute来完成,或者设置对应property
  • link中href属性,转换成property的时候需要通过转换得到完整URL
  • 一些attribute和property不是一一对应如:form控件中对应的是defaultValue,修改或设置value property修改的是控件当前值,setAttribute修改value属性不会改变value property

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

  • offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同
  • clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条
  • scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9

javascript概念部分_第1张图片

XMLHttpRequest通用属性和方法

  1. readyState:表示请求状态的整数,取值:
    • UNSENT(0):对象已创建
    • OPENED(1):open()成功调用,在这个状态下,可以为xhr设置请求头,或者使用send()发送请求
    • HEADERS_RECEIVED(2):所有重定向已经自动完成访问,并且最终响应的HTTP头已经收到
    • LOADING(3):响应体正在接收
    • DONE(4):数据传输完成或者传输产生错误
  2. onreadystatechange:readyState改变时调用的函数
  3. status:服务器返回的HTTP状态码(如,200, 404)
  4. statusText:服务器返回的HTTP状态信息(如,OK,No Content)
  5. responseText:作为字符串形式的来自服务器的完整响应
  6. responseXML: Document对象,表示服务器的响应解析成的XML文档
  7. abort():取消异步HTTP请求
  8. getAllResponseHeaders(): 返回一个字符串,包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对,并且使用一个回车/换行来分隔报头行
  9. getResponseHeader(headerName):返回headName对应的报头值
  10. open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法,不区分大小写;url是请求发送的相对或绝对URL;asynchronous表示请求是否异步;user和password提供身份验证
  11. setRequestHeader(name, value):设置HTTP报头
  12. send(body):对服务器请求进行初始化。参数body包含请求的主体部分,对于POST请求为键值对字符串;对于GET请求,为null

focus/blur与focusin/focusout的区别与联系

  1. focus/blur不冒泡,focusin/focusout冒泡
  2. focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件托管,可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)
  3. 可获得焦点的元素:
    1. window
    2. 链接被点击或键盘操作
    3. 表单空间被点击或键盘操作
    4. 设置tabindex属性的元素被点击或键盘操作

mouseover/mouseout与mouseenter/mouseleave的区别与联系

  1. mouseover/mouseout是标准事件,所有浏览器都支持;mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳,现代标准浏览器也支持
  2. mouseover/mouseout是冒泡事件;mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时,推荐mouseover/mouseout托管,提高性能
  3. 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素;在老IE中event.srcElement表示发生移入/出的元素,event.toElement表示移出的目标元素,event.fromElement表示移入时的来源元素

例子:鼠标从div#target元素移出时进行处理,判断逻辑如下:

test

sessionStorage,localStorage,cookie区别

  1. 都会在浏览器端保存,有大小限制,同源限制
  2. cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie;web storage不会发送到服务器
  3. cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径cookie
  4. 有效期:cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效,直到用户删除
  5. 共享:sessionStorage不能共享,localStorage在同源文档之间共享,cookie在同源且符合path规则的文档之间共享
  6. localStorage的修改会促发其他文档窗口的update事件
  7. cookie有secure属性要求HTTPS传输
  8. 浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。web storage大小支持能达到5M

javascript跨域通信

同源:两个文档同源需满足

  1. 协议相同
  2. 域名相同
  3. 端口相同

跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

  • 如果是log之类的简单单项通信,新建,

你可能感兴趣的:(面试经验)