JS dom.html

 window.onload=function(){

            //元素 dom

            // document.getElementById();

            // document.getElementsByClassName();

            // document.getElementsByName();

            // document.getElementsByTagName();

 

            //document.querySelector();//对象

            //document.querySelectorAll();//数组

 

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

            // li.parentElement.style.color="red"

            // 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.backgroundColor="#ccc"

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

           

            // 属性 attributes

            // console.log(li.id)

            //console.log(li.data-id)

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

            // console.log(li.className)

 

            //*click

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

        // *mouseover

        // *mouseout

 

             console.log(this.innerText) text

        //     //  console.log(this.innerHTML) html

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

 

var select=  document.querySelector("select")

        select.onchange=function(){

            console.log(this.value)

        }

        }

HTML代码

<select name="" id="">

        <option value="1">选项1</option>

        <option value="2">选项2</option>

        <option value="3">选项3</option>

    </select>