JavaScript——DOM节点动态操作

作者: 紫荆峰 | 来源:发表于2016-12-03 14:38 被阅读0次

DOM (javascript DOM节点操作)
JavaScript——DOM节点动态操作
jQuery-DOM篇
dom操作
【前端】-029-DOM编程-节点操作
JavaScript DOM常用操作
DOM动态集合
【DOM】DOM的操作（增删改查）
javascript笔记9
前端面试题总结（算法）

0.前言

上一节把每个的节点操作都演示一遍，可累死我了，今天就不一一演示了，直接上代码，注释在代码里，写的很详细。至于运行效果，大家就自己复制粘贴吧，抱歉啊！！！

1.正文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点动态操作</title>
    <style type="text/css">
        #box{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #box2{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>1</p>
        <p>2</p>
    </div>
    <script type="text/javascript">
        
        //创建元素节点
        var jsDiv = document.createElement("div");
        jsDiv.id = "box1";
        console.log(jsDiv);

        
        //添加子节点(这个是添加到最后)
        //document.body === body标签 === body元素节点
        //公式：元素节点（parentNode）.appendChild(childNode)
        //功能：在parentNode节点的所有子节点后面添加一个子节点
        document.body.appendChild(jsDiv);


        //添加子节点（这个是添加到指定位置）
        //公式：元素节点（parentNode）.insertBefore(newdNode,currentNode);
        var jsDiv2 = document.createElement("div");
        jsDiv2.id = "box2"
        // document.body.insertBefore(jsDiv2,jsDiv);
        jsDiv.parentNode.insertBefore(jsDiv2,jsDiv); //推荐使用这个方法。


        //创建文本节点
        var textNode = document.createTextNode("lsls");
        
        //添加文本节点
        var jsDivBox1 = document.getElementById("box");
        var allNodes = jsDivBox1.childNodes; //所有子节点
        var p = allNodes[1];
        p.appendChild(textNode);
        console.log(allNodes);


        //替换节点
        //公式：旧节点的父节点.replaceNode(新节点,旧节点);
        //注意：下面的语句会将p在jsDivBox1里面移除
        // document.body.replaceChild(p,jsDiv2);
        var newDiv = document.createElement("div");
        newDiv.style.width = "100px";
        newDiv.style.height = "100px";
        newDiv.style.backgroundColor = "blue";
        jsDiv2.parentNode.replaceChild(newDiv,jsDiv2);




        //复制节点
        //只复制标签本身,不包含子节点
        var con1 = jsDivBox1.cloneNode();
        console.log(con1);
        //包含了所有的后代节点
        var con2 = jsDivBox1.cloneNode(true);
        console.log(con2);




        //删除节点
        //公式：待删除节点.removeChild(待删除节点)
        newDiv.parentNode.removeChild(newDiv);



        //offsetParent(参照父元素)
        console.log(p.offsetLeft);
        var ofP = p.offsetParent;
        console.log(ofP);
    </script>
</body>
</html>

offsetParent.png