WebAPI

1、什么是dom？（必会）

     什么是dom

      1、DOM 是 W3C（万维网联盟）的标准

      2、DOM 定义了访问 HTML 和 XML 文档的标准

      什么是W3C

      1、“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

      2、W3C DOM 标准被分为 3 个不同的部分

           2.1）核心 DOM - 针对任何结构化文档的标准模型

           2.2）XML DOM - 针对 XML 文档的标准模型

           2.3）HTML DOM - 针对 HTML 文档的标准模型

           备注：DOM 是 Document Object Model（文档对象模型）的缩写

2、dom是哪种基本的数据结构？（必会）

           DOM是一种树形结构的数据结构

3、dom操作的常用api有哪些？（必会）

           dom操作的常用api有以下几种

           1、获取dom节点

              1.1）document.getElementById('div1')

              1.2）document.getElementsByTagName('div')

              1.3）document.getElementsByClassName('container')

              1.4）document.querySelector('p')

              1.5）document.querySelectorAll('p')

            2、property（js对象的property）

                  var p = document.getElementByTagName('p')[0]

                  console.log(p.nodeName); // nodeName是p的property，即nodeName是p的属性

            3、attribute

                  3.1）p.getAttribute('data-name');

                  3.2）p.setAttribute('data-name', 'imooc');

4、dom节点的Attribute和Property有何区别？（必会）

    1、什么是Property

       每个DOM节点都是一个object对象，它可以像其他的js Object一样具有自己的property和method，所以property的值可以是任何数据类型，大小写敏感，原则上property应该仅供 js操作，不会出现在html中（默认属性除外：id/src/href/className/dir/title/lang等），和其他js object一样，自定义的property也会出现在object的for…in遍历中

     2、什么是Attribute

       attribute出现 在dom中，js提供了getAttribute/setAttribute等方法来获取和改变它的值，attribute 的值只能是字符串且大小写不敏感，最后作用于html中，可以影响innerHTML获取的值。可以通过访问dom节点的attributes属性来获取 改节点的所有的attribute。（在IE<9中,attribute获取和改变的实际上是property。）

     3、两者之间的区别是：

       3.1）自定义的Property与Attribute不同步,不相等

       3.2）非自定义的DOM property与 attributes 是有条件同步的

       3.3）非自定义的属性(id/src/href/name/value等)，通过setAttribute修改其特性值可以同步作用到property 上，而通过.property修改属性值有的(value)时候不会同步到attribute上，即不会反应到html上(除以下几种情况，非自定义属性 在二者之间是同步的)。

5、dom结构操作怎样添加、移除、移动、复制、创建和查找节点？（必会）

       1、创建新节点

       createDocumentFragment()    //创建一个DOM片段

       createElement()   //创建一个具体的元素

       createTextnode()   //创建一个文本节点

       2、添加、移除、替换、插入

        appendChild()

        removeChild()

        replaceChild()

        insertBefore() //并没有insertAfter()

       3、查找

        getElementsByTagName()    //通过标签名称

        getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

        getElementById()    //通过元素Id，唯一性

6、dom事件的级别？（必会）

        DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。

        而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件

        1、dom0 element.οnclick=function(){}

        2、dom2 element.addEventListener(‘click’, function(){}, false) // 默认是false。false：冒泡阶段执行，true：捕获阶段产生。

        3、dom3 element.addEventListener(‘keyup’, function(){}, false) // 事件类型增加了很多，鼠标事件、键盘事件

        UI事件，当用户与页面上的元素交互时触发，如：load、scroll

        焦点事件，当元素获得或失去焦点时触发，如：blur、focus

        鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

        滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

        文本事件，当在文档中输入文本时触发，如：textInput

        键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

        合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

        变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

        同时DOM3级事件也允许使用者自定义一些事件

7、dom事件模型？（必会）

        DOM事件模型。

        DOM事件模型分为两种：事件捕获和事件冒泡。

        事件捕获以点击事件为例，同类型事件会由根元素开始触发，向内传播，一直到目标元素。从外到内依次触发：根—目标的祖先素—目标的父元素—目标元素

        事件冒泡和事件捕获截然相反。发生点击事件时，事件会从目标元素上开始触发，向外传播，一直到根元素停止。从内到外依次触发：目标元素—目标元素的父元素—父元素的父元素—根

        事件传播

        事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。

        优先级：先捕获，再冒泡。

        两种传播方式的来源：W3C推行DOM2级事件之前网景和IE在打架，网景用的事件传播方式是捕获，IE用的事件传播方式是冒泡

8、dom事件流？（必会）

        1、事件捕获阶段：事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根节点document（window）开始触发对象，最后传播到目标节点，从外向内捕获事件对象

         2、处于目标阶段：事件到达目标对象，事件触发，如果事件不允许冒泡，事件会在这一阶段停止传播

         3、事件冒泡阶段：从目标节点逐级传播到document节点

9、什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默认行为?（必会）

       1、什么是事件冒泡，他是如何工作的

        在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
         2、阻止事件冒泡的方法

           2.1）w3c方法是：event.stopPropagation(); 事件处理过程中，阻止冒泡事件，但不会阻止默认行为（跳转至超链接）

           2.2）IE则是使用event.cancelBubble = true 阻止事件冒泡

           2.3）return false;   jq里面事件处理过程中，阻止冒泡事件，也阻止默认行为（不   跳转超链接）

          封装方法：

