JS DOM用不同方法获取节点及对节点插入、复制和移除

操作节点的方法

appendChild()

insertBefore()

replaceChild()

cloneNode()

normalize()

splitText()

sppendChild() 追加子元素

.firstElementChild() 第一个子元素节点

返回值是被操作的那个子节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("myul");

            var txt=document.createTextNode("4");

            var li=document.createElement("li");

            li.appendChild(txt);

            var myli=ul.appendChild(li);

            console.log(myli);//返回值是被操作的那个子节点

            // 获取到的第一个子元素被移动到了最后

            var firstLi=ul.firstElementChild;

            ul.appendChild(firstLi);

        });

    </script>

</head>

<body>

    <ul id="myul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

.children.item(n) 获取第n+1个子元素节点

.children[n] 获取第n+1个子元素节点

父元素.insertBefore(被插入的元素，要插入的位置）会在指定位置之前插入元素

返回值就是新插入的节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("myul");

            var txt=document.createTextNode("4");

            var li=document.createElement("li");

            li.appendChild(txt);

            var pos=ul.children[2];

            ul.insertBefore(li,pos);

            var myli=ul.insertBefore(li,pos);

            console.log(myli);//返回值是被操作的那个子节点

        });

    </script>

</head>

<body>

    <ul id="myul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

当第二个参数设置为null时，能够实现与appendChild相同的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("myul");

            var txt=document.createTextNode("4");

            var li=document.createElement("li");

            li.appendChild(txt);

            ul.insertBefore(li,null);

        });

    </script>

</head>

<body>

    <ul id="myul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

replaceChild(要插入的节点，被替换掉的节点）

返回值是被替换的节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("myul");

            var txt=document.createTextNode("4");

            var li=document.createElement("li");

            li.appendChild(txt);

            //ul.replaceChild(li,ul.lastElementChild);

            var oldLi=ul.lastElementChild;

            var returnNode=ul.replaceChild(li,oldLi);

            console.log(returnNode);

        });

    </script>

</head>

<body>

    <ul id="myul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

不过我发现在控制台尝试想要选中被返回的节点，页面就崩溃了

.cloneNode() 浅拷贝

.cloneNode(true) 深拷贝，会把子元素也拷贝

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("myul");

            var newNode=ul.cloneNode();

            console.log(newNode);

            var newNode2=ul.cloneNode(true);

            console.log(newNode2);

            document.body.appendChild(newNode2);

        });

    </script>

</head>

<body>

    <ul id="myul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

normalize()

normalize() 方法移除空的文本节点，并连接相邻的文本节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var div=document.createElement("div");

            var txt1=document.createTextNode("hello~");

            var txt2=document.createTextNode("cyy~");

            div.appendChild(txt1);

            div.appendChild(txt2);

            document.body.appendChild(div);

            console.log(div.childNodes.length);//2   <div>"hello~" "cyy~"</div>

            div.normalize();

            console.log(div.childNodes.length);//1  <div>hello~cyy~</div>

        });

    </script>

</head>

<body>

</body>

</html>

splitText(n) 把一个文本节点分割为两个，从位置n开始

并且返回新的文本节点

splitText()方法将在指定的 offset 处把 Text 节点分割成两个节点。原始的 Text 节点将被修改，使它包含 offset 指定的位置之前的文本内容（但不包括文本内容）。新的 Text 节点将被创建，用于存放从 offset 位置（包括该位置上的字符）到原字符结尾的所有字符。新的 Text 节点是该方法的返回值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var div=document.createElement("div");

            var txt=document.createTextNode("hello~cyy~");

            div.appendChild(txt);

            document.body.appendChild(div);

            console.log(div.childNodes.length);//1  "hello~cyy~"

            //div.childNodes[0].splitText(5);

            //console.log(div.childNodes.length);//2   "hello" "~cyy~"

            var newNode=div.childNodes[0].splitText(5);

            console.log(newNode);//"~cyy~"

        });

    </script>

</head>

<body>

</body>

</html>

removeChild()

返回被删除的子节点

必须传入参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul=document.getElementById("ul");

            ul.removeChild(ul.children[1]);

        });

    </script>

</head>

<body>

    <ul id="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

removeNode()

是IE的私有实现

删除目标节点。默认参数是false，仅删除目标节点

