js节点属性的创建添加删除

快来打我* 2022-07-13 23:16 202阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
    //--------------------------节点的访问关系---------------------
                //节点的访问关系是以属性形式存在
    
                //1.box1是box的父节点
                //    var box2 = document.getElementsByClassName("box2")[0];
                //    var box2 = document.getElementById("box2")
                //    console.log(box2.parentNode);
                //
                //    //2.nextElementSibling下一个兄弟节点
                //    console.log(box2.nextElementSibling);
                //
                //    //firstElementChild第一个子节点
                //    console.log(box2.parentNode.firstElementChild);
                //
                //    //所有子节点
                //    console.log(box2.parentNode.childNodes);
                //    console.log(box2.parentNode.children);
    
    
    
    //---------------------------节点的操作-----------------------------
                //节点的操作
                //1.创建
                var aaa = document.createElement("li");
                var bbb = document.createElement("afadsfadsf");
                console.log(aaa);
                console.log(bbb);
    
                //添加
                var box1 = document.getElementsByClassName("box1")[0];
                box1.appendChild(aaa);
                box1.insertBefore(bbb,aaa);
    
                //删除
                box1.removeChild(bbb);
                aaa.parentNode.removeChild(aaa);//自杀，自己删除自己
    
                //克隆
                var ccc = box1.cloneNode();
                var ddd = box1.cloneNode(true);
                console.log(ccc);
                console.log(ddd);
    
    
    
    //-----------------------------节点的属性-------------------------------
                window.onload = function () {
    
                    var eleNode = document.getElementsByTagName("img")[0];
    
                    //属性、赋值获取两种方式
                    //1.元素节点.属性或者元素节点[属性]
                    eleNode.src = "image/jd2.png";
                    eleNode.aaa = "bbb";
                    console.log(eleNode.aaa);
                    console.log(eleNode.src);
                    console.log(eleNode.tagName);
                    console.log(eleNode["title"]);
                    console.log(eleNode["className"]);
                    console.log(eleNode["alt"]);
    
                    //2.元素节点.方法();
                    console.log(eleNode.getAttribute("id"));
                    eleNode.setAttribute("id","你好");
                    eleNode.setAttribute("ccc","ddd");
    
                    eleNode.removeAttribute("id");
                }
    //           <img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>
    </script>
    </body>
    </html>