[AppleScript] 纯文本查看 复制代码

function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE浏览器
    ev.stopPropagation();
  } else {
    //IE浏览器(IE11以下)
    ev.cancelBubble = true;
  }
  console.log("最底层盒子被点击了")
}

        阻止默认行为：

[AppleScript] 纯文本查看 复制代码

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
封装：
//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

10、JavaScript动画和CSS3动画有什么区别？（必会）

         1、CSS动画

         优点：

          1.1)浏览器可以对动画进行优化。

               1.1.1 )浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

               1.1.2)强制使用硬件加速 （通过 GPU 来提高动画性能）

          1.2)代码相对简单,性能调优方向固定

          1.3)对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

           缺点：

           1.1) 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告。

           1.2) 代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

        2、JS动画

          优点：

              2.1）JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

              2.2）动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。

              2.3）CSS3有兼容性问题，而JS大多时候没有兼容性问题。

            缺点：

              2.1）JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

              2.2）代码的复杂度高于CSS动画

            总结：如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。

         3、css 动画和 js 动画的差异

               3.1）代码复杂度，js 动画代码相对复杂一些 。

               3.2）动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件。

               3.3）动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好。

11、event对象的常见应用？（必会）

          1、event.preventDefault(); // 阻止默认行为，阻止a链接默认的跳转行为

          2、event.stopPropagation(); // 阻止冒泡

          3、event.stopImmediatePropagation(); // 按钮绑定了2个响应函数，依次注册a,b两个事件，点击按钮，a事件中加event.stopImmediatePropagation()就能阻止b事件

          4、event.currentTarget // 早期的ie不支持，当前绑定的事件

          5、event.target

12、自定义事件/ 模拟事件？（必会）

         1、给一个按钮自己增加一个事件，在其他地方触发，而不是用回调的方式触发

[AppleScript] 纯文本查看 复制代码

var ev = document.getElementById('ev');
var eve = new Event('custome'); // eve：事件对象
ev.addEventListener('custome', function(){
        console.log('custome');
});
ev.dispatchEvent(eve);

2、customeEvent

13、通用事件绑定/ 编写一个通用的事件监听函数？（必会）

[AppleScript] 纯文本查看 复制代码

function bindEvent(elem, type, selector, fn) {
        if (fn == null) {
                fn = selector;
                selector = null;
        }
        elem.addEventListner(type, function(e) {
                var target;
                if (selector) {
                        target = e.target;
                        if (target.matches(selector)) {
                                fn.call(target, e);
                        }
                } else {
                        fn(e);
                }
        })
}
// 使用代理
var div1 = document.getElementById('div1');
bindEvent(div1, 'click', 'a', function(e) {
        console.log(this.innerHTML);
});
// 不使用代理
var a = document.getElementById('a1');
bindEvent(div1, 'click', function(e) {
        console.log(a.innerHTML);
})

1、代理的好处
1.2）代码简洁
1.2）减少浏览器内存占用

2、事件冒泡
事件冒泡的应用：代理

14、dom和bom的区别（必会）

         1、bom

                1.1) BOM是Browser Object Model的缩写，即浏览器对象模型。

                1.2） BOM没有相关标准。

                1.3） BOM的最根本对象是window

         2、dom

                2.1） DOM是Document Object Model的缩写，即文档对象模型。

                2.2） DOM是W3C的标准。

                2.3） DOM最根本对象是document（实际上是window.document）

15、事件三要素（必会）

              1、事件源、就是你点的那个div，触发的对象
              2、事件、表示动作，比如点击、滑过等
              3、事件处理函数、表示结果，比如点开关跳转到另一个页面

16、事件执行过程（必会）

        事件捕获过程：当我们点击TEXT时，首先是window->document->body->div->text.这个过程称为事件捕获，W3C浏览器的标准执行流程。

        事件冒泡过程：text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡，不支持捕获。W3C浏览器先执行捕获，后执行冒泡

17、获取元素位置（必会）

          1、通过元素的offsetLeft和offsetTop

        dom元素的offsetLeft、offsetTop指的是元素相对于其offseParent指定的坐标来说的。offsetParent：是指当前元素最近的经过定位的父级元素，如果没有则一直向上直至body。注意当前元素为fixed时，其offsetParent的值为null

拓展：

[AppleScript] 纯文本查看 复制代码

offsetWidth/offsetHeight: width+padding+border
clientLeft/clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）//个人理解为border值
clientWidth/clientHeight: width+padding
scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
window.screen.availHeight/window.screen.availWidth: 浏览器去除上方工具栏和下放菜单栏可用宽高
window.screen.height/window.screen.width: 屏幕宽高

         2、event.clientX和event.clientY

             事件相对于文档的水平和垂直距离

            3、getBoundingClientRect

             方法返回一个一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离

18、封装运动函数（必会）

[AppleScript] 纯文本查看 复制代码

