dom笔记
 <script>
        window.onload = function(){
获取元素方式：
            // document.getElementById();
            // document.getElementsByClassName(); 
            // document.getElementsByName();
            // document.getElementsByTagName();
            
            // document.querySelector();对象
            // document.querySelectorAll();数组
对li添加样式：
            // var li = document.querySelector("#li1");
            // li.parentElement.style.color="red"
            // console.log(li.parentElement.parentElement.parentElement)
            // console.log(li.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);

            // li.style.color="red";
            // li.style.fontSize="12px";
 // 驼峰命名法
            // li.style.background-color="#333";
            // li.style.backgroundColor="#333";
 // 数组命名法
            // li.style["background-color"]="blue";

 // 使用属性 attributes
            // console.log(li.id);
            // console.log(li.attributes["data-id"]);获取的是整个属性
            // console.log(li.attributes["data-id"].name);获取的是属性的值
            // console.log(li.attributes["data-id"])name value;
            // console.log(li.className);
  // 兄弟节点
            // var li=document.querySelector("#li1");
            // console.log(li.nextElementSibling);
            // console.log(li.previousElementSibling);
            // console.log(li.nextSibling);

 // *click单击事件：
            // *change 单选、多选 状态改变，下拉框选项改变 文本框的值改变
            // *鼠标事件：mouseover 鼠标移入事件
            // *mouseout 鼠标移出事件
            // keydowm
            // *keypress
            // keyup
实例：
            // var btn = document.querySelector("button");
            // btn.onclick =function(){
                // console.log(this.value);
                // console.log(this.value)交互控件的值
            // }
            // var li=document.querySelector("#li1");
            // li.onclick=function(){
                // console.log(this.innerHTML);
                // console.log(this.innerText)
                // console.log(this.innerHTML); html
                // console.log(this.innerText);text
                // console.log(this.outerHTML);含有本身
            // }

            var select=document.querySelector("select");
            // select.onclick=function(){
            //     console.log(this.value);
            // }
            select.onchange=function(){
                console.log(this.value);
            }
        }
    </script>
HTML：
<body>
    <ul>
        <li id="li1" class="li" data-id="0" id2="2">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>
    <button value="click">单击</button>
    <select name="" id="">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
    </select>
</body>
</html>
posted on 2021-11-07 20:10  于凡芮  阅读(24)  评论(0)    收藏  举报