DOM面试题

1.利用冒泡和不利用冒泡的差别

答案:

1.绑定位置不同:不利用冒泡绑定在目标元素上,利用冒泡绑定在父元素上.

2.监听对象的个数不同:不利用冒泡会反复创建多个监听,利用冒泡始终只有

一个监听.

3.动态生成元素:不利用冒泡无法自动获得事件处理函数,必须反复绑定

利用冒泡可让动态添加的子元素自动获得父元素的处理函数,无需反复绑定.

2.按HTML查找和按选择器查找的差别

答案:

1.返回值不同:按HTML查找返回动态集合,按选择器查找返回非动态集合

2.效率不同:按HTML查找效率高,按选择器查找效率低

3.易用性不同:当条件复杂时,按HTML查找繁琐,而按选择器查找简单

3.列举DOM中常用优化

答案:

1.查找时,如果只用一个条件就可查询出结果时,优先选择易用的按选择器查找.

2.添加时,尽量减少操作DOM树的次数,减少重排重绘。如果同时添加父元素和子元素,

应先将子元素添加到父元素,最后再将父元素添加到DOM树。如果添加多个平级子元素,

则应先将子元素添加到文档片段,最后,再将文档片段添加到DOM树.

3.修改时,尽量减少重排重绘。如果同时修改多个元素的内容和样式。应使用class批量修改样式.

4.事件绑定时,应尽量利用冒泡减少事件监听的个数.

4.如何鉴别浏览器的名称和版本号

答案:

var browser,version,ua=navigator.userAgent;

if(ua.indexOf("IE")!=-1)       browser="IE"

else if(ua.indexOf("Edge")!=-1)     browser="Edge"

else if(ua.indexOf("Firefox")!=-1)  browser="Firefox"

else if(ua.indexOf("OPR")!=-1)      browser="OPR"

else if(ua.indexOf("Chrome")!=-1)   browser="Chrome"

else if(ua.indexOf("Safari")!=-1)   browser="Safari"

else if(ua.indexOf("Trident")!=-1)  browser="IE",version=11;

document.write(`<h1>${browser}</h1>`);

if(version===undefined){

//截取: 从浏览器名称所在位置，再跳过浏览器名称长度+1 之后的3位

var i=ua.indexOf(browser);

i+=browser.length+1;

version=parseFloat(ua.slice(i,i+3))

}

document.write(`<h1>${version}</h1>`);

5.为按钮绑定事件,实现事件节流:

答案:

//节流

var  canClick=true;

btn.onclick=function(){

if(canClick){

canClick=false;

consoe.log("发送ajax请求,加载更多...");

setTimeout(function(){

console.log("请求完成!");

canClick=true;

},3000)

}

}

6.为页面绑定滚动事件,实现事件防抖:

答案:

//防抖

var  timer1;

window.onscroll=function(){

if(timer1!==undefined){

clearTimeout(timer1);

}

timer1=setTimeout(function(){

console.log("发送ajax请求,加载更多");

timer1=undefined;

},200)

}

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

答案:

e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意

文档上使用,返回元素在源文件中设置的属性

e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成

对应对象(如 a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则

结合属性设置得到,对于对应特性的属性,只能使用getAtrribute进行访问

-   e.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）

-   e.propName 返回值可能是字符串、布尔值、对象、undefined 等

-   大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性

-   一些布尔属性`<input hidden/>`的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property

-   像`<a href="../index.html">link</a>`中 href 属性，转换成 property 的时候需要通过转换得到完整 URL

-   一些 attribute 和 property 不是一一对应如：form 控件中`<input value="hello"/>`对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property

8.如何最小化重绘(repaint)和回流(reflow)?

答案:

-   需要对元素进行复杂擦欧洲哦时,可以先隐藏(display:"none"),操作完成后再显示.

-   需要创建多个DOM节点时,使用DocumentFragment创建完之后一次性的加入documnet

-   缓存Layout属性值,如:var  left =elem.offsetLeft;

这样,多次使用left产生一次回流

-   尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其他元素回流)

-  避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)

-  尽量使用css属性简写,如:用border代替border-width,border-style,border-color

-  批量修改元素样式:elem.style.xxx

9.描述一下DOM事件模型:

答案:捕获、目标触发、冒泡

捕获阶段：由外向内,依次记录各级父元素上的事件处理函数。

只记录,暂不触发。

目标触发:优先触发目标元素上的事件处理函数。

冒泡:由内向外，依次触发各级父元素上的事件处理函数.

10.谈谈事件委托/代理:

答案:事件委托是指将事件绑定目标元素的父元素上,利用冒泡机制触发该事件.

优点:

-  可以减少事件注册,节省大量内存占用

-  可以将事件应用于动态添加的子元素上

缺点:使用不当会造成事件在不应该触发时触发

示例:

js

url.addEventListener('click',function(e){

var  target =event.target ||  event.srcElement;

if(!!target  && target.nodeName.toUpperCase() === "LI"){

console.log(target.innerHTML);

}

},false);

11.IE的事件处理和W3C的事件处理有哪些区别?

答:

绑定事件

-   W3C: targetEl.addEventListener('click', handler, false);

-   IE: targetEl.attachEvent('onclick', handler);

删除事件

-   W3C: targetEl.removeEventListener('click', handler, false);

-   IE: targetEl.detachEvent(event, handler);

事件对象

-   W3C: var e = arguments.callee.caller.arguments[0]

-   IE: window.event

事件目标

-   W3C: e.target

-  IE:window.event.srcElement

阻止事件默认行为

-  W3C:e.preventDefault()

-   IE:window.event.returnValue =false

阻止事件传播

-   W3C:e.stopPropagation()

-   IE:window.event.cancelBubble = true

12.前端优化的方法:

答案:

1.减少dom操作

2.部署前,图片压缩,代码压缩

3.优化js代码结构,减少冗余代码

4.减少HTTP请求,合理设置HTTP缓存

5.使用内容分发cdn加速

6.静态资源缓存

7.图片延迟加载