DOM, 事件

• dom对象的innerText和innerHTML有什么区别？
  • Node.innerText

    • 这个API不是W3C标准的API，在FF45之间的版本不支持，现在已经支持

      
      
      

      2016-08-24_151412.png
    • 表示节点和它的子节点的文本内容

hello I'm a.
    
hello I'm aa.
        
hello I'm aaa.
    

2016-08-24_151323.png

- 是可以修改的的，在如果在父节点上修改，会导致所有的子节点内容被改写

a.innerText = "modified"

2016-08-24_153513.png

- IE10和IE11中，如果 textarea有 placeholder属性，会获取 placeholder作为 textarea的value
- Element.innerHTML
- 这是个很强大的API，是符合W3C标准的API，但是在IE会有兼容问题，例如

2016-08-24_153733.png

1. IE8标签自动大写
2. 在IE9及以下，这些标签是只读的

col, colgroup, frameset, html, head, style, table, tbody, tfoot, thead, title, and tr

        3. 在IE10和IE11，如果`textarea`有`placeholder`属性，会获取`placeholder`作为`textarea`的value
    - 表示元素后代的所有HTML内容

2016-08-24_153901.png

- 常用来添加一个子节点，或者删除子节点
- 添加子节点

var ul = document.getElementsByTagName('ul')[0],
    lst = document.getElementsByTagName('li'),
    li = document.createElement('li')
ul.appendChild(li)
li.innerHTML = '赵六'
//不推荐用法，会导致ul的节点状态更新，原本的样式和事件都会失效
// ul.innerHTML+='
赵六
'

        - 删除子节点

lst[0].innerHTML = ''

• elem.children和elem.childNodes的区别？

    

        li1
    
    

        li2
    
    

        li3
    

2016-08-24_180753.png

- Element.children
- 非W3C标准
- 是一个只读属性，返回一个包含当前元素的子元素集合，HTMLCollection（live）
- IE9之前的版本会包含注释节点
- Element.childNodes
- W3C标准
- 也是只读属性，返回指定节点的子节点集合，NodeList（live），返回的子节点类型包括元素节点、注释节点、文本节点。常常会把列表之间的回车当成文本节点返回

• 查询元素有几种常见的方法？
  • document.getElementById(idName)
    • 返回单一的元素
  • document|ele.getElementsByTagName(tagName)
    • 返回一个HTMLCollection（live）
  • document|ele.getElementsByClassName(className)
    • 返回一个HTMLCollection（live）
    • IE9之前的版本不支持
  • document|ele,querySelector(selection)
    • 返回匹配到的第一个元素
    • IE8不匹配id选择器的兄弟选择器(#a+p)
  • document|ele.querySelectorAll(selection)
    • 返回NodeList（non-live）
    • IE8不匹配id选择器的兄弟选择器(#a+p)
• 如何创建一个元素？如何给元素设置属性？
  • 创建元素，document.createElement(tagName)，传入的参数是一个标签
  • 设置属性主要有两种方法
    • element.setAttribute(name,value)能设置自定义的属性，可以直接传入属性名
    • 通过点直接设置，但是有些属性不能通过属性名直接访问，例如class，需要通过className来访问，例如style中的background-color也不能直接访问，需要改成驼峰式命名style.backgroundColor
• 元素的添加、删除？
  • 元素添加
    • Node.appendChild(node)，将一个节点插入到指定父节点的最后，其中Node是指定的父节点
    • Node.insertBefore(new，ref)，在当前的某个子节点之前再插入一个子节点
  • 元素删除
    • Node.removeChild(child)，从某个父节点中移除指定子节点，Node是指定的父节点，如果要使用这个方法删除某个节点，需要先访问到它的父节点

node.parentNode.removeChild(node)

• DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

    
张三
    
李四
    
王五

 

- DOM2级
    - 可以给一个事件注册多个监听器
    - 更加精细的控制事件监听器的触发（即可以选择捕获或者冒泡）
    - IE9之前不支持
- DOM0级
    - 简单
    - 跨浏览器

• attachEvent与addEventListener的区别？
  • addEventListener()是W3C标准，但是在IE9之前不支持，addEventListener()，接受三个参数，第一个参数是事件类型，例如'click'，第二个参数是事件处理程序，第三个参数可以选择是注册捕获事件还是冒泡事件
  • attachEvent()是IE实现的与DOM2级类似的方法，但是从IE11开始已经不再支持，attachEvent()，接受两个参数，第一个参数是事件类型，但是与addEventListener的参数不同，需要加on，例如'onclick'，第二个参数是事件处理程序，没有第三个参数，默认是冒泡事件
• 解释IE事件冒泡和DOM2事件传播机制？
  • 事件冒泡，当浏览器发展到第四代，IE和网景分别提出了相反的事件传播机制，其中IE提出的就是事件冒泡，事件冒泡就是，事件从最具体的元素（文档中嵌套最深的元素）向最不具体的元素传播

    

        

            
点我吧
        
    


//输出aaaa，aaa，aa，a

- DOM2级事件传播机制，W3C采用了IE和网景的折中方式，先事件捕获，再事件冒泡，但是事件是注册在捕获过程还是冒泡过程是可选的，事件捕获就是，从文档中最不具体的那个元素向最具体的那个元素传播

2016-08-24_215943.png

• 如何阻止事件冒泡？ 如何阻止默认事件？
  • 阻止事件冒泡
    • DOM2级

event.stopPropagation()

    - IE中取消冒泡并不是一个方法，而是一个属性，默认是false

event.cancelBubble = true

- 阻止默认事件
    - DOM2级

event.preventDefault()

    - IE中取消默认事件也是一个属性，默认是true

event.returnValue = false