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

最新推荐文章于 2024-05-28 00:30:00 发布

约德尔蒙

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量6.5k

点赞数 2

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242173

版权

Js 专栏收录该内容

64 篇文章 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>

约德尔蒙

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js节点属性的创建添加删除

//--------------------------节点的访问关系--------------------- //节点的访问关系是以属性形式存在 //1.box1是box的父节点 // var box2 = document.getElementsByClassName("box2")[0];
复制链接

扫一扫