zoukankan      html  css  js  c++  java
  • JavaScript12行代码获取相关节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="dv">
        <span>这是div中的第一个span标签</span>
    
        <p>这是div中的第二个元素,第一个p标签</p>
        <ul id="uu">
            <li>乔峰</li>
            <li>鹿茸</li>
            <li id="three">段誉</li>
            <li>卡卡西</li>
            <li>雏田</li>
        </ul>
    </div>
    <script src="common.js"></script>
    <script>
        //12行代码,都是获取节点和元素的
        //ul
        var ulObj = document.getElementById("uu");
        //父级节点
        console.log(ulObj.parentNode);
        //父级元素
        console.log(ulObj.parentElement());
        //子节点
        console.log(ulObj.childNodes);
        //子元素
        console.log(ulObj.children);
    
        console.log("===================");
    
        //第一个子节点
        console.log(ulObj.firstChild);
        //第一个子元素
        console.log(ulObj.firstElementChild);
        //最后一个子节点
        console.log(ulObj.lastChild);
        //最后一个子元素
        console.log(ulObj.lastElementChild);
        //某个元素的前一个兄弟节点
        console.log(my$("three").previousNode());
        //某个元素的前一个兄弟元素
        console.log(my$("three").previousElementSibling);
        //某个元素的后一个兄弟节点
        console.log(my$("three").nextNode());
        //某个元素的后一个兄弟元素
        console.log(my$("three").nextElementSibling);
    
        /*
        * 总结:凡是获取节点的代码在谷歌和火狐得到的都是======相关节点
        * 凡是获取元素的代码在谷歌和火狐得到的都是=====相关元素
        * 从"======="往后的(从子节点和兄弟节点开始)凡是获取节点的代码在IE8中得到的是元素,
        * 获取元素的相关代码,在IE8中得到的都是undefined------元素的代码,IE8中不支持
        * */
    </script>
    </body>
    </html>
  • 相关阅读:
    VMWare Server 2.0 安装虚机机网卡驱动找不到
    OutLook The profile name you entered already exists.Enter a different profile name.
    GreyBox基本应用
    Java HashMap工作原理及实现
    C# winform 自定义皮肤制作
    C# Winform 右下角弹出框
    C# winform 最小化到电脑右下角
    C# Winform 的简易聊天程序
    C# winform QQ表情弹出框的制作
    C# 网络编程 TCP编程
  • 原文地址:https://www.cnblogs.com/cuilichao/p/9374799.html
Copyright © 2011-2022 走看看