JavaScript--Dom间接选择器

一、Dom间接选择器

　　间接查找的属性　　

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

　　html代码　　

<body>

    <div>

        <div>c1</div>

    </div>

    <div>

        <div id="i1">c2</div>
　　　　　<div></div>

    </div>

    <div>

        <div>c3</div>

    </div>

</body>

　　1.parentElement

　　父节点标签元素

　　 JavaScript--Dom间接选择器-LMLPHP

　　2. children

　　所以子标签

　　 JavaScript--Dom间接选择器-LMLPHP

　　3. previousElementSibling

　　前一个兄弟标签元素

　　 JavaScript--Dom间接选择器-LMLPHP

二、操作标签

　　1.calss操作　

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

　　2.className

　　修改标签class属性

　　 JavaScript--Dom间接选择器-LMLPHP

　　3.classList的添加和删除

　　 JavaScript--Dom间接选择器-LMLPHP

三、事件

　　当鼠标点击某个标签时，就会触发执行某个js代码　　

<body>

    <div onclick="f1(args);">点击</div>

    <script>

        function f1(args) {

            //js代码

        }

    </script>

</body>