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 ...

随机推荐

Intellij IDEA 远程debug、远程tomcat部署项目
vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址前言在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
shell变量类型和运算符
一.shell变量的应用 1.shell变量的种类 ①用户自定义变量:由用户自己定义,修改和使用 ②预定义变量:bash预定义的特殊变量,不能直接修改 ③位置变量:通过命令行给程序传递执行参数二.变 ...
python模块之contexlib
一.上下文管理器 with是python实现上下文管理器的核心关键词.它能够在代码执行前和执行后做一些额外的事情. 最常见的代码恐怕就是文件操作了. with open("file" ...
VC 在调用main函数之前的操作
title: VC 在调用main函数之前的操作 tags: [VC++, 反汇编, C++实现原理] date: 2018-09-16 10:36:23 categories: VC++反汇编分析 ...
Django—Model
Django 模型是与数据库相关的,与数据库相关的代码一般写在 models.py 中,Django 支持 Sqlite3.MySQL.PostgreSQL 等数据库,只需要在 settings.py ...
005hystrix.stream信息聚合Turbine
1.POM配置和普通Spring Boot工程相比,仅仅添加了Turbine和Spring Boot Starter Actuator依赖 <dependencies> <!--添 ...
GeoJSON相关操作
简介本文主要介绍GEOJSON相关的操作环境 gt-geojson-.jar,jts-1.8.jar 直接上代码代码 wkt格式的geometry转成json格式 public String e ...
Codeforces Round #413 A. Carrot Cakes
A. Carrot Cakes time limit per test 1 second memory limit per test 256 megabytes In some game ...
02_linux常用指令
[用户管理] 查看当前用户 whoami 新建用户 sudo adduser higginCui 查看新建用户 ls /home 使用新建用户登录 su -l higg ...

JavaScript的DOM_节点的增删改

JavaScript的DOM_节点的增删改的更多相关文章

随机推荐

热门专题