1、DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系
1、e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
2、e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
3、e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回""）
4、e.propName返回值可能是字符串、布尔值、对象、undefined等
5、大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
6、一些布尔属性<input hidden/>的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
7、像<a href="../index.html">link</a>中href属性，转换成property的时候需要通过转换得到完整URL
8、一些attribute和property不是一一对应如：form控件中<input value="hello"/>对应的是defaultValue，修改或设置value property修改的是控件当前值，setAttribute修改value属性不会改变value property
2、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸
3、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
4、focus/blur与focusin/focusout的区别与联系
focus/blur不冒泡，focusin/focusout冒泡
focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)
可获得焦点的元素：
window
链接被点击或键盘操作
表单空间被点击或键盘操作
设置tabindex属性的元素被点击或键盘操作
5、mouseover/mouseout与mouseenter/mouseleave的区别与联系
mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能
标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素
6、sessionStorage,localStorage,cookie区别
都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M
7、javascript跨域通信
同源：两个文档同源需满足
协议相同
域名相同
端口相同
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
1、如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe>元素，通过src，href属性设置为目标url。实现跨域请求
2、如果请求json数据，使用<script>进行jsonp请求
3、现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
4、内部服务器代理请求跨域url，然后返回数据
5、跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部**Access-Control-Allow-Origin: ***即可像普通ajax一样访问跨域资源
8、javascript有哪几种数据类型
六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)
一种引用类型
Object
9、什么闭包,闭包有什么用
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调
10、javascript有哪几种方法定义函数
函数声明表达式
function操作符
Function 构造函数
ES6:arrow function
重要参考资料：MDN:Functions_and_function_scope
11、应用程序存储和离线web应用
HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。 1.为html元素设置manifest属性:<html manifest="myapp.appcache">
，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest
作为MIME类型。所以需要配置服务器保证设置正确 2.manifest文件首行为CACHE MANIFEST
，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头 3.url分为三种类型：CACHE
:为默认类型。NETWORK
：表示资源从不缓存。 FALLBACK
:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源， 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：
CACHE MANIFESTCACHE:myapp.htmlmyapp.cssmyapp.jsFALLBACK:videos/ offline_help.htmlNETWORK:cgi/
12、客户端存储localStorage和sessionStorage
localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档。
Storage对象通常被当做普通javascript对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key
localStorage.setItem('x', 1); // storge x->1localStorage.getItem('x); // return value of x// 枚举所有存储的键值对for (var i = 0, len = localStorage.length; i < len; ++i ) { var name = localStorage.key(i); var value = localStorage.getItem(name);}localStorage.removeItem('x'); // remove xlocalStorage.clear(); // remove all data
13、cookie及其操作
cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
通过读写cookie检测是否支持
cookie属性有名，值，max-age，path, domain，secure；
cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器cookie有效期
cookie作用域通过文档源和文档路径来确定，通过path和domain进行配置，web页面同目录或子目录文档都可访问
通过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串如下
读取document.cookie获得'; '分隔的字符串，key=value,解析得到结果
document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';document.cookie = 'name=aaa; path=/; domain=domain; secure';// 要改变cookie的值，需要使用相同的名字、路径和域，新的值// 来设置cookie，同样的方法可以用来改变有效期// 设置max-age为0可以删除指定cookie//读取cookie，访问document.cookie返回键值对组成的字符串，//不同键值对之间用'; '分隔。通过解析获得需要的值
网友评论