DOM

dom对象的innerText和innerHTML有什么区别？
innerText：只有里面的文本
innerHTML:包含文本和标签

Paste_Image.png

elem.children和elem.children的区别？
elem.children:只包含标签节点
elem.children：包含所有节点

Paste_Image.png

查询元素有几种常见的方法？
1:getElementById(string)
得到一个对象

Paste_Image.png

2:getELementsByTagName(string)
得到一个类似数组的对象

Paste_Image.png

3:getELementsByClassName(string)
得到一个类似数组的对象

Paste_Image.png

4：querySelector(string)
只能得到一个对象

Paste_Image.png

5：querySelectorAll(string)
找到全部得到一个类似数组的对象

Paste_Image.png

如何创建一个元素？如何给元素设置属性？
http://js.jirengu.com/yixikusowo/3/edit

Paste_Image.png

元素的添加、删除？
http://js.jirengu.com/hisupoxopu/4/edit

Paste_Image.png

Paste_Image.png

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0
可以写在html里一个事件只能绑定一个函数

Paste_Image.png

DOM2
同一个事件可以绑定多个函数

Paste_Image.png

attachEvent与addEventListener的区别？

1.attachEvent适用于IE9以下 addEventListener用于现代浏览器

2.参数不同
element.addEventListener(type,listener,useCapture);有三个参数
type:事件名称（前面需要去掉如“on”）
listener:监听的函数
useCapture:监听的方式 true：捕获方式 false:冒泡方式默认冒泡方式

element.attachEvent(type,listener);有两个参数
type:事件名称(前面有如“on”)
lsetener:监听的函数

3.事件的作用域不同

!function addEventListenerVSattachEvent (){
    window.innerText="this is window";
    var oA=document.getElementsByTagName('a')[0];
    if (!oA) return false;
    if (oA.addEventListener){oA.addEventListener("click",function(){
        alert(this.innerText)
    })}
        else if(oA.attachEvent){
            oA.attachEvent("onclick",function(){
                alert(this.innerText)
            })
        }
        else{
            return false;
        }
    }()

Paste_Image.png

解释IE事件冒泡和DOM2事件传播机制？

<div><button>click me<button>
</div>

ie事件冒泡
由目标往上级标签传播点击button button-->div-->body-->html-->document-->window

DOM2
先由最上级来捕获知道目标再由目标往上级标签传递 window-->document-->html-->body-->div-->(事件捕获)button（事件冒泡）-->div-->body-->html-->document-->window

如何阻止事件冒泡？如何阻止默认事件？

阻止事件冒泡
标准 e.stopPropagation() IE e.cancelBubble = true

阻止默认事件
标准e.preventDefault() IE e..returnValue = false

本教程版权归菲龍探雲和饥人谷所有，转载须说明来源

推荐阅读更多精彩内容