前端JS-Day19

动态创建元素：

document.write：直接写入页面流，在页面完全加载后使用会导致页面重绘。

innerHTML和createElement相似，但执行效率不同。创建内容时若采取数组形式，innerHTML耗时优于createElement。

Element类型：

nodeType为1，nodeValue为null，nodeName为元素标签名，parentNode为Document或Element对象。

1.HTML元素：id，title，src，className。

2.属性操作：setAttribute、getAttribute、removeAttribute

3.创建元素：createElement。

Text类型：

nodeType为3，nodeValue值为节点中包含的文本，parentNode为Document对象。不支持子节点！

DOM扩展：

DOM重点核心：

DOM对于元素操作：创建、增、删、改、查、属性操作、事件操作。

创建：1.document.write 2.innerHTML 3.createElement

增：1.appendChild 2.insertBefore

删：1.removeChild

改：1.元素属性：src，href，title... 2.元素内容：innerHTML，innerText 3.表单元素：type、value、disabled 4.元素样式：style、className

查：1.DOM方法：getElementById、getElementByTagName（古老用法，不推荐使用）

　　2.H5新方法：querySelector、querySelectorAll

　　3.节点操作获取：父（parentNode）子（children）兄弟（previousElementSibling、nextElementSibling）

属性操作：（主要对于自定义属性）setAttribute、getAttribute、removeAttribute

事件操作：采取事件源.事件 = 事件处理程序的方式

高级事件：

1.注册事件（绑定事件）:addEventListener、attachEvent

2.删除事件（解绑事件）：

旧方法：onclick = null

新方法：removeEventListener

var divs = document.querySelectorAll('div');
        // 传统解绑
        divs[0].onclick = function() {
            alert('old');
            divs[0].onclick = null;
        }
        
        // 新法解绑
        divs[1].addEventListener('click', fn);
        function fn() {
             alert('new');
             divs[1].removeEventListener('click', fn);
        }

事件注册的区别：

DOM事件流：事件发生时会在元素节点之间按照特定顺序传播，传播过程即事件流。

addEventListener第三个参数为真则执行捕获阶段：按照document->html->body->element顺序

第三个参数为假则执行冒泡阶段：element->body>html->document顺序

var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        father.addEventListener('click', function() {
            alert('father');
        }, true);
        // 会先执行father 再执行son

var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        // 会先执行son 再执行father

事件对象：

e.target和this区别：e.target是触发事件对象，this是绑定事件对象。

var ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
            console.log(this);
             // 返回绑定事件对象(元素)输出ul

            console.log(e.target);
            // 返回触发事件对象(元素)输出li
        });

阻止默认行为：阻止超链接跳转、表单提交等。

a.addEventListener('click', function(e) {
            e.preventDefault();
            // 一般操作
        });

        a.onclick = function(e) { 
            e.preventDefault();
            // 普通浏览器

            e.returnValue;
            // 低版本浏览器

            return false;
            // 无兼容性行为但只限于传统注册方式
        }