js/jquery 获取节点

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');