转码日记——Javascript笔记（12）DOM增删改

原创已于 2022-09-23 14:43:45 修改 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-09-20 16:06:01 首次发布

转码日记专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用DOM API进行页面元素的创建、添加、插入、替换和删除等操作，包括createElement、appendChild、insertBefore、replaceChild及removeChild等方法的具体应用案例。

DOM增删改的方法

document.createElement( ); — 可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据标签名创建元素节点对象，并将创建好的对象作为返回值返回。

document.createTextNode( ); — 可以创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

appenChild( ); — 向一个父节点中添加一个新的子节点；语法：父节点.appendChild(子节点);

//创建一个回调函数，这样每次绑定button和函数时可以直接调用
function myClick(idStr,fun){
    var btn = document.getElmentById(idStr);
    idStr.onclick = fun;
};
//点击btn01,将名为广州的子节点添加到#city下
//找到btn01
myClick("btn01", function(){
    //创建广州节点
    //创建<li>
    var li = document.creatElement("li");
    //创建文本节点广州
    var gzText = document.creatTextNode("广州");
    //将gzText设置为li的子节点
    li.appendChild(gzText);
    //找到id为city的节点
    var city = document.getElemntById("city");
    city.appendChild(li);
    
});

insertBefore( ); — 在指定的子节点前插入新的子节点；语法：父节点.insertBefore(要插入的子节点，在谁前面插入 );

//将广州的节点插入到#bj前面
my Click("btn02",function(){
    //创建li节点
    var li2 = document.creatElement("li");
    //创建广州的文本节点
    var gzText = document.creatTextNode("广州");
   //将文本节点设置为li的子节点
    li2.appendChild(gzText);
   //找到bj
    var bj = document.getElementById("bj");
    //将广州插入到bj前面
    //找到广州和北京的父节点
    var city = document.getElemeentById("city");
    //插入广州
    city.insertBefore(li, bj);
});

replaceChild( ); — 替换子节点；语法：父节点.replaceChild( 新节点，旧节点);

//用广州替换北京
city.replaceChild(li, bj);

removeChild( ); — 删除子节点；语法：父节点.removeChild( 子节点);

//删除北京
city.removeChild(bj);

如果不知道bj的父元素是谁，可以使用parentNode来获取到它的父元素；语法：子节点.parentNode来获取父元素（更常用）

bj.parentNode.removeChild(bj);
//bj.parentNode相当于city

标签.innerHTML — 获取标签内部的html代码，或者增加、修改

console.log(city.innerHTML);
//设置bj内的html代码
var bj = document.getElementById("bj");
bj.innerHTML = "朝阳";

//增加广州的子节点
city.innerHTML += "<li>广州</li>";
//相当于重新全部添加了一遍，因为使用innerHTML会覆盖掉原有代码

推荐写法：

var li = document.createElement("li");
li.innerHTML = "广州"; //可以替代textnode
city.appendChild(li);

练习— 添加、删除记录（文件）