JavaScript----DOM基礎知識（四）DOM選擇器

在DOM經常要選中標簽，下面就詳細介紹五種在DOM中的常規(guī)操作節(jié)點

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.直接查找（通過節(jié)點關系查找）

節(jié)點關系圖：https://blog.csdn.net/yufanhui/article/details/81002756

parentNode          // 父節(jié)點

childNodes          // 所有子節(jié)點

firstChild          // 第一個子節(jié)點

lastChild           // 最后一個子節(jié)點

nextSibling         // 下一個兄弟節(jié)點

previousSibling     // 上一個兄弟節(jié)點

parentElement           // 父節(jié)點標簽元素

children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

lastElementChild        // 最后一個子標簽元素

nextElementtSibling     // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素