JS之层次和节点

层级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级关系</title>
</head>
<body>

<!--元素不换行的样式-->
<!--<ul id="ul"><li>青岛理工</li><li id="li2">山东科技</li><li>清华大学</li></ul>-->

<ul id="ul">
    <li>青岛理工</li>
    <li id="li2" class="">山东科技</li>
    <li>清华大学</li>
</ul>
</body>
<script>

    /*parentNode:通过子元素获取父元素*/
    var li2 = document.getElementById("li2");
    var ul = li2.parentNode;
    console.log(ul);
    
    /*childNodes:通过父元素去查找所有的子元素,
     有bug，元素和元素之间不允许换行*/
    var ul = document.getElementById("ul");
    var lis = ul.childNodes;
    console.log(lis);

    /*firstChild：通过父元素去查找第一个子元素
     *             有bug，元素和元素之间不允许换行
     * firstElementChild:通过父元素去查找第一个子元素，
     *                   允许元素换行*/
    var ul = document.getElementById("ul");
    //    var li1 = ul.firstChild;
    var li1 = ul.firstElementChild;
    console.log(li1);

    /*lastChild：通过父元素去查找最后一个子元素
     *             有bug，元素和元素之间不允许换行
     * lastElementChild:通过父元素去查找最后一个子元素，
     *                   允许元素换行*/
    var ul = document.getElementById("ul");
    //    var li1 = ul.lastChild;
    var li1 = ul.lastElementChild;
    console.log(li1);

    var li2 = document.getElementById("li2");
    //    var li1 = li2.previousSibling;                /*获取前一个同级节点*/
    var li1 = li2.previousElementSibling;
    /*无bug*/
    //    var li3 = li2.nextSibling;                    /*获取后一个同级节点*/
    var li3 = li2.nextElementSibling;
    /*无bug*/
    console.log(li1);
    console.log(li3);

</script>
</html>

创造和增加节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创造和增加节点</title>
</head>
<body>
<img src="../../../img/f3_Android1.png" alt="" id="oldImg">
<button onclick="create()">新增图片</button>
<button onclick="clone()">复制图片</button>
</body>
<script>
    /*创造和增加节点*/
    function create() {
        var newImg = document.createElement("img");
        newImg.src = "../../../img/f3_Android2.png";
        var oldImg = document.getElementById("oldImg");
        document.body.insertBefore(newImg, oldImg);
    }
    function clone() {
        var oldImg = document.getElementById("oldImg");
        var newImg = oldImg.cloneNode(false);
        document.body.appendChild(newImg);
    }
</script>
</html>

作业练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>
<ul id="ul">
    <!--<li>列表项0</li>-->
    <li id="li1">列表项1</li>
    <li>列表项2</li>
    <li id="li3">列表项3</li>
    <!--<li>列表项3</li>-->
    <li>列表项4</li>
    <li>列表项5</li>
    <!--<li>列表项6</li>-->
</ul>
<button onclick="insert1()">新增列表项0</button>
<button onclick="clone3()">再增列表项3</button>
<button onclick="insert6()">新增列表项6</button>
</body>
<script>
    function insert1() {
        var li0 = document.createElement("li");             //创建一个新的列表项
        li0.innerHTML = "列表项0";                           //给新的列表项填充内容
        var li1 = document.getElementById("li1");             //找到li1
        var ul = document.getElementById("ul");             //找到ul
        ul.insertBefore(li0, li1);                           //在li1前边加li0，就是排序
    }
    function insert6() {
        var li6 = document.createElement("li");             //新增列表项
        li6.innerHTML = "列表项6";                             //列表项填内容
        var ul = document.getElementById("ul");             //找到ul
        ul.appendChild(li6);                                //在ul后边新增li6，即把li6贴在最后边
    }
    function clone() {
        var li3 = document.getElementById("li3");
        /*clone():
         * 参数为false：只复制标签，标签内的内容和子元素不复制
         * 参数为true：不仅复制标签，标签内的内容和子元素也复制*/
        var newLi3 = li3.cloneNode(true);
        ul.insertBefore(newLi3, li3);
    }
</script>
</html>

remove和replace节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>remove和replace节点</title>
</head>
<body>
<button onclick="remove()">删除图片</button>
<button onclick="replace()">替换图片</button>
<img src="../../../img/f3_Android1.png" alt="" id="img1">
</body>
<script>
    function remove() {
        var img = document.getElementById("img1");
        document.body.removeChild(img)
    }
    function replace() {
        var img = document.getElementById("img1");
        var newImg = document.createElement("img");
        newImg.src = "../../../img/f3_Android3.png";
        document.body.replaceChild(newImg, img);                 //用newImg替换img
    }
</script>
</html>

相关阅读:
delphi7调用webservice Java 传入参数为空
 delphi客户端调服务器端的java webservice如何在参数中传对象？转
 DELPHI7如何调用带参数的JAVA WebService
Delphi调用java开发的WebService,传入参数出错
 cxgrid按条件计算合计值 TcxTreeList计算合计值
 收款凭证
 delphi TCXTreelist 通过代码控制行的可编辑性
 win7 共享
 单到冲回的暂估方式，暂估入库的操作流程是怎样的？
js常用函数和常用技巧
原文地址：https://www.cnblogs.com/haloxinghong/p/7307676.html