JavaScript----DOM基础知识（四）DOM选择器

JavaScript----DOM基础知识（四）DOM选择器

在DOM经常要选中标签，下面就详细介绍五种在DOM中的常规操作节点

1.直接查找

<script type="text/javascript">
        //1.document.getElementById('');
        var a = document.getElementById('div');
        console.log(a);
        //2.document.getElementsByTagName('');
        var b = document.getElementsByTagName("span")[1];
        console.log(b);
        //3.document.getElementsByClassName("");
        var c = document.getElementsByClassName('test')[0];
        console.log(c);
        //4.document.getElementsByName('')
        var d = document.getElementsByName('demo')[0];
        console.log(d);
        //5  HTML5新特性
        var e = document.querySelector("#div")[0];
        console.log(e);
        var f = document.getElementById("div").getElementsByClassName("test")[0];
        console.log(f);
    </script>

2.直接查找（通过节点关系查找）

节点关系图：https://blog.youkuaiyun.com/yufanhui/article/details/81002756

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

 

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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