前端-DOM和BOM-合集

1.操作DOM的常用API

1.节点查找 document.getElementById.....
        2.节点创建 createElement  cloneNode.....
        3.节点修改 appendChild  insertBefore  
        RemoveChild  replaceChild.....
    	4.元素属性型 setAttribute  getAttribute......

2. BOM-BOM之常用API

    navigator：window中封装浏览器属性和配置信息的对象 
    cookieEnabled：识别浏览器是否启用cookie，返回值true/false
    userAgent：保存了浏览器名称和版本的字符串
    plugins：保存浏览器中所有插件信息的集合，
    每个plugin对象的name属性保存了插件的名称
    screen：保存显示屏信息的对象
    history：保存窗口的历史记录栈
    location：指代当前窗口正在访问的url地址对象 
    location.href：保存了当前窗口正在访问的url地址，
    设置href属性为新url，会在当前窗口打开新url
    location.search()：获取url上面？后面的参数
    location.reload()：刷新当前页面
    location.assign(url)：设置当前窗口的新url
    location.reload(true/false):true —— 无论是否更改，
    都获取更新；false —— 被修改的页面，重新获取，未被修改的页面，从缓冲获取
    定时器：让程序按指定时间间隔，自动执行任务，任务是所有定时器的核心

3.window.onload 和document ready的区别

加载顺序不同

    window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数
    
    Document.ready原生种没有这个方法
    
    jquery中有document ready ready(function),
    在dom文档树加载完之后执行一个函数
    （注意，这里面的文档树加载完不代表全部文件加载完）。

    $(document).ready要比window.onload先执行

出现的次数不同
window.onload只能出来一次，$(document).ready可以出现多次

4.什么是事件代理？请写出一个事件代理的示例

当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，
我们把事件委托到其父对象上，借助事件冒泡机制，
可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，
避免直接把事件添加到多个对象上
动态加载的数据是不能直接进行事件的绑定，这时就需要使用事件委托。
例如：$(body).on(‘click’,’#div’,function(){})

5.IE和DOM事件流的区别

  1.执行顺序不一样、2.参数不一样 3.事件加不加on   4.this指向问题

注：（1）IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)
    （2）IE9开始跟DOM事件流是一样的，都是addEventListener
比较attachEvent和addEventListener：

    1、attachEvent只支持事件冒泡 addEventListener既支持事件冒泡，
    也支持事件捕获
    2、参数：attachEvent事件类型需要on前缀 addEventListener事件类型
    不需要on前缀
    3、如果使用attachEvent对一个元素的目标阶段绑定了多次事件，
    那么会按照绑定顺序的相反顺序进行触发
    如果使用addEventListener对一个元素的目标阶段绑定了多次事件，
    那么会按照绑定顺序进行触发

6.如何阻止事件冒泡和默认事件

阻止浏览器的默认行为

    IE9之前：window.event.returnValue=false;
    IE9+ FF Chrome： e.preventDefault();

停止事件冒泡

    IE9+ FF Chrome：e. stopPropagation();
    event.canceBubble=true;//ie9之前
    原生JavaScript中，return false;只阻止默认行为，不阻止冒泡，
    jQuery中的return false;既阻止默认行为，又阻止冒泡

7.传统事件绑定和符合W3C标准的事件绑定有什么区别？

传统事件绑定 后面绑定的相同的事件会覆盖掉前面的事件
不支持DOM事件流

w3c标准的事件绑定 支持DOM事件流   相同事件都会依次触发

8.希望获取到页面中所有的checkbox怎么做

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];//返回的所有的checkbox
 var len = domList.length;　　//缓存到局部变量
 while (len--) {　　
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

9.Javascript的事件流模型都有什么？ DOM事件流

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