11.5

dom

    document.getElementById();

            document.getElementsByClassName();

            document.getElementsByName();

            document.getElementsByTagName();

            document.querySelector();对象

            document.querySelectorAll();数组

            var li = document.querySelector("#li1");

            console.log( li.parentElement.parentElement.parentElement.parentElement)

            console.log( li.parentNode.parentNode.parentNode.parentNode)

            var ul = document.querySelector("ul");

            console.log(ul.childNodes) 文本节点

            console.log(ul.children) 不包括文本节点

            var li = document.querySelector("#li1");

            console.log(li.nextElementSibling)

            console.log(li.previousElementSibling)

            console.log(li.nextSibling)

            样式 style

            var li = document.querySelector("#li1");

            li.style.color="red"

            li.style.background-color="#ccc";

            li.style.backgroundColor="#ccc";

            li.style["background-color"]="#ccc";

            属性 attributes

            console.log(li.id)

            console.log(li.data-id)

            console.log(id["data-id"])

            console.log(li.attributes["data-id"]) name value

            console.log(li.className)

            *click

            *change  单选\多选状态改变  下拉框选项改变  文本框的值改变

            *mouseover

            *mouseout

            keydown

            *keypress

            keyup

            var btn = document.querySelector("button");

            btn.onclick = function(){

                console.log(this.value) 交互控件的值

            }

            var li = document.querySelector("#li1");

            li.onclick = function(){

                console.log(this.innerHTML) html

                console.log(this.innerText) text

                console.log(this.outerHTML) 含有本身

            }

 //获取鼠标位置

                // console.log(e.x,e.y)

                span.style.top=e.y+"px";

                span.style.left=e.x+"px"