JavaScript的DOM_节点的增删改
一、概述
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
二、write()方法
write()方法可以把任意字符串插入到文档中去。会覆盖掉原来的html
<script type="text/javascript">
window.onload = function () {
document.write('测试write'); //在网页中打印出测试write，但是原有的HTML的内容被覆盖掉了，连标题都没了 一般用于测试
document.write('<br /><strong>测试write</strong>'); //可以解析HTML标签
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
三、createElement()方法和appendChild()方法
1、createElement()方法可以创建一个元素节点。仅仅是创建了标签，不会自动添加到文档中，需要使用appendChild()方法添加到文档中
<script type="text/javascript">
window.onload = function () {
document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
2、appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box'); //获取某一个元素节点
var p = document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
box.appendChild(p); //把新元素节点<p>添加id=box的div里的子节点列表的末尾上
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
四、createTextNode()方法
createTextNode()方法创建一个文本节点。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');//获取某一个元素节点
var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
box.appendChild(p);//把新元素节点<p>添加id=box的div里的子节点列表的末尾上 var text = document.createTextNode('测试Div4');
p.appendChild(text); //把 文本添加到p标签里
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
五、insertBefore()方法
insertBefore()方法可以把节点创建到指定节点的前面。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');//获取某一个元素节点
var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中 //box.parentNode先跳到父节点，这里父节点就是body
box.parentNode.insertBefore(p,box);//表示在id为box的元素前面添加一个p标签
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
insertBefore()方法可以给当前元素的前面创建一个节点，但却没有提供给当前元素的后面创建一个节点。那么，我们可以用已有的知识创建一个 insertAfter()函数。
原理是：先创建一个节点后，使用parentNode跑到父节点里将创建的节点使用appendChild添加进去
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');//获取某一个元素节点
var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
insertAfter(p,box);
}
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; //得到父节点 if (parent.lastChild === targetElement) {
parent.appendChild(newElement); //如果最后一个子节点是当前元素，那么直接添加即可
} else {
parent.insertBefore(newElement, targetElement.nextSibling);//否则，在当前节点的下一个节点之前添加（也就是当前节点的后一个节点）
}
}
</script>
</head>
<body>
<span>开始</span>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
<span>结束</span>
</body>
六、repalceChild()方法
replaceChild()方法可以把节点替换成指定的节点。
<script type="text/javascript">
window.onload = function () {
var span = document.getElementsByTagName('span')[0]; var em = document.createElement('em'); span.parentNode.replaceChild(em,span);
};
</script>
</head>
<body>
<span>开始</span>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
<span>结束</span>
</body>
七、cloneNode()方法
cloneNode()方法可以把子节点复制出来。（复制之前先将一些空白节点删除掉）
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var clone = removeWhiteNode(box).firstChild.cloneNode(true);//当这里的参数为false的时候只复制元素标签，标签中的内容不复制
box.appendChild(clone);
}; function removeWhiteNode(nodes) {
for (var i = 0; i < nodes.childNodes.length; i ++) {
if (nodes.childNodes[i].nodeType === 3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)) {
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
八、removeChild()方法
removeChild()方法可以把指定节点删除（同样需要将空白字符删掉在操作）
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
box.removeChild(removeWhiteNode(box).firstChild); //删除box下的第一个子节点
box.parentNode.removeChild(box); //删除整个box（先移到box的父节点后使用删除节点的方法）
}; function removeWhiteNode(nodes) {
for (var i = 0; i < nodes.childNodes.length; i ++) {
if (nodes.childNodes[i].nodeType === 3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)) {
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
</body>
JavaScript的DOM_节点的增删改的更多相关文章
- 【转】JavaScript对Json节点的增删改
var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 j ...
- HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
- Javascript数组系列五之增删改和强大的 splice()
今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章. 生命不息,更新不止! 今天我们就不那么多废话了,直接干货开始. 我 ...
- ZooKeeper客户端 zkCli.sh 节点的增删改查
zkCli.sh 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./zkCli.sh -timeout 5000 -server 127.0.0.1:2181 客户端与 ...
- HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- Zookeeper入门(六)之zkCli.sh对节点的增删改查
参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./z ...
- 9 HTML DOM事件监听&版本兼容&元素（节点）增删改查
事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...
- DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- 江铖:乳腺癌识别By AI
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:江铖,腾讯觅影高级研究员.多年以来一直从事计算机视觉相关的研究.加入腾讯以后,负责腾讯 ...
- SSO单点登录的实现原理是怎样的
单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用,而在架构单点登录时,也会遇到一些小问题,在不同的应用环境中可以采用不同的单点登录实现方案来满足需求.我将以我所 ...
- spring web.xml基本配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...
- [转]使用依赖关系注入在 ASP.NET Core 中编写干净代码
本文转自:http://blog.jobbole.com/101270/ 原文出处: Steve Smith ASP.NET Core 1.0 是 ASP.NET 的完全重新编写,这个新框架的主 ...
- css样式、js2种方式 控制字符个数，多余的字用省略号代替
大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教:css <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希 ...
- .Net高阶异常处理第二篇~~ dump进阶之MiniDumpWriter
dump文件相信有些朋友已经很熟悉了,dump文件的作用在于保存进程运行时的堆栈信息,方便日后排查软件故障,提升软件质量.关于dump分析工具windbg.adplus的文章更多了,如果您还不知道怎么 ...
- sqlserver - FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- springboot mybatis 使用多数据源
SpringBoot系列博客目录,含1.5.X版本和2.X版本 springboot2.0正式版发布之后,很多的组件集成需要变更了,这次将多数据源的使用踩的坑给大家填一填.当前多数据源的主要为主从库, ...
- Java 异常的处理方式--throws和try catch
异常的第一种处理方式throws. 看以下例子: import java.io.*;public class ExceptionTest04{ public static void main(Stri ...
- hdu 4628 Pieces 状态压缩dp
Pieces Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total S ...