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

Paste_Image.png

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

click me
  

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

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