/*
obj 指的是DOM对象
- json 指的是 CSS样式
例 startMove(oDiv,{width:100,height:100},function(){})
*/
function startMove(obj,json,fnEnd){
        clearInterval(obj.timer);        //先清除之前的定时器
        obj.timer = setInterval(function(){
                var bStop = true;        // 假设所有的值都到了
                for( var attr in json ){        //遍历json属性
                        var cur = (attr == 'opacity') ? Math.round(parseFloat(getStyle(obj,attr))*100) : parseInt(getStyle(obj,attr)); //对opacity 特殊处理
                        var speed = (json[attr] - cur)/6;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);         //speed 数字转化，防止不能到达目标的bug
                        if( cur != json[attr]) bStop = false;        //如果没有达到目标值，则bStop设为false;
                        if(attr == 'opacity'){
                                obj.style.filter = 'alpha(opacity='+ (cur + speed) +')';
                                obj.style.opacity = (cur + speed)/100;
                        }else{
                                obj.style[attr] = cur + speed + 'px';       
                        }       
                }
                if(bStop){
                        clearInterval(obj.timer);
                        if(fnEnd) fnEnd();        //执行回调函数
                }
        },30);
}
function getStyle(obj,name){
        return obj.currentStyle ? obj.currentStyle[name] : window.getComputedStyle(obj,null)[name];        //浏览器兼容性处理，注意getComputedStyle为只读属性
}
function getByClass(oParent,sClass){
        var aEle = oParent.getElementsByTagName('*');
        var aResult =[];
        var re = new RegExp('\\b' + sClass + '\\b','i');
        for(var i=0; i<aEle.length;i++ ){
                if(re.test(aEle.className)) aResult.push(aEle);
        }
        return aResult;
}

19、绑定事件和解除事件的区别（必会）

          1、事件绑定

              定义：一个事件可以加多次，且不会覆盖

          2、绑定方法

              2.1）attachEvent ('on+事件名'，函数名)  这个只兼容ie 6-8

              2.2）addEventListener (事件名，函数名，false)  支持ie9+ chrom firfox

[AppleScript] 纯文本查看 复制代码

绑定事件的封装
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
};
解除绑定事件的封装
function removeEvent(obj,sEv,fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}

20、谈谈事件委托的理解？（必会）

         JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

         优点：

           1、减少事件注册，节省内存。比如，
           2、在table上代理所有td的click事件。
           3、在ul上代理所有li的click事件。
           4、简化了dom节点更新时，相应事件的更新。比如
           5、不用在新添加的li上绑定click事件。
           6、当删除某个li时，不用移解绑上面的click事件。

          缺点：

           1、事件委托基于冒泡，对于不冒泡的事件不支持
           2、层级过多，冒泡过程中，可能会被某层阻止掉。
           3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
           4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件

21、JavaScript中的定时器有哪些？他们的区别及用法是什么？（必会）

      1、JavaScript中的定时器有以下几种

        1）setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

        2）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

22、比较attachEvent和addEventListener?（必会）

         attachEvent方法可以动态的为网页内的元素添加一个事件，通常你想为某个按扭添加一个单击事件时，你都会在按扭内写上οnclick=事件名称，使用attachEvent则不必这样做，你把写好的事件准备好，在需要的时候给元素绑定上再执行，而且attachEvent支持为某个元素绑定多个事件，执行顺序是，后绑定的先执行，如果想删除事件请使用detachEvent
attachEvent方法只支持IE浏览器，与其功能相同的指令是addEventListener，该指令支持FF等浏览器，并且是W3C标准。

         语法：Element.attachEvent(Etype,EventName)

                参数Element:要为该元素动态添加一个事件
                       Etype:指定事件类型．比如：onclick,onkeyup,onmousemove等
                       EventName:指定事件名称．也就是你写好的函数

         addEventListener方法与attachEvent方法功能相同．但是addEventListener是W3C标准，而attachEvent非W3C标准，且只支持IE浏览器
         虽然addEventListener属于标准方法，但依然无法在IE下运行．IE不支持该方法
         addEventListener带有三个参数必须设置缺一不可
        addEventListener可以为网页内某个元素动态绑定一个事件．事件类型可随意指定．如:click,mousemove,keyup等
       通常你想为某个按扭添加一个单击事件时，你都会在按扭内写上οnclick=事件名称，使用addEventListener则不必这样做，你把写好的事件准备好，在需要的时候给元素绑定上再执行，而且addEventListener支持为某个元素绑定多个事件，执行顺序是，先绑定的先执行，如果想删除事件请使用removeEventListener

        语法：Element.addEventListener(Etype,EventName,boole)返回值：[tag:return_value /]
        参数Element:要为该元素绑定一个事件．可以是任意的html元素
        Etype:事件类型.比如：click,keyup,mousemove.注意使用addEventListener绑定事件时，设置参数事件类型时不必写on．否则会出错
        EventName:要绑定事件的名称．也就是你写好的函数
        boole:该参数是一个布尔值：false或true必须填写．false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能

23、document.write和innerHTML的区别？（必会）

        document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写

        innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改          document.documentElement.innerElement

         innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

         innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分

