• JavaScript-获取当前元素的相关元素或节点--方法总结


    1.获取当前元素中的第一个子节点

    document.getElementById("uu").firstChild


    2.获取当前元素中的第一个子元素

    document.getElementById("uu").firstElementChild


    3.获取当前元素中的最后一个子节点

    document.getElementById("uu").lastChild


    4.获取当前元素中的最后一个子元素

    document.getElementById("uu").lastElementChild


    5.获取当前元素的父级节点

    document.getElementById("uu").parentNode


    6.获取当前元素的父级子元素

    document.getElementById("uu").parentElement


    7.获取当前元素的子节点

    document.getElementById("uu").childNodes


    8.获取当前元素的子元素

    document.getElementById("uu").children


    9.获取当前元素的前一个兄弟节点

    document.getElementById("three").previousSibling


    10.获取当前元素的前一个兄弟元素

    document.getElementById("three").previousElementSibling


    11.获取当前元素的后一个兄弟节点

    document.getElementById("three").nextSibling


    12.获取当前元素的后一个兄弟元素

    document.getElementById("three").nextElementSibling

    测试所用代码:

    <body>
    <div id="dv">
        <p>层中的第一个p标签</p>哈哈哈
        <span>层中的第二个标签==span</span>
        <ul id="uu">嘎嘎
            <li>火箭</li>
            <li>热火</li>
            <li id="three">湖人</li>
            <li>小牛</li>
            <li>公牛</li>嘿嘿
        </ul>
    </div>
    <script>
        function my$(id) {
          return document.getElementById(id);
        }
    </script>
    <script>
        //获取当前元素中的第一个子节点
        console.log(my$("uu").firstChild);
        //获取当前元素中的第一个子元素
        console.log(my$("uu").firstElementChild);
        //获取当前元素中的最后一个子节点
        console.log(my$("uu").lastChild);
        //获取当前元素中的最后一个子元素
        console.log(my$("uu").lastElementChild);
        //获取当前元素的父级节点
        console.log(my$("uu").parentNode);
        //获取当前元素的父级子元素
        console.log(my$("uu").parentElement);
        //获取当前元素的子节点
        console.log(my$("uu").childNodes);
        //获取当前元素的子元素
        console.log(my$("uu").children);
        //获取当前元素的前一个兄弟节点
        console.log(my$("three").previousSibling);
        //获取当前元素的前一个兄弟元素
        console.log(my$("three").previousElementSibling);
        //获取当前元素的后一个兄弟节点
        console.log(my$("three").nextSibling);
        //获取当前元素的后一个兄弟元素
        console.log(my$("three").nextElementSibling);
    </script>
    </body>
  • 相关阅读:
    Cortex-M3 跳转到指定bin执行
    Keil生成汇编文件、bin文件
    鲁迅
    Cortex-M3的一些概念
    linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结【转】
    c/c++ linux下 移动、删除文件
    c/c++ linux下 获取时间戳
    c++ 生成随机字符串【转】
    c++ <fstream> 读写文件总结
    c++11 std::mutex
  • 原文地址:https://www.cnblogs.com/zhangrunhao/p/6235330.html
Copyright © 2020-2023  润新知