zoukankan      html  css  js  c++  java
  • javascript DOM节点操作

    创建节点

    createElement

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>javascript</title>
    </head>
    <body>
        <div id="box">
            <p class="testNode">---------a测试a--------</p>
            <p class="testNode">---------b测试b--------</p>
            <p class="testNode">---------c测试c--------</p>
        </div>
    <script>
    window.onload = function () {
        // 1.创建节点
        var aNode = document.createElement('a');
    
        // 2.为节点对象添加属性
        aNode.href   = 'https://www.baidu.com';
        aNode.text   = '百度一下,你就知道';
        aNode.target = '_blank';
    
        // 3.获取 "当前节点"
        var box   = document.getElementById('box');
        // 4.将 aNode 这个节点追加到 box 中, appendChild 追加到最后
        // box.appendChild(aNode);
    
        // 5 插入到指定节点的前面
        var referenceNode = document.querySelectorAll('.testNode')[1];
        // 将 要插入节点 插入到 参照节点之前   box.insertBefore(要插入节点, 参照节点);
        box.insertBefore(aNode, referenceNode);
    }
    </script>
    </body>
    </html>
    

    复制(克隆)节点

    cloneNode

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>javascript</title>
    </head>
    <body>
        <div class="box">
            <p>--------a测试节点a---------</p>
            <p>--------b测试节点b---------</p>
            <p>--------c测试节点c---------</p>
        </div>
    <script>
    window.onload = function () {
        // 复制节点:  新节点 = 原节点.cloneNode(参数); 参数可选复制节点
        
        // 1.获取需要拷贝的节点
        var box = document.getElementsByClassName('box')[0];
    
        // 2.克隆节点
        // var newNode = box.cloneNode(false); // 浅克隆: 只拷贝需要拷贝的节点(默认)
        var newNode = box.cloneNode(true);     // 深克隆: 拷贝节点中所有子节点
    
        // 3.将拷贝的内容追加到box中
        box.appendChild(newNode);
    }
    </script>
    </body>
    </html>
    

    删除节点

    1. remove 自杀
    2. removeChild 他杀
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>javascript</title>
    </head>
    <body>
        <div id="box">
            <p class="testNode">---------a测试a--------</p>
            <p class="testNode">---------b测试b--------</p>
            <p class="testNode">---------c测试c--------</p>
        </div>
    <script>
    window.onload = function () {
        // 删除节点   删除 <p class="testNode">---------b测试b--------</p> 这个节点
        // 1.获取 "需要删除的节点"
        var delNode = document.getElementById('box').children[1];
    
        // 2.获取 "需要删除的节点" 的 父节点并调用 removeChild 删除需要删除的节点
        // delNode.parentNode.removeChild(delNode);   // 他杀
    
        // 2.直接删除节点(自杀)    推荐使用
        delNode.remove();
        // 可简写为 document.getElementById('box').children[1].remove();
    }
    </script>
    </body>
    </html>
    

    替换节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>replaceNode</title>
        <style>
            #box{
                 100px;
                height: 100px;
                background: #000;
            }
        </style>
    </head>
    <body>
        <button id="replace">replace</button>
        <div id="box"></div>
    <script>
    window.onload = function () {
        document.getElementById('replace').onclick = function () {
            var btnNode = document.createElement("button");
            btnNode.innerText = 'button';
            document.body.replaceChild(btnNode, document.getElementById('box'));
        };
    };
    </script>
    </body>
    </html>
    
  • 相关阅读:
    A. Vanya and Table
    B. Chris and Magic Square
    A. Bus to Udayland
    关于cout输出精度问题
    1087 1 10 100 1000
    1080 两个数的平方和
    CODE[VS] 1842 递归第一次
    CODE[VS] 1501 二叉树最大宽度和高度
    少年中国说
    CODE[VS] 1475 m进制转十进制
  • 原文地址:https://www.cnblogs.com/liaohui5/p/10581668.html
Copyright © 2011-2022 走看看