一、 方法

    getElementById
    getElementsByClassName
    getElementsByTagName
    getElementsByName
    querySelector
    querySelectorAll

二、DOM节点的属性

    childNodes 子节点(文本节点和元素节点)
    children 子节点 元素节点
    firstChild
    lastChild
    parentNode
    previousSibling
    nextSibling

**备注： 节点类型：元素节点、文本节点、属性节点、注释节点....... 节点关系：兄弟、父子 修改页面的样式

三、获取样式

对象.style.样式名 行内样式

getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下

currentStyle IE低版本

兼容性写法：

 样式的兼容性写法
        // function getStyle(o, property) {
        //     if (window.getComputedStyle) {
        //         return getComputedStyle(o)[property]
        //     }
        //     return o.currentStyle[property]
        // }
        function getStyle(o, property) {
            var tag = 'getComputedStyle' in window
            return tag ? getComputedStyle(o)[property] : o.currentStyle[property]
        }

四、修改样式

节点.style.样式名=值

修改页面的内容      修改文本内容（闭合标签、表单元素）
innerHTML           innerText

value 属性

** 获取**
     
    节点.属性名
    节点[属性名]         
    节点.getAttribute(属性名)         
** 设置**        
    节点.属性名=值      
    节点[属性名]=值     
    节点.setAttribute(属性名,值)

三种属性方案的区别：

getAttribute和setAttribute可以获取自定义标签属性的值 页面节点操作 创建节点：

createElement 创建元素节点

createTextNode 创建文本节点

增

appendChild 末尾追加子元素

insertBefore 指定位置插入元素

var o = document.querySelector("#box")
        var op = document.createElement('p')
        op.innerHTML = 'hello world';
        o.appendChild(op)
 
        var op1 = document.createElement('p')
        op1.innerHTML = '你好，';
        o.appendChild(op1)
 
        var myLink=document.createElement("a")
        myLink.href='#'
        myLink.innerHTML='我是超链接'
        // o.appendChild(myLink)
        o.insertBefore(myLink,op1)

删

   removeChild()
   remove()

改

    replaceChild() 替换

五、事件

事件的机制：事件不会自动执行，需要触发才可以执行

1、添加事件

HTML标签中添加
脚本绑定 节点.on-事件名 注意：不能为同一个节点对象添加多个同名事件
绑定
addEventListener() 不兼容低版本IE
attachEvent()
  /*
            事件兼容性写法
            @nodeObj   事件绑定对象
            @eventName  事件名称(不含on)
            @callback   事件函数
        */
        function addEvent(nodeObj, eventName, callback) {
            if (nodeObj.addEventListener) {         //标准浏览器
                nodeObj.addEventListener(eventName, callback, false);
                return;
            }
            nodeObj.attachEvent('on' + eventName, callback)       //低版本IE
        }

2、移除事件

removeEventListener

detachEvent

null

        /*
            事件移除兼容性写法
            @nodeObj   事件绑定对象
            @eventName  事件名称(不含on)
            @callback   事件函数
        */
        function removeEvent(nodeObj, eventName, callback) {
            if (nodeObj.removeEventListener) {         //标准浏览器
                nodeObj.removeEventListener(eventName, callback);
                return;
            }
            nodeObj.detachEvent('on' + eventName, callback)       //低版本IE
        }

3、事件对象、事件流

事件对象：是对事件的一个抽象表述。当事件触发时，浏览器会将事件对象传递
事件对象的属性：
type 事件类型
srcElement(IE低版本)/target(标准浏览器) 事件绑定者
clientX/clientY
pageX/pageY
screenX/screenY
altKey 是否按下alt键 true/false
ctrlKey 是否按下了Ctrl键 true/false
keyCode 键码

事件对象的兼容性写法：
  e = e || window.event;

4、事件流：事件的传递机制（捕获、冒泡）

冒泡：
阻止事件冒泡
  e ? e.stopPropagation() : window.event.cancelBubble = true
捕获：

键盘事件

keydown keyup keypress input

事件默认行为

 addEventListener()   e.preventDefault()
 节点.事件             return false;
 attachEvent()        e.returnVlaue=false
 

事件委托 :

又可以称为事件代理 将事件委托给父元素，子元素触发事件(冒泡机制)

 box.onclick=function(e){
            // console.log(e.target.nodeName);
            if(e.target.nodeName=='BUTTON'){
                alert("哈哈哈哈，终于知道")
            }
            // alert("我是一个按钮")
        }
 
        document.querySelector('button').onclick = function () {
            // box.innerHTML =box.innerHTML+ "<button>按钮</button>";
            var btn = document.createElement('button')
            btn.innerHTML = '按钮'
            box.appendChild(btn)
        }

滚轮事件

onmousewheel 谷歌、IE

wheelDelta 上：正值 下：负值

 var box = document.querySelector("div");
        box.onmousewheel = function (e) {
            // console.log(e.wheelDelta);//上 正值   下：负值
            // console.log(e.wheelDelta);
            if (e.wheelDelta > 0) {
                console.log(1,this.offsetHeight);
                this.style.height = this.offsetHeight - 5 + 'px'
            } else {
                console.log(2,this.offsetHeight);
                this.style.height = this.offsetHeight + 5 + 'px'
            }
        }
addEventListener("DOMMouseScroll") 火狐
detail 上：负值 下：正值

 //火狐
        box.addEventListener("DOMMouseScroll", function (e) {
            // console.log(e.wheelDelta);//上 正值   下：负值
            // console.log(e.detail);      // 上：负值   下：正值
            if (e.detail < 0) {
                console.log(1, this.offsetHeight);
                this.style.height = this.offsetHeight - 5 + 'px'
            } else {
                console.log(2, this.offsetHeight);
                this.style.height = this.offsetHeight + 5 + 'px'
            }
        })

其它事件：

onfocus

onblur

onresize 尺寸改变

....