32_JavaScript之节点、属性的增删改查

最新推荐文章于 2024-07-01 01:58:05 发布

不掉发的程序员tj

最新推荐文章于 2024-07-01 01:58:05 发布

阅读量507

点赞数

文章标签： js java javascript dom

本文链接：https://blog.youkuaiyun.com/weixin_44543513/article/details/107272559

版权

本文介绍了JavaScript中对DOM节点的创建、添加、插入、删除和克隆，以及如何进行节点属性的获取、修改、新增和删除。通过示例展示了使用appendChild、insertBefore、removeChild、cloneNode以及getAttribute、setAttribute、removeAttribute等方法的操作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、节点增删改查

1.创建节点

<body>
    <div>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
    <script>
        let span = document.createElement("span");
    </script>
</body>

2.添加节点
注意：appendChild方法会将指定的元素添加到最后

<body>
    <div>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
    <script>
        let div = document.querySelector("div")
        let span = document.createElement("span");
        div.appendChild(span);
    </script>
</body>

控制台输出：
在这里插入图片描述

3.插入节点

<body>
    <div>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
    <script>
        let div = document.querySelector("div");
        let h1 = document.querySelector("h1");
        let p = document.querySelector("p");
        let span = document.createElement("span");

        div.insertBefore(span, p); // 在p前插入span
    </script>
</body>

在这里插入图片描述

4.删除节点

注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除元素是不能够自杀的

<body>
    <div>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
    <script>
        let div = document.querySelector("div");
        let p = document.querySelector("p")
        div.removeChild(p);
    </script>
</body>

在这里插入图片描述

5.克隆节点

注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true

<body>
    <div>
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
    <script>
        let div = document.querySelector("div");
        let cloneNode = div.cloneNode();
        console.log(cloneNode);
        let cloneNodeTrue = div.cloneNode(true);
        console.log(cloneNodeTrue);
    </script>
</body>

控制台输出：
在这里插入图片描述

一、节点属性增删改查

注意：无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,
系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,
所以只要拿到这个对象就可以拿到标签属性,操作标签属性
通过元素.属性的方法可以对元素原有的属性进行，但不能操作自定义属性，所以这里列举的都是通过方法来操作属性，这样自定义属性也可以进行操作

1.获取元素属性

getAttribute(“属性”)

<body>
    <img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
    <script>
        let img = document.querySelector('img');
        console.log(img.getAttribute("alt"));
    </script>
</body>

在这里插入图片描述

2.修改元素属性

setAttribute（“属性”，“修改的值”）

<body>
    <img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
    <script>
        let img = document.querySelector('img');
        console.log(img.setAttribute("alt", "htj"));
        console.log(img.setAttribute("nj", "35"));
    </script>
</body>

在这里插入图片描述

3.新增元素属性

setAttribute（“属性”，“修改的值”）
注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改

<body>
    <img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
    <script>
        let img = document.querySelector('img');
        console.log(img.setAttribute("huang", "123"));
    </script>
</body>

在这里插入图片描述

4.删除元素属性

removeAttribute（“属性”）

<body>
    <img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
    <script>
        let img = document.querySelector('img');
        console.log(img.removeAttribute("alt"));
    </script>
</body>

在这里插入图片描述