<button onclick="fun(this)"></button>
function fun(obj){
    // obj就是當(dāng)前節(jié)點(diǎn)
//可以通過(guò).父節(jié)點(diǎn)/子節(jié)點(diǎn)的方式來(lái)獲取節(jié)點(diǎn)。
    obj.nextSiling;
}

<ul>
        <li>li1</li>
        <li id="li2">li2</li>
        <li class="li3">li3</li>
        <li id="li4">li4</li>
        <li class="li5">li5</li>
    </ul>
    <input type="text" name="abc" value="你說(shuō)呢">
    <script>
        //通過(guò)id獲取
        let li2=document.getElementById("li2");
        // li2變成紅色
        li2.style.color="red";
        //通過(guò)class獲取,返回的是一個(gè)偽數(shù)組
        let li3=document.getElementsByClassName("li3");
        //li3變成綠色
        li3[0].style.color="green";
        //通過(guò)標(biāo)簽名獲取,獲取的也是一個(gè)偽數(shù)組
        let li = document.getElementsByTagName("li");
        //第一個(gè)li變成粉色
        li[0].style.color="pink";
        //通過(guò)querySelector獲取
        let li4=document.querySelector("#li4");
        li4.style.color="blue";
        //通過(guò)querySelectorAll()獲取
        let li5=document.querySelectorAll(".li5");
        //class為li5的第一個(gè)顏色變?yōu)樽仙?
        li5[0].style.color="purple";
        //通過(guò)name屬性獲取表單元素
        let abc=document.getElementsByName("abc");
        //name為abc的第一個(gè)元素字體變?yōu)榧t色
        abc[0].style.color="red";
    </script>

//通過(guò)每一層.獲取節(jié)點(diǎn):
let b=document.getElementById("li01").querySelector("span");
alert(b.innerHTML);
//通過(guò)childNodes獲取子節(jié)點(diǎn):返回的也是子節(jié)點(diǎn)集合，是一個(gè)數(shù)組的格式。他會(huì)把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。
let c=document.getElementById("li02").childNodes;
alert(c[0].innerHTML);
//通過(guò)children獲取，不過(guò)他也是數(shù)組，按照數(shù)組的形式訪(fǎng)問(wèn)就行
let d=document.getElementById("li03").children[0];
alert(d.innerHTML);
//獲取第一個(gè)子節(jié)點(diǎn)：firstChild
let e=document.getElementById("li04").firstChild;//會(huì)匹配換行和空格
let f=document.getElementById("li04").firstElementChild;
//獲取最后一個(gè)子節(jié)點(diǎn)：
let g=document.getElementById("li05").lastChild;//會(huì)匹配換行和空格
let h=document.getElementById("li05").lastElementChild;

let i=document.getElementById("li05").parentNode;
let j=document.getElementById("li05").parentElement;

let k=document.getElementById("li05").offsetParent;

var brother1 = document.getElementById("li05").parentNode.children[1];

var brother2=document.getElementById("li05").previousElementSibling;
var brother2=document.getElementById("li05").previousSibling;

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;