DOM对象

文档对象模型
        DOM Document Object Model
        js可以通过DOM来操作页面中的元素


        获取DOM元素
            document.getElementById('id')  // 直接获取到的是DOM对象


            // 获取到的是对应DOM对象的集合，是伪数组 如果想要获取集合中的DOM对象，则使用 elements[index]
            document.getElementsByTagName('tagname') 
            document.getElementsByClassName('className')
            document.getElementsByName('name')


            document.querySelector()
            document.querySelectorAll()
            DOM对象就是对象，DOM对象中的属性可以获取
            HTML原生属性
                不是关键字或保留字
                    DOM.属性名
                是关键字或保留字
                    DOM.getAttribute('属性名')
                    DOM.className
            HTML自定义属性
                DOM.getAttribute('属性名')
            
            如果只想给DOM对象设置属性，不出现在HTML中
                DOM.属性名  前提是属性名不能和HTML中原生属性一致


            设置时
                DOM.属性名 = "值"
                DOM.setAttribute(属性名, 属性值)
                
            删除
                DOM.removeAttribute('属性名')


        获取/改变HTML中元素内容
            DOM.innerHTML
            DOM.innerText
                HTML支持标签，text只是文本
                在获取时，text不会获取到标签内容，
                在设置时，text会将标签明文显示
            DOM.value
        
        设置样式
            DOM.style.css属性名 = "属性值"  // 该方式设置的样式会出现在行内
            通过该方式也只能获取到行内样式
            可以通过设置className的方式对其进行解耦
            先定义好css样式，在进行操作


            DOM.style.display = "none"
            DOM.style.display = "block"


            .show{
                display: block;
            }
            .hidden{
                display: none;
            }


            DOM.className = "hidden"
            DOM.className = "show"


            DOM.style.cssText = ""  // 可以同时设置多条样式 google的api，但所有浏览器都兼容
            设置时要使用+=
            DOM.style.cssText += ";样式"


        获取计算后的样式
            getComputedStyle(DOM, null).css样式
            DOM.currentStyle.css样式
        
        绑定事件
            DOM0级  level0
                绑定
                DOM.on事件类型 = function(){


                }


                解绑
                DOM.on事件类型 = null;


                冒泡事件流
                    从事件作用元素沿着DOM树向上直到根节点，沿途中经过的元素如果有相同类型的事件则触发
                捕获事件流
                    从根节点到事件作用元素，沿途中经过的元素如果有相同类型的事件则触发


            DOM2级  level2
                DOM.addEventListener(事件类型, 事件句柄, 是否捕获)
                DOM.removeEventListener(事件类型, 事件句柄, 是否捕获)
                
                IE8
                    DOM.attachEvent('on事件类型', 事件句柄)
                    DOM.detachEvent('on事件类型', 事件句柄)


                标准事件流   
                    先捕获 到达事件源 再冒泡