html dom增删改查的功能,JavaScript笔记——DOM增删改查节点

文章目录

一、增删改查方法

1.1创建节点(增加)

创建元素节点对象

document.createElement()

标签名作参数，并将对象返回

创建文本节点对象

document.createTextNode()

文本内容作参数,根据内容创建文本节点

举例：

//创建li元素对象

var li = document.createElement("li");

//创建广州文本节点

var gzTevxt=document.createTextNode("广州");

1.2向父节点添加子节点

appendChild()

语法:父节点.appendChild(子节点);

对于文本节点:父节点.innerHTML=“内容”;

举例

//将广州文本节点设置为li的字节点

li.appendChild(gztext)；

//效果:

广州

1.3替换节点

replaceChild()

语法:父节点.replaceChild(新节点,旧节点)

//获取北京节点

var bj = document.getElementById("bj");

//获取city父节点

var city = document.getElementById("city");

//广州替换北京节点

city.replaceChild(li,bj);

1.4删除节点

removeChild()

父节点.removeChild(子节点)

或者

子节点.parentNode.removeChild(子节点)

//父节点删除子节点

city.removeChild(bj);

//自己删除自己

bj.parentNode.removeChild(bj);

1.5总结

创建节点为document调用

其余方法为父节点调用

二、练习

2.1题目

2.2代码

window.οnlοad=function(){

// 创建一个"广州节点",添加到#city下

myClick("btn01",function(){

//创建广州节点

广州

//创建li元素节点

/**

* document.createElement()

* - 可以用于创建一个元素节点对象

* - 它需要一个标签名作为参数,将会根据该标签名创建节点对象

* - 并将创建好的对象作为返回值返回

*/

var li = document.createElement("li");

//创建广州文本节点

/**

* document.createTextNode()

* - 创建一个文本节点对象

* - 需要一个文本内容作为参数，根据内容创建文本节点

* - 将新的节点返回

*/

var gzText=document.createTextNode("广州");

//将gzText设置li的子节点

/**

* appendChild()

* - 向一个父节点中添加一个新的子节点

* - 用法:父节点.appendChild(子节点);

*

*/

li.appendChild(gzText);

//获取id为city的节点

var city =document.getElementById("city");

//将广州添加到city下

city.appendChild(li);

});

// 将"广州"节点插入到#bj前面

myClick("btn02",function(){

//创建一个广州节点

var li =document.createElement("li");

var gzText = document.createTextNode("广州");

li.appendChild(gzText);

//获取北京节点

var bj = document.getElementById("bj");

//获取city

var city = document.getElementById("city");

/**

* insertBefore()

* - 可以在指定子节点插入新的字节点

* - 语法:父节点.insertBefore(新子节点,旧子节点)

*/

city.insertBefore(li,bj)

})

// 将"广州"节点替换#bj节点

myClick("btn03",function(){

//创建一个广州节点

var li =document.createElement("li");

var gzText = document.createTextNode("广州");

li.appendChild(gzText);

//获取北京节点

var bj = document.getElementById("bj");

//获取city

var city = document.getElementById("city");

/**

* replaceChild()

* - 可以使用指定的子节点替换已有的子节点

* - 语法:父节点.replaceChild(新节点,旧节点);

*

*/

city.replaceChild(li,bj);

})

// 删除#bj节点

myClick("btn04",function(){

//获取北京的节点

var bj = document.getElementById("bj");

//获取city

var city = document.getElementById("city");

/**

* removeChild()

* - 可以删除一个子节点

* - 语法:父节点.removeChild(子节点);

*

* 子节点.parentNode.removeChild(子节点)

*/

//city.removeChild(bj);

bj.parentNode.removeChild(bj);

})

// 读取#city内的HTML代码

// 设置#bj内的HTML代码

//向#city增加一个广州

myClick("btn07",function(){

//向city中添加广州

var city = document.getElementById("city");

/**

* 使用innerHTML也可以完成DOM的增删改操作

* 一般我们会两种方式结合使用

*/

//city.innerHTML +="

广州"

//创建一个

var li = document.createElement("li");

//向li中设置文本

li.innerHTML="广州";

//将li添加到city中

city.appendChild(li);

})

}

function myClick(idStr,fun){

var btn = document.getElementById(idStr);

btn.οnclick=fun;

}

你喜欢哪个城市？

• 北京
• 上海
• 东京
• 首尔

创建一个"广州节点",添加到#city下

将"广州"节点插入到#bj前面

将"广州"节点替换#bj节点

删除#bj节点

读取#city内的HTML代码

设置#bj内的HTML代码

向#city添加一个广州

标签：city,DOM,JavaScript,改查,bj,li,var,document,节点

来源： https://blog.csdn.net/shang_0122/article/details/104812298