当参数为true，则会把目标节点的子节点也删除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            // var ul=document.getElementById("ul");

            // var removedNode=ul.removeNode();

            // console.log(removedNode.outerHTML);//<ul id="ul"></ul>

            var ul=document.getElementById("ul");

            var removedNode=ul.removeNode(true);

            console.log(removedNode.outerHTML);

            // <ul id="ul">

            //     <li>1</li>

            //     <li>2</li>

            //     <li>3</li>

            // </ul>

        });

    </script>

</head>

<body>

    <ul id="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

removeChild() 和innerHTML的区别

第一组对比

结论：使用removeChild()删除子节点，在IE8以下会有残留，久而久之占用内存

使用innerHTML删除子节点，没有残留

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var div=document.createElement("div");

            console.log(div.parentNode);//null 还没有装载到dom树上

            // document.body.removeChild(document.body.appendChild(div));

            // console.log(div.parentNode);//IE8以下存在文档碎片，其他浏览器为null

            document.body.innerHTML="";

            console.log(div.parentNode);//null

        });

    </script>

</head>

<body>

</body>

</html>

第二组对比

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var ul1=document.getElementById("ul1");

            ul1.parentNode.removeChild(ul1);

            console.log(ul1.id + ul1.innerHTML);

            var ul2=document.getElementById("ul2");

            ul2.parentNode.innerHTML="";

            console.log(ul2.id + ul2.innerHTML);

        });

    </script>

</head>

<body>

    <ul id="ul1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <ul id="ul2">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</body>

</html>

普通浏览器结果：

IE8以下浏览器结果：

此时使用innerHTML删除的元素，无法再获取到完整的数据

结论：

在IE8以下，removeChild相当于掰断树枝，innerHTML清空相当于连根拔起

在其他浏览器中，removeChild和innerHTML都相当于掰断树枝，可以再次使用

deleteContents()

textContent

JS DOM用不同方法获取节点及对节点插入、复制和移除的更多相关文章

JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码获取父节点及父节点下所有子节点(兄弟节点) <ul> <l ...
JS获取子节点、父节点和兄弟节点的方法实例总结
转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...
webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
JS DOM创建节点
DOM节点操作之增删改查 document.write() 可以向文档中添加节点但是有个致命问题,会把文档原有的节点全部清空因此不推荐使用 <!DOCTYPE html> <ht ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
JS(基础)_总结获取页面中元素和节点的方式
一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签结点:页面 ...
遍历DOM树，获取子节点
获取子节点的方法有: 方法说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

随机推荐

使用postman测试接口
1.什么是接口测试其实接口测试就和普通功能测试没什么区别,区别就是功能测试是在页面上点点点,在页面上输入值,提交数据看结果,而接口测试没有页面,通过接口规范文档上的调用地址.请求参数,拼接报文,然后 ...
vscode打开文件，中文显示乱码（已解决）
之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...
JVM源码分析-JVM源码编译与调试
要分析JVM的源码,结合资料直接阅读是一种方式,但是遇到一些想不通的场景,必须要结合调试,查看执行路径以及参数具体的值,才能搞得明白.所以我们先来把JVM的源码进行编译,并能够使用GDB进行调试. 编 ...
14、 NAT
私有IP地址段:10.0.0.0-10.255.255.255/8172.16.0.0-172.31.255.255/12192.168.0.0-192.168.255.255/16 NAT的必要性: ...
AI: 字体设计中的贝塞尔曲线
http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-cur ...
Pycharm2019.1.1永久破解
声明:不做商业用途,电脑系统win10专业版,亲测有效. 1,下载新版破解补丁+安装包网盘链接提取码:hn0u 下载补丁文件 jetbrains-agent.jar 并将它放置到 pycharm安 ...
POJ_2185_二维KMP
http://poj.org/problem?id=2185 求最小覆盖矩阵,把KMP扩展到二维,行一次,列一次,取最小覆盖线段相乘即可. #include<iostream> #incl ...
Codeforces_429_B
http://codeforces.com/problemset/problem/429/B 挺简单的题,先求出四个点到每一点的最大和,然后枚举每一点,取和最大值. 注意两条路相交的点有且只有一个,这 ...
socket实现文件上传（客户端向服务器端上传照片示例）
本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...
Go Module下使用本地包
介绍两种方式: 方式一(推荐): 严格的说,方式一是使用项目目录下的go文件. 项目目录如下: |── studyModule //项目主目录 | |──log //主目录下文件夹 | | |──lo ...

JS DOM用不同方法获取节点及对节点插入、复制和移除

JS DOM用不同方法获取节点及对节点插入、复制和移除的更多相关文章

随机推荐

热门专题