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 ...
随机推荐
- Python基础(3) - 数据类型:3列表类型
Python 列表是序列对象,可包含任意的Python数据信息,如字符串.数字.列表.元组等.列表的数据是可变的,我们可通过对象方法对列表中的数据进行增加.修改.删除等操作.列表用[]包括起来的. 列 ...
- Linux修改BASH命令提示符
Shell命令提示符及颜色是由PS1来配置: 1.其中PS1常用的参数含义如下: \d :#代表日期,格式为weekday month date,例如:"Mon Aug 1" \H ...
- preg_match()——php
第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明: "^The": 匹配以 "The"开头的字符串; &qu ...
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- [android] 界面的划分
1.统一界面管理 1.1利用一个activity去管理应用的所有的界面 1.1.1 理解Activity,Window和View之间的关系 1.1.2 避免Activity过多导致的问题, 例如:彻底 ...
- 一：SpringDataJPA
一:spring data jpa介绍 spring data:其实spring data就是spring提供了一个操作数据的框架.而spirng data jpa只是spring data框架下的一 ...
- 三：SSM框架整合思路
一:jar包 1.spring(包括springmvc) 2.mybatis 3.mybatis-spring整合包 4.数据库驱动 5.第三方连接池 6.json依赖包jackson 二:整合思路 ...
- 1.JDBC基础
JDBC全称Java Database Connectivity,即Java数据库连接.(以下以MySQL为例,使用MySQL语句) Sun公司提供了标准JDBC API接口,没有实现具体类.各个数据 ...
- Hibernate 一对多，多对多，多对一检索策略
一.概述 我们先来谈谈检索数据时的两个问题: 1.不浪费内存 2.更好的检索效率 以上说的问题都是我们想要避免的,接下来就引出了我们要讨论的话题---------------hibernate检索 ...
- filter() 方法创建一个新数组
filter快速过滤创建一个新数组 var new_array = arr.filter(callback(element[, index[, array]])[, thisArg]) 参数节 cal ...