24、什么是window对象？什么是document对象？（必会）

      1、什么是window对象

       简单来说，document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。

       如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。

       document对 Document 对象的只读引用。

       [window对象]它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。

       属性

       defaultStatus 缺省的状态条消息

       document 当前显示的文档(该属性本身也是一个对象)

       frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

       frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)

       history 窗口的历史列表(该属性本身也是一个对象)

       length 窗口内的框架数

       location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变          window.location(用另一个文档取代当前文档),但却不能改变document.location (因为这是当前显示文档的位置)

       name 窗口打开时,赋予该窗口的名字

       opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)

       parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

       self 当前窗口或框架的同义词

       status 状态条中的消息

       top 包含当前框架的最顶层浏览器窗口的同义词

       window 当前窗口或框架的同义词,与self相同

      方法

      alert() 打开一个Alert消息框

      clearTimeout() 用来终止setTimeout方法的工作

      close() 关闭窗口

      confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false

      blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

      focus() 把指定的窗口带到前台(另一个新方法)

      open() 打开一个新窗口

      prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

      setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

      Onload() 页面载入时触发

      Onunload() 页面关闭时触发

      2、什么是document对象

    [document 对象]该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

    属性

      alinkColor 活动链接的颜色(ALINK)

      anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

      anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

      bgColor 文档的背景颜色(BGCOLOR)

      cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

      fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)

      form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)

      forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

      lastModified 文档最后的修改日期

      linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)

      link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

      links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

      location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

      referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

      title 文档的标题((TITLE>)

       vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性

     方法

     clear 清除指定文档的内容

     close 关闭文档流

     open 打开文档流

     write 把文本写入文档

      writeln 把文本写入文档,并以换行符结尾

   区别: 1、window 指窗体。document指页面。document是window的一个子对象。

           2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

25、Js拖动的原理？（必会）

      js的拖拽效果主要用到以下三个事件：

       mousedown 鼠标按下事件

       mousemove 鼠标移动事件

        mouseup 鼠标抬起事件

        当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：

         document.addEventListener("mousemove", moving, false)和添加鼠标抬起的事件

         document.addEventListener("mouseup",function() { document.removeEventListener("mousemove", moving, false);}, false);这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。

         当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：

        top=鼠标按下时记录的dom的top值+（移动中的y值 - 鼠标按下时的y值）

        left=鼠标按下时记录的dom的left值+（移动中的x值 - 鼠标按下时的x值）;

26、描述浏览器的渲染过程，DOM树和渲染树的区别（必会）

      1、浏览器的渲染过程：

     解析HTML构建 DOM(DOM树)，并行请求 css/image/js

     CSS 文件下载完成，开始构建 CSSOM(CSS树)

     CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)

     布局(Layout)：计算出每个节点在屏幕中的位置

      显示(Painting)：通过显卡把页面画到屏幕上

      2、DOM树 和 渲染树 的区别

      DOM树与HTML标签一一对应，包括head和隐藏元素

      渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

27、dom树和render树之间的关系？（高薪常问）

      1、dom树，css树合并成成渲染树（render树）
      2、DOM树与HTML标签一一对应，包括head和隐藏元素
      3、渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

28、获取到页面中所有的CheckBox怎么做（不适用第三方框架）？（高薪常问）

[AppleScript] 纯文本查看 复制代码

var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];
var len = domList.length;//缓存到局部变量
while (len--) {//使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
    checkBoxList.push(domList[len]);
}
}

29、简单说一下页面重绘和回流？（高薪常问）

       1、什么是回流

        回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了

      2、什么是重绘

        重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color....

        因此得出了一个结论：回流必定触发重绘，而重绘不一定触发回流

30、如何最小化重绘(repaint)和回流(reflow)（高薪常问）

      需要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示

      需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

      缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

      尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）

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

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

      批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

31、Js延迟加载的方式有哪些？（了解）

        js实现延迟加载的几种方法，js的延迟加载有助与提高页面的加载速度

        JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件

        JS延迟加载有助于提高页面加载速度

         一般有以下几种方式：

        defer 属性

        async 属性

        动态创建DOM方式

        使用jQuery的getScript方法

        使用setTimeout延迟方法

         让JS最后加载

       1、defer 属性

        HTML 4.01 为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行标签定义了defer属性。

        用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行

        在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps5.png

        说明：虽然<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行

        HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行

         defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的defer属性

        2、 async 属性

        HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件

        目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps6.png

        async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

        缺点：不能控制加载的顺序

        3、动态创建DOM方式

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps7.png

        4、使用jQuery的getScript()方法

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps8.png

        5、使用setTimeout延迟方法的加载时间

             延迟加载js代码，给网页加载留出更多时间

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps9.png

        6、让JS最后加载

             把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

             例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码，所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

            上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps10.png

这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。

           使用此段代码的步骤：

          6.1）复制上面代码

          6.2）粘贴代码到HTML的标签前 (靠近HTML文件底部)

          6.3）修改“defer.js”为你的外部JS文件名

          6.4）确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

          注意：

          这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来

          在元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

32、IE与标准事件模型有哪些差别？（了解）

        1. 添加事件

         DOM事件模型 – addEventListener

         addEventListener(eventType, handler, useCapture)

         eventType不带有on字符串；

         handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；

         useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。

         IE事件模型 – attachEvent

         attachEvent(eventType, handler)

         eventType 带 on字符串；

          handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；

         2. 事件过程

        DOM事件模型包含捕获阶段和冒泡阶段，IE事件模型只包含冒泡阶段；

        DOM事件模型可使用e.stopPropagation()来阻止事件流

WebAPI

