BOM的增删改及复制

一、DMO增加节点

Ⅰ、追加子节点

①创建所要追加的文本createTextNode()

②创建节点元素createElement()

③将文本添加至节点中appendChild()

④获取ul对象getElementsByTagName()

⑤将li装进ul中appendChild()

Ⅱ、插入子节点

①创建所要插入的文本createTextNode()

②创建节点元素createElement()

③将文本添加至节点中appendChild()

④获取ul对象getElementsByTagName()

⑤获取元素（需要展示在哪个元素前）getElementById()

⑥插入inserteBefore()

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

<button οnclick="addNode()"> 追加字节点 </button>

<button οnclick="insertNode()"> 插入字节的 </button>

// Ⅰ、追加子节点 appendChild()

function addNode(){

// 1、创建文本 createTextNode()

var textObj = document.createTextNode("西门庆");

// 2、创建节点元素 createElement()

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

// 3、将创建的文本添加至创建的节点中 appendChild()

liObj.appendChild(textObj);

// 4、获取ul对象

var ulObj = document.getElementsByTagName("ul")[0];

// 5、将li装进ul中

ulObj.appendChild(liObj);

}

// Ⅱ、插入字节点 insertBefore()

function insertNode(){

// 1、创建文本 createTextNode()

var textObj = document.createTextNode("鲁智深");

// 2、创建节点元素 vreateElement()

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

// 3、将创建的文本添加至创建的节点中 appendChild()

liObj.appendChild(textObj);

// 4、获取ul对象

var ulObj = document.getElementsByTagName("ul")[0];

// 5、获取武松

var wsObj = document.getElementById("ws");

// 6、插入

ulObj.insertBefore(liObj, wsObj);

}

</script>

</body>

</html>

二、DOM删除节点

Ⅰ、删除节点

①获取父节点getElementsByTagName()[]

②获取要删除的节点getElementById()

③ 删除removeChild()

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

// 删除节点 removeChild()

function deleteNode() {

// 1、获取父节点

var ulObj = document.getElementsByTagName("ul")[0];

// 2、获取要删除的节点

var lkObj = document.getElementById("lk");

// 3、删除

ulObj.removeChild(lkObj);

}

</script>

</body>

</html>

三、修改节点

Ⅰ、修改节点

①创建文本createTextNode()

②创建节点createElement()

③将文本添加至节点appendChild()

④获取替换（修改）的节点getElementById()

⑤获取父节点getElementsByTagName()

⑥替换，前面的参数为新的，后面的参数为旧的replaceChild()

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

// 修改节点 replaceChild()

function repNode(){

// 1、创建文本 createTextNode()

var textObj = document.createTextNode("林冲");

// 2、创建节点

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

// 3、将文本添加至节点

liObj.appendChild(textObj);

// 4、获取替换（修改）的节点

var lkObj = document.getElementById("lk");

// 5、获取父节点

var ulObj = document.getElementsByTagName("ul")[0];

// 6、替换，前面参数为新的，后面为旧的

ulObj.replaceChild(liObj, lkObj);

}

</script>

</body>

</html>

四、DOM复制节点

Ⅰ、复制节点

①获取ul，getElementsByTagName()

②获取目标（所要存放的位置）getElementById()

③复制cloneNode()

④粘贴appendChild()

<!DOCTYPE html>

<head>

<style>

#box {

width:400px;

height:400px;

background-color: orange;

}

</style>

</head>

<body>

<ul>

</ul>

// 复制节点

function copyNode(){

// 1、获取ul

var ulObj = document.getElementsByTagName("ul")[0];

// 2、获取目标(所有存放位置)

var divObj = document.getElementById("box");

// 3、复制

var copyObj = ulObj.cloneNode(true);

// 4、粘贴

divObj.appendChild(copyObj);

}

</script>

</body>

</html>

BOM的增删改及复制相关推荐

jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作查查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
vs连接mysql建一个表并增删查改_VS连接SQL Server数据库，增删改查详细教程（C#代码）...
工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...
Spring Boot 中使用 MongoDB 增删改查
本文快速入门,MongoDB 结合SpringBoot starter-data-mongodb 进行增删改查 1.什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件 ...
学生的新增mySQL文档_MySQL增删改查
连接命令:mysql -h[主机地址] -u[用户名] -p[用户密码] 创建数据库:create database [库名] 显示所有数据库: show databases; 打开数据库:use [ ...
告别无止境的增删改查：Java代码生成器
对于一个比较大的业务系统,我们总是无止境的增加,删除,修改,粘贴,复制,想想总让人产生一种抗拒的心里.那有什么办法可以在正常的开发进度下自动生成一些类,配置文件,或者接口呢? 有感于马上要做个比较大的 ...
增删改查 HTML表格页面,表格增删改查.html
表格增删改查 body{ background:#dddddd; text-align:center; } .list { display: inline-block; margin-top: 20p ...
dom对html增删改操作,6.DOM对HTML元素的增删改操作
节点的增删改操作 function createNode(){ //创建一个li元素 var li = document.createElement("li"); li.inner ...
mongodb基本操作=增删改查
这两天总算清闲下来了,这里只介绍mongodb的一些基本增删改查,从大到小,从数据库到下面的集合表等,这里推荐一个mongodb的可视化工具Robo3T,在上面操作增删改查使用起来也简单数据库相关的 ...
python新闻系统_干货 | Python 实现新闻系统内容的增删改查功能
点击上方"程序人生",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事作者程序人生 x 张涛联合发布主题 <Python追梦人> 前言 ...

BOM的增删改及复制

BOM的增删改及复制相关推荐

最新文章

热门文章