• DOM-BOM-EVENT(3)


    3.Node常用属性

    childNodes 获取所有子节点

    <div id="wrap">
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
        <div>5555</div>
    </div>
    <script>
        var oWrap = document.getElementById("wrap")
        // 打印wrap下面的所有子节点,返回一个集合,包含文本节点
        console.log(oWrap.childNodes)
        // 获取集合中的某一个
        console.log(oWrap.childNodes[1]) 
    </script>
    

    children 获取所有子节点中的元素节点

    var oWrap = document.getElementById("wrap")
    // 打印wrap下面的所有元素节点
    console.log(oWrap.children)
    // 获取集合中的某一个
    console.log(oWrap.children[1])  
    

    firstChild 获取第一个子节点

    var oWrap = document.getElementById("wrap")
    //返回第一个子节点
    console.log(oWrap.firstChild)
    

    lastChild 获取最后一个子节点

    var oWrap = document.getElementById("wrap")
    //返回最后一个子节点
    console.log(oWrap.lastChild)
    

    parentNode 获取父节点

    var oWrap = document.getElementById("wrap")
    //返回父节点
    console.log(oWrap.parentNode)
    

    previousSibling 获取上一个兄弟节点

    var oWrap = document.getElementById("wrap")
    // 获取第二个节点
    var nowNode = oWrap.children[1]
    //返回上一个兄弟节点
    console.log(nowNode.previousSibling)
    

    nextSibling 获取下一个兄弟节点

    var oWrap = document.getElementById("wrap")
    // 获取第二个节点
    var nowNode = oWrap.children[1]
    //返回上一个兄弟节点
    console.log(nowNode.nextSibling)
    

    参考文档

    Node - Web API 接口| MDN - Mozilla ParentNode.children - Web APIs | MDN

    螺钉课堂视频课程地址:http://edu.nodeing.com

  • 相关阅读:
    [NOI Online 2021 提高组] 愤怒的小 N
    CF1474F 1 2 3 4 ...
    CF1466H Finding satisfactory solutions
    CF1336F Journey
    [PKUSC2021]代金券
    如何科学地设计对拍随机种子
    CF1168E Xor Permutations
    「JOISC 2019 Day2」两种运输
    springboot json参数
    springboot整合webserver应用
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/12028039.html
Copyright © 2020-2023  润新知