1、什么是dom？（必会）

     什么是dom

      1、DOM 是 W3C（万维网联盟）的标准

      2、DOM 定义了访问 HTML 和 XML 文档的标准

      什么是W3C

      1、“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

      2、W3C DOM 标准被分为 3 个不同的部分

           2.1）核心 DOM - 针对任何结构化文档的标准模型

           2.2）XML DOM - 针对 XML 文档的标准模型

           2.3）HTML DOM - 针对 HTML 文档的标准模型

           备注：DOM 是 Document Object Model（文档对象模型）的缩写

2、dom是哪种基本的数据结构？（必会）

           DOM是一种树形结构的数据结构

3、dom操作的常用api有哪些？（必会）

           dom操作的常用api有以下几种

           1、获取dom节点

              1.1）document.getElementById('div1')

              1.2）document.getElementsByTagName('div')

              1.3）document.getElementsByClassName('container')

              1.4）document.querySelector('p')

              1.5）document.querySelectorAll('p')

            2、property（js对象的property）

                  var p = document.getElementByTagName('p')[0]

                  console.log(p.nodeName); // nodeName是p的property，即nodeName是p的属性

            3、attribute

                  3.1）p.getAttribute('data-name');

                  3.2）p.setAttribute('data-name', 'imooc');

4、dom节点的Attribute和Property有何区别？（必会）

    1、什么是Property

       每个DOM节点都是一个object对象，它可以像其他的js Object一样具有自己的property和method，所以property的值可以是任何数据类型，大小写敏感，原则上property应该仅供 js操作，不会出现在html中（默认属性除外：id/src/href/className/dir/title/lang等），和其他js object一样，自定义的property也会出现在object的for…in遍历中

     2、什么是Attribute

       attribute出现 在dom中，js提供了getAttribute/setAttribute等方法来获取和改变它的值，attribute 的值只能是字符串且大小写不敏感，最后作用于html中，可以影响innerHTML获取的值。可以通过访问dom节点的attributes属性来获取 改节点的所有的attribute。（在IE<9中,attribute获取和改变的实际上是property。）

     3、两者之间的区别是：

       3.1）自定义的Property与Attribute不同步,不相等

       3.2）非自定义的DOM property与 attributes 是有条件同步的

       3.3）非自定义的属性(id/src/href/name/value等)，通过setAttribute修改其特性值可以同步作用到property 上，而通过.property修改属性值有的(value)时候不会同步到attribute上，即不会反应到html上(除以下几种情况，非自定义属性 在二者之间是同步的)。

5、dom结构操作怎样添加、移除、移动、复制、创建和查找节点？（必会）

       1、创建新节点

       createDocumentFragment()    //创建一个DOM片段

       createElement()   //创建一个具体的元素

       createTextnode()   //创建一个文本节点

       2、添加、移除、替换、插入

        appendChild()

        removeChild()

        replaceChild()

        insertBefore() //并没有insertAfter()

       3、查找

        getElementsByTagName()    //通过标签名称

        getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

        getElementById()    //通过元素Id，唯一性

6、dom事件的级别？（必会）

        DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。

        而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件

        1、dom0 element.οnclick=function(){}

        2、dom2 element.addEventListener(‘click’, function(){}, false) // 默认是false。false：冒泡阶段执行，true：捕获阶段产生。

        3、dom3 element.addEventListener(‘keyup’, function(){}, false) // 事件类型增加了很多，鼠标事件、键盘事件

        UI事件，当用户与页面上的元素交互时触发，如：load、scroll

        焦点事件，当元素获得或失去焦点时触发，如：blur、focus

        鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

        滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

        文本事件，当在文档中输入文本时触发，如：textInput

        键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

        合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

        变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

        同时DOM3级事件也允许使用者自定义一些事件

7、dom事件模型？（必会）

        DOM事件模型。

        DOM事件模型分为两种：事件捕获和事件冒泡。

        事件捕获以点击事件为例，同类型事件会由根元素开始触发，向内传播，一直到目标元素。从外到内依次触发：根—目标的祖先素—目标的父元素—目标元素

        事件冒泡和事件捕获截然相反。发生点击事件时，事件会从目标元素上开始触发，向外传播，一直到根元素停止。从内到外依次触发：目标元素—目标元素的父元素—父元素的父元素—根

        事件传播

        事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。

        优先级：先捕获，再冒泡。

        两种传播方式的来源：W3C推行DOM2级事件之前网景和IE在打架，网景用的事件传播方式是捕获，IE用的事件传播方式是冒泡

8、dom事件流？（必会）

        1、事件捕获阶段：事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根节点document（window）开始触发对象，最后传播到目标节点，从外向内捕获事件对象

         2、处于目标阶段：事件到达目标对象，事件触发，如果事件不允许冒泡，事件会在这一阶段停止传播

         3、事件冒泡阶段：从目标节点逐级传播到document节点

9、什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默认行为?（必会）

       1、什么是事件冒泡，他是如何工作的

        在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
         2、阻止事件冒泡的方法

           2.1）w3c方法是：event.stopPropagation(); 事件处理过程中，阻止冒泡事件，但不会阻止默认行为（跳转至超链接）

           2.2）IE则是使用event.cancelBubble = true 阻止事件冒泡

           2.3）return false;   jq里面事件处理过程中，阻止冒泡事件，也阻止默认行为（不   跳转超链接）

          封装方法：

