js容易搞混的概念你还搞混吗

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-agepath, domainsecure
cookie默认有效期为浏览器会话,一旦用户关闭浏览器,数据就丢失,通过设置max-age=seconds属性告诉浏览器cookie有效期
cookie作用域通过文档源文档路径来确定,通过pathdomain进行配置,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返回键值对组成的字符串,//不同键值对之间用'; '分隔。通过解析获得需要的值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,654评论 18 139
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,474评论 1 19
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,157评论 0 1
  • 世界经济数据技术设计技术就是世界哇咔咔看
    quanjj阅读 383评论 0 0
  • “风”对于孩子们来说,并不陌生,而且可能会时常感知得到。但对于“风”的描述却是不容易的,因为“风”不可见、不可触摸...
    嘤说亲子阅读 6,898评论 0 2