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 ...
随机推荐
- webpack+react
一直提醒我这个.闹心最后发现是在不同的js 里引入组件的时候 import React from 'react'; 和 import React from 'React'; 就是大小写的问题. 解决办 ...
- SQL索引器
1.什么是SQL索引器 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息. 数据库索引好比是一本书前面的目录,能加快数据库的查询速度. 例如这样一个查询:se ...
- C#操作Redis List 列表
/// <summary> /// Redis 列表 /// </summary> public static void Redis_List() { RedisClient ...
- 致命id(就是一个神经病精神分裂的故事---但讲述方式真的很不错）
电影开头是一段审讯的录音(我听着像),一直在问那个精神分裂的人一件谋杀案,镜头然后转向了一个场景(这个场景中设定是一个被大雨围困的汽车旅馆,到后半部分我才明白这是那个精神分裂者的精神世界,这个地方的所 ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
- [android] android项目架构
准备步骤: 1.创建工程(设置版本兼容,最低兼容版本) 2.导入常用jar包,(处理字符串和加密用的jar文件) Commons Lang,Commons Codec commons-codec.ja ...
- 初学zookeeper--自定义事件监听
zk有四种节点类型: 持久节点,持久顺序节点,临时节点,临时顺序节点. 自定义监听事件时,在节点的创建,修改,删除的方法第一行都需要加入是否监听的一个方法: //开启监听的方法.第二个参数表示是否开启 ...
- form表单在发送到服务器时候编码方式
enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...
- Linux From Scratch（从零开始构建Linux系统，简称LFS）（三）
九. 系统配置 1. 安装 LFS-Bootscripts-20150222 软件包包含一套在 LFS 系统启动和关闭时的启动和停止脚本. cd /sources tar -jxf lfs-boots ...
- vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）
vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于“=”.“d”.“y”,我在无意中发现了它们所具有的相同的一些用法,先举以下三个例子: =nG dnG ynG 其中,n为行号.注意 ...