[AppleScript] 纯文本查看 复制代码

function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE浏览器
    ev.stopPropagation();
  } else {
    //IE浏览器(IE11以下)
    ev.cancelBubble = true;
  }
  console.log("最底层盒子被点击了")
}

        阻止默认行为：

[AppleScript] 纯文本查看 复制代码

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
封装：
//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

10、JavaScript动画和CSS3动画有什么区别？（必会）

         1、CSS动画

         优点：

          1.1)浏览器可以对动画进行优化。

               1.1.1 )浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

               1.1.2)强制使用硬件加速 （通过 GPU 来提高动画性能）

          1.2)代码相对简单,性能调优方向固定

          1.3)对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

           缺点：

           1.1) 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告。

           1.2) 代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

        2、JS动画

          优点：

              2.1）JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

              2.2）动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。

              2.3）CSS3有兼容性问题，而JS大多时候没有兼容性问题。

            缺点：

              2.1）JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

              2.2）代码的复杂度高于CSS动画

            总结：如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。

         3、css 动画和 js 动画的差异

               3.1）代码复杂度，js 动画代码相对复杂一些 。

               3.2）动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件。

               3.3）动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好。

11、event对象的常见应用？（必会）

          1、event.preventDefault(); // 阻止默认行为，阻止a链接默认的跳转行为

          2、event.stopPropagation(); // 阻止冒泡

          3、event.stopImmediatePropagation(); // 按钮绑定了2个响应函数，依次注册a,b两个事件，点击按钮，a事件中加event.stopImmediatePropagation()就能阻止b事件

          4、event.currentTarget // 早期的ie不支持，当前绑定的事件

          5、event.target

12、自定义事件/ 模拟事件？（必会）

         1、给一个按钮自己增加一个事件，在其他地方触发，而不是用回调的方式触发

[AppleScript] 纯文本查看 复制代码

var ev = document.getElementById('ev');
var eve = new Event('custome'); // eve：事件对象
ev.addEventListener('custome', function(){
        console.log('custome');
});
ev.dispatchEvent(eve);

2、customeEvent

13、通用事件绑定/ 编写一个通用的事件监听函数？（必会）

[AppleScript] 纯文本查看 复制代码

function bindEvent(elem, type, selector, fn) {
        if (fn == null) {
                fn = selector;
                selector = null;
        }
        elem.addEventListner(type, function(e) {
                var target;
                if (selector) {
                        target = e.target;
                        if (target.matches(selector)) {
                                fn.call(target, e);
                        }
                } else {
                        fn(e);
                }
        })
}
// 使用代理
var div1 = document.getElementById('div1');
bindEvent(div1, 'click', 'a', function(e) {
        console.log(this.innerHTML);
});
// 不使用代理
var a = document.getElementById('a1');
bindEvent(div1, 'click', function(e) {
        console.log(a.innerHTML);
})

1、代理的好处
1.2）代码简洁
1.2）减少浏览器内存占用

2、事件冒泡
事件冒泡的应用：代理

14、dom和bom的区别（必会）

         1、bom

                1.1) BOM是Browser Object Model的缩写，即浏览器对象模型。

                1.2） BOM没有相关标准。

                1.3） BOM的最根本对象是window

         2、dom

                2.1） DOM是Document Object Model的缩写，即文档对象模型。

                2.2） DOM是W3C的标准。

                2.3） DOM最根本对象是document（实际上是window.document）

15、事件三要素（必会）

              1、事件源、就是你点的那个div，触发的对象
              2、事件、表示动作，比如点击、滑过等
              3、事件处理函数、表示结果，比如点开关跳转到另一个页面

16、事件执行过程（必会）

        事件捕获过程：当我们点击TEXT时，首先是window->document->body->div->text.这个过程称为事件捕获，W3C浏览器的标准执行流程。

        事件冒泡过程：text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡，不支持捕获。W3C浏览器先执行捕获，后执行冒泡

17、获取元素位置（必会）

          1、通过元素的offsetLeft和offsetTop

        dom元素的offsetLeft、offsetTop指的是元素相对于其offseParent指定的坐标来说的。offsetParent：是指当前元素最近的经过定位的父级元素，如果没有则一直向上直至body。注意当前元素为fixed时，其offsetParent的值为null

拓展：

[AppleScript] 纯文本查看 复制代码

offsetWidth/offsetHeight: width+padding+border
clientLeft/clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）//个人理解为border值
clientWidth/clientHeight: width+padding
scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
window.screen.availHeight/window.screen.availWidth: 浏览器去除上方工具栏和下放菜单栏可用宽高
window.screen.height/window.screen.width: 屏幕宽高

         2、event.clientX和event.clientY

             事件相对于文档的水平和垂直距离

            3、getBoundingClientRect

             方法返回一个一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离

18、封装运动函数（必会）

[AppleScript] 纯文本查看 复制代码

