一、概述

　　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_节点的增删改的更多相关文章

  1. 【转】JavaScript对Json节点的增删改

    var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 j ...

  2. HTML DOM(二)：节点的增删改查

    上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...

  3. Javascript数组系列五之增删改和强大的 splice()

    今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章. 生命不息,更新不止! 今天我们就不那么多废话了,直接干货开始. 我 ...

  4. ZooKeeper客户端 zkCli.sh 节点的增删改查

    zkCli.sh 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./zkCli.sh -timeout 5000  -server 127.0.0.1:2181  客户端与 ...

  5. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  6. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  7. Zookeeper入门(六)之zkCli.sh对节点的增删改查

    参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./z ...

  8. 9 HTML DOM事件监听&版本兼容&元素（节点）增删改查

    事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...

  9. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. 跨域拦截Access-Control-Allow-Origin设置多个origin

    在Extjs和java项目碰到了需要同时处理跨域,外部要访问后台接口的问题 原来的代码是这样,只能设置一个extjs前台需要过滤的跨域请求 package com.xgt.config; import ...

  2. jQuery比较时间处理过程（日期转换为时间戳比较）

    不管在JS中还是PHP中,终会遇到时间比较,但是很尴尬的是,举个例子,2017-04-12和2017-5-21是不一样或者说不能比较的,这在PHP和JS都是这种情况,这种情况怎么办呢,换成统一的格式比 ...

  3. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

  4. 互联网轻量级框架SSM-查缺补漏第三天

    简言:平安夜,继续慵懒的学习.我真的是不喜欢学习··· 第三章认识MyBatis核心组件 3.1 持久层的概念和MyBatis的特点 持久层:可以将业务数据存储带磁盘,具有长期存储的能力.一般执行持久 ...

  5. ajax接收flask传递的json数据

    from flask import Flask, request import json app = Flask(__name__) @app.route('/') def func(): res = ...

  6. Regular Expression学习笔记

    正则写法 var re = /a/;//简写 /.../里不能为空,因为会误以为是注释: var re = new RegExp('a'); 新建一个RegExp对象:和新建Array对象,Objec ...

  7. Ubuntu 下 /etc/resolv.conf文件总是自动清除问题的解决方案

    最近学习Linux,在虚拟机中安装的是Ubuntu操作系统,用了几天发现Ubuntu无法上网,打开命令终端,输入命令: ping www.baidu.com -c2 结果显示名称无法识别,而直接与宿主 ...

  8. 完整SQL分页存储过程（支持多表联接）

    http://www.cnblogs.com/andiki/archive/2009/03/24/1420289.html Code/********************************* ...

  9. VC中BSTR、Char*、CString和CComBSTR类型的转换

    原文:http://blog.csdn.net/wanghaihao_1/article/details/37498689 1.char*转换成CString 若将char*转换成CString,除了 ...

  10. JAVA基本数据类型、引用数据类型-参数传递详解

    1:基本类型的参数传值 对于基本数据类型,修改这个值并不会影响作为参数传进来的那个变量,因为你修改的是方法的局部变量,是一个副本.实参的精度级别应等于或低于形参的精度级别,否则报错. class JB ...