一、概述

　　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. PHP中判断字符串是否包含某个字符时，建议使用正则表达式preg_match()

    判断字符串中是否包含 某个字符时,在java中时直接使用 indexOf()来判断的 在php中好像也要对应的,strpos(),stripos() 不过每次我用的都很不爽,老是出现各种各样的小问题, ...

  2. VirtualBox 虚拟机磁盘空间不够用，增大空间方法（这里以MAC为例）

    开始在Virtualbox 上,安装MAC系统的时候只分配了20G的空间,随着Xcode 开发软件安装的东西多了,比如:IOS 的Simulator 的各种版本,4.3,5.0,6.0 加起来要到少要 ...

  3. lighttpd 与 gitweb 搭建服务器

    搭建 Git 仓库服务器 下载 gitweb 如果是用 debian 系的 Linux 发行版,可以使用 apt 下载安装可执行的 gitweb sudo apt-get install gitweb ...

  4. 问题集录06--SpringBoot创建Maven项目

    1. 如下图,打开idea之后,file -> new -> project2. 如下图,在弹出的new project 页面,选择maven -> 勾选Create from ar ...

  5. 使用 Python 管理 Azure:基础配置

    Azure 提供了丰富的 Python SDK 来对 Azure 进行开发管理,包括使用 Azure 的开源框架在 Azure 上创建 web 应用程序,对 Azure 的虚拟机,存储等进行管理,本系 ...

  6. 修改django 后台admin用户的密码

    python manage.py shellfrom django.contrib.auth.models import User from django.contrib.auth.models im ...

  7. 分布式事务概述--2pc的概念

    转载自一个大拿:http://www.cnblogs.com/LBSer/p/4715395.html 前阵子从支付宝转账1万块钱到余额宝,这是日常生活的一件普通小事,但作为互联网研发人员的职业病,我 ...

  8. SZU 7

    A - Megacity sqrtf是个坑 #include <iostream> #include <string> #include <cstring> #in ...

  9. k8s常用指令集(kubectl kubeadm)

    1      Kubectl指令集 1.1      Master查询节点信息 [root@master1 kubernetes-1.10]# kubectl get nodes 1.2      查 ...

  10. flask 继承模版的基本使用