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 ...
随机推荐
- vue中echarts随窗体变化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div> & ...
- 常用软件下载开发环境七牛镜像Java、Node、Mongo
[jdk1.8] Linux:http://soft.yzeng.cc/jdk18/jdk-8u202-linux-x64.tar.gz Windows:http://soft.yzeng.cc/jd ...
- 前端标注软件-pxcook像素大厨使用心得
我们在日常开发过程中,设计师给提供的UI图,经常需要标注尺寸,有时候设计师难免会遗漏标注,这样就会大大的增加我们的沟通成本,因此,使用一款好用的标注软件就尤为重要,我推荐这款标注软件---pxcook ...
- 实例化geoserver wms服务
var vectorWmsJHdataLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ //地址 url:'http://loca ...
- Centos7 redis 5.0 服务设置、启动、停止、开机启动
redis 没有配置服务,没有开启动,每次都要手工配置. 解决这个麻烦,我们new一个服务,然后开机启动即可. 1.创建服务(redis.conf 配置文件要注意,经过cp产生了很多个redis.co ...
- Cheatsheet: 2017 04.01 ~ 04.30
Other ReactXP - A LIBRARY FOR BUILDING CROSS-PLATFORM APPS Merging vs. Rebasing Better Git configura ...
- Emmet使用方法
本文摘自:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...
- quartz---定时器（配置注解方式&配置xml方式）
本入门案例基于spring和quartz整合完成. 第一步:创建maven工程,导入spring和quartz相关依赖 第二步:创建任务类 第三步:在spring配置文件中配置任务类 第四步:在spr ...
- 简单的CRUD（二）
一.重构简单的CRUD 1.JDBC工具类 1.因为在crud中都包含一些相同的代码所以可以提取出来,抽取代码重构为工具类. 2.将工具类设置为static静态类,方便调用,不需要new对象. pub ...
- Java实现内存分配算法 FF(首次适应算法) BF(最佳适应算法)
一.概述 因为这次os作业对用户在控制台的输入输出有要求,所以我花了挺多的代码来完善控制台的显示. MemoryAlgorithm类里只是和控制台输入输出有关的操作,而对内存的所有逻辑操作都是用Mem ...