运用js完成节点的增删改复制等的操作

发布时间：2023-09-11 14:45:24 所属栏目：教程来源：

导读：需求：完成节点的增删改复制的操作

用到的方法和属性：

1.获取某个节点的父节点

parentNode属性

2.获取某个节点的子节点集合

childNodes属性

3.创键一个新的节点

createTextNode(节点文

需求：完成节点的增删改复制的操作

用到的方法和属性：

1.获取某个节点的父节点

parentNode属性

2.获取某个节点的子节点集合

childNodes属性

3.创键一个新的节点

createTextNode(节点文本内容) document对象的方法在某些浏览器上兼容性不是很好

createElement(对象) document对象的方法例如：document.createElement("a");

4.给某个节点对象添加属性和属性值

setAttribute(属性，属性值); 例如：aNode.setAttribute("href","http://www.baidu.com");

5.替换某个节点下的子节点

replaceChild(新节点，原子节点);

6.将某个节点添加到一个节点下

appendChild(要添加的节点)

7.克隆某个节点

cloneNode() 不传参数和传入true参数一样，表示克隆该节点包括子节点

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>node_CURD.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<style type="text/css">

div{

border: red 1px solid;

width: 200px;

height: 50px;

margin: 20px 30px;

padding: 20px;

}

#div_1{

clear:both;

background-color:#FF3366;

}

#div_2{

clear:both;

background-color:#6699FF;

}

#div_3{

clear:both;

background-color:#CCCC99;

}

#div_4{

clear:both;

background-color:#00CC33;

}

</style>

<script type="text/javascript">

// 增加方式一：给第一个div区域添加文本

function addText(){

//1.获取要添加文本内容的节点

var div_1Node = document.getElementById("div_1");

//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。

var TextNode = document.createTextNode("这不就显示了吗？");

//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法

div_1Node.appendChild(TextNode);

}

// 增加方式二：给第一个div区域添加按钮

function addButton(){

//1.获取要添加文本内容的节点

var div_1Node = document.getElementById("div_1");

//2.创建一个节点。document对象的createElement()

var aNode = document.createElement("input");

//3.给指定对象添加属性和属性值

//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样

aNode.type="button";

aNode.setAttribute("value","按钮");

aNode.setAttribute("onclick","deleteText('div_1')");

//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法

div_1Node.appendChild(aNode);

}

// 删除方式一：删除第二个区域的节点的子节点

function deleteText(NodeId){

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!