前言

在JavaScript中，节点操作是指通过操作DOM（文档对象模型）中的节点来动态修改网页的结构和内容。DOM表示网页的层次结构，可以通过JavaScript来访问和操纵DOM节点。节点是DOM树中的基本单元，可以是元素节点、文本节点、属性节点等。节点操作包括创建、添加、删除、替换和修改节点的属性或内容等操作。

常用的节点操作

innerHTML 的两个弊端（补充）

innerHTML 的两个弊端

1.他会引起页面底层的重新渲染，每一次重新渲染都会重新刷新元素中的内容，

在刷新之后，元素不在是原来的那个元素，那么次元素绑定的所有事件都不会生效

2.正是因为innerHTML会引起页面底层的重新渲染，这样比较耗时，性能比较低

createElement(标签名)使用dom方法创建一个元素

createElement(标签名)使用dom方法创建一个元素，创建之后的元素可以使用任何元素具有的方法

父元素.appendChild(子元素) 添加到父元素

父元素.appendChild(子元素)把指定的子元素添加到父元素的最后面

//创建一个p标签
let p =document.createElement('p');
    p.innerHTML = '梦到找厕所';
    //把创建的标签添加到父元素中
    wp2.appendChild(p);

注意

如果需要使用innerHTML，尽量在for循环外部使用，尽可能的不要在for循环内部使用innerHTML

如果元素内部有事件操作，则可以使用，createElement创建元素，如果展示信息，则可以使用innerHTML

指定插入父元素.insertBefore(要添加的元素，父元素中的指定子元素)

父元素.insertBefore(要添加的元素，父元素中的指定子元素)

把要添加的元素（参数1），添加到父元素中的指定子元素（参数2）之前

注意：

使用该方法一定要两个参数，如果第二个元素不存在或者不合法，则会把元素添加到父元素的末尾，类似appendChild（）

删除元素父级.removeChild（要删除的子元素）

删除元素

父级.removeChild（要删除的子元素）

参数必须是一个元素对象，否则报错

返回值是删除的对象

删除元素之前必须要先找到元素

补充内容

confirm（对话内容）他是一个对话框，如果用户点击确定，就返回ture，否则返回false，因此常在if语句中用来判断用户的某项操作。

案例

效果图

核心代码

let del = document.querySelector('#del')
//点击删除
del.onclick = function(){
    //获取要删除的元素
    let first = document.querySelector('#list>li:nth-child(1)');
    if (confirm('你确定要删除吗？')) {
        list.removeChild(first);
        alert('删除成功')
    }
    
}

元素的替换：被替换元素的父级.replaceChild(替换的元素，被替换的元素)；

元素的替换

被替换元素的父级.replaceChild(替换的元素，被替换的元素)；

返回值是被替换的元素对象

aa('#btn').onclick = function(){
    let h2 = document.createElement('h2');
    h2.innerHTML = '多少楼台烟雨中';

    aa('.wp').replaceChild(h2,aa('.h1'));
}

克隆：被克隆的元素对象.cloneNode()

被克隆的元素对象.cloneNode();

参数默认是flase

false：不复制子级中的dom结构和节点

turn：深层拷贝，被克隆对象的子级dom结构和节点都会被复制

复制的是元素节点的结构，不会复制该节点上的事件

该方法的返回值是复制的元素对象

aa('#copy').onclick = function(){
    //拷贝 wp1
    let ele =aa('.wp1').cloneNode(true);
    //获取body
    let body = document.body;
    //把复制的结果存入body中
    body.appendChild(ele)
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/976537.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！