DOM, 事件

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

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

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

<div id="a">hello I'm a.
    <div id="aa">hello I'm aa.
        <div id="aaa">hello I'm aaa.</div>
    </div>
</div>
<script>
    var a = document.getElementById('a')
    console.log(a.innerText)
</script>

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 = '<a href="">赵六</a><img src="" alt="">'
//不推荐用法，会导致ul的节点状态更新，原本的样式和事件都会失效
// ul.innerHTML+='<li><a href="">赵六</a><img src="" alt=""></li>'

        - 删除子节点

lst[0].innerHTML = ''

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

<ul>
    <li>
        <a href="">li1</a>
    </li>
    <li>
        <a href="">li2</a>
    </li>
    <li>
        <a href="">li3</a>
    </li>
</ul>
<script>
    var ul = document.getElementsByTagName('ul')[0]
    console.log(ul.children)
    console.log(ul.childNodes)
</script>

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级在事件监听使用方式上有什么区别？

<ul id="lst-wrap">
    <li class="lst">张三</li>
    <li class="lst">李四</li>
    <li class="lst">王五</li>
</ul>
<script>
    var ul = document.getElementById('lst-wrap'),
        li = ul.querySelectorAll('.lst')
    //DOM0级
    // for (var i = 0; i < li.length; i++) {
    //     li[i].onclick = function(event) {
    //         console.log(event.target.innerText)
    //     }
    // }
    //DOM2级事件委托
    function lstClick(event) {
        if (event.target.tagName === 'LI') {
            console.log(event.target.innerText)
        }
    }
    ul.addEventListener('click',lstClick)
</script> 

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

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

<div id="a">
    <div id="aa">
        <div id="aaa">
            <div id="aaaa">点我吧</div>
        </div>
    </div>
</div>
<script>
    var a = document.getElementById('a'),
        aa = document.getElementById('aa'),
        aaa = document.getElementById('aaa'),
        aaaa = document.getElementById('aaaa')
    a.addEventListener('click',function() {
        console.log('a')
    })
    aa.addEventListener('click',function() {
        console.log('aa')
    })
    aaa.addEventListener('click',function() {
        console.log('aaa')
    })
    aaaa.addEventListener('click',function() {
        console.log('aaaa')
    })
</script>
//输出aaaa，aaa，aa，a

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

<script>
    var a = document.getElementById('a'),
        aa = document.getElementById('aa'),
        aaa = document.getElementById('aaa'),
        aaaa = document.getElementById('aaaa')
    a.addEventListener('click',function() {
        console.log('冒泡a')
    })
    aa.addEventListener('click',function() {
        console.log('冒泡aa')
    })
    aaa.addEventListener('click',function() {
        console.log('冒泡aaa')
    })
    aaaa.addEventListener('click',function() {
        console.log('冒泡aaaa')
    })
    a.addEventListener('click',function() {
        console.log('捕获a')
    },true)
    aa.addEventListener('click',function() {
        console.log('捕获aa')
    },true)
    aaa.addEventListener('click',function() {
        console.log('捕获aaa')
    },true)
    aaaa.addEventListener('click',function() {
        console.log('捕获aaaa')
    },true)
</script>

2016-08-24_215943.png

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

event.stopPropagation()

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

event.cancelBubble = true

- 阻止默认事件
    - DOM2级

event.preventDefault()

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

event.returnValue = false