js獲取節點

<div id="dome" class="box">
    <ul>
        <li class="l">1</li>
        <li class="l">2</li>
        <li class="l">3</li>
        <li class="l">4</li>
        <li class="l">5</li>
        <li class="l">6</li>
    </
 
ul>
</div>
<input type="text" name="username" id="" value="小明" />
<script type="text/javascript">
    // 一】 獲取節點
    // 1.通過id獲取
    var dome = document.getElementById("dome");
    // 2.通過class獲取(結果為陣列)
    var ul1 = document.getElementsByTagName("ul");
    // 3.通過標籤獲取(結果為陣列)
    var li1 =
 
 document.getElementsByClassName("l");
    // 4.通過name值獲取(結果為陣列)
    var username = document.getElementsByName("username");
    // console.log(username[0].value);
    // 5.CSS 選擇器，可以使用它們的 id, 類, 型別, 屬性, 屬性值等來選取元素。(引數詳情：https://www.runoob.com/cssref/css-selectors.html)
    var li2 = document.querySelector(".l");
 
//獲取第一個元素，結果為一個元素；如果沒找到匹配的元素，則返回null
    var li3 = document.querySelectorAll(".l")//獲取所有元素，結果為一個類陣列
    
    // 二】 獲取子節點
    // 1.通過DOM元素直接獲取
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
    // 2.使用childNodes獲取子節點的時候，childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點資訊
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].childNodes;
    // 3.通過children獲取子元素
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].children;
    // 4.獲取第一個子元素,有空格同樣會獲取空格
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].firstChild;
    // 5.獲取第一個子元素,不會獲取空格
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].firstElementChild;
    // 6. 獲取最後一個子節點
    // lastChild獲取最後一個子節點的方式其實和firstChild是類似的。同樣的lastElementChild和firstElementChild也是一樣的。不再贅餘
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].lastChild;
    var dome1 = document.getElementsByClassName("box")[0].getElementsByTagName("ul")[0].lastElementChild;
    // console.log(dome1);
    // =====================================
    // 三】獲取父節點
    // 1.獲取的是當前元素的直接父元素。parentNode是w3c的標準。
    var l = document.getElementsByClassName("l")[0].parentNode;
    // 2. parentElement獲取父節點
    // parentElement和parentNode一樣，只是parentElement是ie的標準。
    var l = document.getElementsByClassName("l")[0].parentElement;
    // 3. offsetParent獲取所有父節點
    // 一看offset我們就知道是偏移量 其實這個是於位置有關的上下級 ，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點資訊。
    var l = document.getElementsByClassName("l")[0].offsetParent;
    // console.log(l);
    // ======================================
    // 四】獲取兄節點
    //1. 通過獲取父親節點再獲取子節點來獲取兄弟節點
    var brother1 = document.getElementsByClassName("l")[0].parentNode.children[1];
    //2. 獲取上一個兄弟節點
    //在獲取前一個兄弟節點的時候可以使用previousSibling和previousElementSibling。他們的區別是previousSibling會匹配字元，包括換行和空格，而不是節點。previousElementSibling則直接匹配節點。
    var brother2 = document.getElementsByClassName("l")[2].previousElementSibling;
    var brother3 = document.getElementsByClassName("l")[2].previousSibling;
    //3. 獲取下一個兄弟節點
    //同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。
    var brother4 = document.getElementsByClassName("l")[2].nextElementSibling;
    var brother5 = document.getElementsByClassName("l")[2].nextSibling;
</script>

jquery獲取節點

$('.box').parent();//父節點
$('.box').parents();//全部父節點
$('.box').parents('.box1');//含有類名.box1的父節點
$('.box').children();//全部子節點
$('.box').children('li');//元素為li的全部子節點
$('.box').prev();//上一個兄弟節點
$('.box').prevAll();//之前所有兄弟節點
$('.box').next();//下一個兄弟節點
$('.box').nextAll();//之後所有兄弟節點
$('.box').siblings();//所有兄弟節點
$('.box').siblings('.box1');//含有類名.box1的所有兄弟節點
$('.box').find('.box1');//返回被選元素含有類名為.box1的所有後代元素；（返回全部用 * ，多個引數用 ， 隔開）
$('.box').contents();//返回元素裡面所有內容，包括文字和節點
$('.box').contents('.box1');