<button onclick="fun(this)"></button>
function fun(obj){
    // obj就是當(dāng)前節(jié)點
//可以通過.父節(jié)點/子節(jié)點的方式來獲取節(jié)點。
    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="你說呢">
    <script>
        //通過id獲取
        let li2=document.getElementById("li2");
        // li2變成紅色
        li2.style.color="red";
        //通過class獲取,返回的是一個偽數(shù)組
        let li3=document.getElementsByClassName("li3");
        //li3變成綠色
        li3[0].style.color="green";
        //通過標(biāo)簽名獲取,獲取的也是一個偽數(shù)組
        let li = document.getElementsByTagName("li");
        //第一個li變成粉色
        li[0].style.color="pink";
        //通過querySelector獲取
        let li4=document.querySelector("#li4");
        li4.style.color="blue";
        //通過querySelectorAll()獲取
        let li5=document.querySelectorAll(".li5");
        //class為li5的第一個顏色變?yōu)樽仙?
        li5[0].style.color="purple";
        //通過name屬性獲取表單元素
        let abc=document.getElementsByName("abc");
        //name為abc的第一個元素字體變?yōu)榧t色
        abc[0].style.color="red";
    </script>

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