/*
obj 指的是DOM对象
- json 指的是 CSS样式
例 startMove(oDiv,{width:100,height:100},function(){})
*/
function startMove(obj,json,fnEnd){
        clearInterval(obj.timer);        //先清除之前的定时器
        obj.timer = setInterval(function(){
                var bStop = true;        // 假设所有的值都到了
                for( var attr in json ){        //遍历json属性
                        var cur = (attr == 'opacity') ? Math.round(parseFloat(getStyle(obj,attr))*100) : parseInt(getStyle(obj,attr)); //对opacity 特殊处理
                        var speed = (json[attr] - cur)/6;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);         //speed 数字转化，防止不能到达目标的bug
                        if( cur != json[attr]) bStop = false;        //如果没有达到目标值，则bStop设为false;
                        if(attr == 'opacity'){
                                obj.style.filter = 'alpha(opacity='+ (cur + speed) +')';
                                obj.style.opacity = (cur + speed)/100;
                        }else{
                                obj.style[attr] = cur + speed + 'px';       
                        }       
                }
                if(bStop){
                        clearInterval(obj.timer);
                        if(fnEnd) fnEnd();        //执行回调函数
                }
        },30);
}
function getStyle(obj,name){
        return obj.currentStyle ? obj.currentStyle[name] : window.getComputedStyle(obj,null)[name];        //浏览器兼容性处理，注意getComputedStyle为只读属性
}
function getByClass(oParent,sClass){
        var aEle = oParent.getElementsByTagName('*');
        var aResult =[];
        var re = new RegExp('\\b' + sClass + '\\b','i');
        for(var i=0; i<aEle.length;i++ ){
                if(re.test(aEle.className)) aResult.push(aEle);
        }
        return aResult;
}

19、绑定事件和解除事件的区别（必会）

          1、事件绑定

              定义：一个事件可以加多次，且不会覆盖

          2、绑定方法

              2.1）attachEvent ('on+事件名'，函数名)  这个只兼容ie 6-8

              2.2）addEventListener (事件名，函数名，false)  支持ie9+ chrom firfox

[AppleScript] 纯文本查看 复制代码

绑定事件的封装
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
};
解除绑定事件的封装
function removeEvent(obj,sEv,fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}

20、谈谈事件委托的理解？（必会）

         JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

         优点：

           1、减少事件注册，节省内存。比如，
           2、在table上代理所有td的click事件。
           3、在ul上代理所有li的click事件。
           4、简化了dom节点更新时，相应事件的更新。比如
           5、不用在新添加的li上绑定click事件。
           6、当删除某个li时，不用移解绑上面的click事件。

          缺点：

           1、事件委托基于冒泡，对于不冒泡的事件不支持
           2、层级过多，冒泡过程中，可能会被某层阻止掉。
           3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
           4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件

21、JavaScript中的定时器有哪些？他们的区别及用法是什么？（必会）

      1、JavaScript中的定时器有以下几种

        1）setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

        2）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

22、比较attachEvent和addEventListener?（必会）

         attachEvent方法可以动态的为网页内的元素添加一个事件，通常你想为某个按扭添加一个单击事件时，你都会在按扭内写上οnclick=事件名称，使用attachEvent则不必这样做，你把写好的事件准备好，在需要的时候给元素绑定上再执行，而且attachEvent支持为某个元素绑定多个事件，执行顺序是，后绑定的先执行，如果想删除事件请使用detachEvent
attachEvent方法只支持IE浏览器，与其功能相同的指令是addEventListener，该指令支持FF等浏览器，并且是W3C标准。

         语法：Element.attachEvent(Etype,EventName)

                参数Element:要为该元素动态添加一个事件
                       Etype:指定事件类型．比如：onclick,onkeyup,onmousemove等
                       EventName:指定事件名称．也就是你写好的函数

         addEventListener方法与attachEvent方法功能相同．但是addEventListener是W3C标准，而attachEvent非W3C标准，且只支持IE浏览器
         虽然addEventListener属于标准方法，但依然无法在IE下运行．IE不支持该方法
         addEventListener带有三个参数必须设置缺一不可
        addEventListener可以为网页内某个元素动态绑定一个事件．事件类型可随意指定．如:click,mousemove,keyup等
       通常你想为某个按扭添加一个单击事件时，你都会在按扭内写上οnclick=事件名称，使用addEventListener则不必这样做，你把写好的事件准备好，在需要的时候给元素绑定上再执行，而且addEventListener支持为某个元素绑定多个事件，执行顺序是，先绑定的先执行，如果想删除事件请使用removeEventListener

        语法：Element.addEventListener(Etype,EventName,boole)返回值：[tag:return_value /]
        参数Element:要为该元素绑定一个事件．可以是任意的html元素
        Etype:事件类型.比如：click,keyup,mousemove.注意使用addEventListener绑定事件时，设置参数事件类型时不必写on．否则会出错
        EventName:要绑定事件的名称．也就是你写好的函数
        boole:该参数是一个布尔值：false或true必须填写．false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能

23、document.write和innerHTML的区别？（必会）

        document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写

        innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改          document.documentElement.innerElement

         innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

         innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分

24、什么是window对象？什么是document对象？（必会）

      1、什么是window对象

       简单来说，document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。

       如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。

       document对 Document 对象的只读引用。

       [window对象]它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。

       属性

       defaultStatus 缺省的状态条消息

       document 当前显示的文档(该属性本身也是一个对象)

       frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

       frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)

       history 窗口的历史列表(该属性本身也是一个对象)

       length 窗口内的框架数

       location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变          window.location(用另一个文档取代当前文档),但却不能改变document.location (因为这是当前显示文档的位置)

       name 窗口打开时,赋予该窗口的名字

       opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)

       parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

       self 当前窗口或框架的同义词

       status 状态条中的消息

       top 包含当前框架的最顶层浏览器窗口的同义词

       window 当前窗口或框架的同义词,与self相同

      方法

      alert() 打开一个Alert消息框

      clearTimeout() 用来终止setTimeout方法的工作

      close() 关闭窗口

      confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false

      blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

      focus() 把指定的窗口带到前台(另一个新方法)

      open() 打开一个新窗口

      prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

      setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

      Onload() 页面载入时触发

      Onunload() 页面关闭时触发

      2、什么是document对象

    [document 对象]该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

    属性

      alinkColor 活动链接的颜色(ALINK)

      anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

      anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

      bgColor 文档的背景颜色(BGCOLOR)

      cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

      fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)

      form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)

      forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

      lastModified 文档最后的修改日期

      linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)

      link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

      links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

      location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

      referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

      title 文档的标题((TITLE>)

       vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性

     方法

     clear 清除指定文档的内容

     close 关闭文档流

     open 打开文档流

     write 把文本写入文档

      writeln 把文本写入文档,并以换行符结尾

   区别: 1、window 指窗体。document指页面。document是window的一个子对象。

           2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

25、Js拖动的原理？（必会）

      js的拖拽效果主要用到以下三个事件：

       mousedown 鼠标按下事件

       mousemove 鼠标移动事件

        mouseup 鼠标抬起事件

        当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件：

         document.addEventListener("mousemove", moving, false)和添加鼠标抬起的事件

         document.addEventListener("mouseup",function() { document.removeEventListener("mousemove", moving, false);}, false);这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。

         当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：

        top=鼠标按下时记录的dom的top值+（移动中的y值 - 鼠标按下时的y值）

        left=鼠标按下时记录的dom的left值+（移动中的x值 - 鼠标按下时的x值）;

26、描述浏览器的渲染过程，DOM树和渲染树的区别（必会）

      1、浏览器的渲染过程：

     解析HTML构建 DOM(DOM树)，并行请求 css/image/js

     CSS 文件下载完成，开始构建 CSSOM(CSS树)

     CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)

     布局(Layout)：计算出每个节点在屏幕中的位置

      显示(Painting)：通过显卡把页面画到屏幕上

      2、DOM树 和 渲染树 的区别

      DOM树与HTML标签一一对应，包括head和隐藏元素

      渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

27、dom树和render树之间的关系？（高薪常问）

      1、dom树，css树合并成成渲染树（render树）
      2、DOM树与HTML标签一一对应，包括head和隐藏元素
      3、渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

28、获取到页面中所有的CheckBox怎么做（不适用第三方框架）？（高薪常问）

[AppleScript] 纯文本查看 复制代码

var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];
var len = domList.length;//缓存到局部变量
while (len--) {//使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
    checkBoxList.push(domList[len]);
}
}

29、简单说一下页面重绘和回流？（高薪常问）

       1、什么是回流

        回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了

      2、什么是重绘

        重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color....

        因此得出了一个结论：回流必定触发重绘，而重绘不一定触发回流

30、如何最小化重绘(repaint)和回流(reflow)（高薪常问）

      需要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示

      需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

      缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

      尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）

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

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

      批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

31、Js延迟加载的方式有哪些？（了解）

        js实现延迟加载的几种方法，js的延迟加载有助与提高页面的加载速度

        JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件

        JS延迟加载有助于提高页面加载速度

         一般有以下几种方式：

        defer 属性

        async 属性

        动态创建DOM方式

        使用jQuery的getScript方法

        使用setTimeout延迟方法

         让JS最后加载

       1、defer 属性

        HTML 4.01 为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行标签定义了defer属性。

        用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行

        在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps5.png

        说明：虽然<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行

        HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行

         defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的defer属性

        2、 async 属性

        HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件

        目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps6.png

        async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

        缺点：不能控制加载的顺序

        3、动态创建DOM方式

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps7.png

        4、使用jQuery的getScript()方法

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps8.png

        5、使用setTimeout延迟方法的加载时间

             延迟加载js代码，给网页加载留出更多时间

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps9.png

        6、让JS最后加载

             把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

             例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码，所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

            上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

file:///C:\Users\谁动了~1\AppData\Local\Temp\ksohtml752\wps10.png

这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。

           使用此段代码的步骤：

          6.1）复制上面代码

          6.2）粘贴代码到HTML的标签前 (靠近HTML文件底部)

          6.3）修改“defer.js”为你的外部JS文件名

          6.4）确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

          注意：

          这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来

          在元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

32、IE与标准事件模型有哪些差别？（了解）

        1. 添加事件

         DOM事件模型 – addEventListener

         addEventListener(eventType, handler, useCapture)

         eventType不带有on字符串；

         handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；

         useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。

         IE事件模型 – attachEvent

         attachEvent(eventType, handler)

         eventType 带 on字符串；

          handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；

         2. 事件过程

        DOM事件模型包含捕获阶段和冒泡阶段，IE事件模型只包含冒泡阶段；

        DOM事件模型可使用e.stopPropagation()来阻止事件流