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() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...
随机推荐
- JS基础——ATM机终端程序编写（3.0）
利用函数进行代码实现,要点:将每一项操作单独写成一个函数,在需要时进行调用,弄清参数的传递. 创建模拟账户 使用数组创建账户 let user = ["xiaohei", 1234 ...
- 理解Javascript的柯里化
前言 本文1454字,阅读大约需要4分钟. 总括: 本文以初学者的角度来阐述Javascript中柯里化的概念以及如何在工作中进行使用. 原文地址:理解Javascript的柯里化 知乎专栏: 前端进 ...
- V8垃圾回收？看这篇就够了！
什么是内存管理 内存管理是控制和协调应用程序访问电脑内存的过程.这个过程是复杂的,对于我们来说,可以说相当于一个黑匣子. 当咱们的应用程序运行在某个操作系统中的时候,它访问电脑内存(RAM)来达成下列 ...
- 配置虚拟环境(virtualenv+virtualenvwrapper)
安装virtualenv pip3 install virtualenv 安装virtualenvwrapper pip install virtualenvwrapper # Linux使用该条 p ...
- Mesh R-CNN 论文翻译（原理部分）
毕设做Mesh R-CNN的实现,在此翻译一下原论文.原论文https://arxiv.org/pdf/1906.02739.pdf. 摘要 二维感知的快速发展使得系统能够准确地检测真实世界图像中的物 ...
- ubuntu19配置静态IP并开启SSH远程登陆
前言 从ubuntu从17.10开始,已经不再在/etc/network/interfaces里配置IP,即使配置了也不会生效,而是改成netplan方式 ,配置写在/etc/netplan/文件夹 ...
- HYSBZ_1588_set
http://www.lydsy.com/JudgeOnline/problem.php?id=1588 直接set做就好了,注意set的迭代器只能--之类的操作. OJ崩了,也不知道对错. #inc ...
- BZOJ 4556(后缀数组+主席树求前驱后继+二分||后缀数组+二分+可持久化线段树)
换markdown写了.. 题意: 给你一个1e5的字符串,1e5组询问,求\([l_1,r_1]\)的所有子串与\([l_2,r_2]\)的lcp 思路: 首先可以发现答案是具有单调性的,我们考虑二 ...
- Java 代码实现链表
Linked List 用多少就申请多少内存. 链表是一种链式存储的线性表,所有元素的内存地址不一定连续的. 接口设计 代码实现 MyList.java(接口) package com.cyb; pu ...
- Shell: 定期存档日志文件
简介 对于日志的分割删除我们一般会使用logratate,但对于项目较多的情况下,会让开发直接将日志分割写在代码里面,对于分割后过期的日志定期删除就很有必要,不然膨胀的日志会占满你的磁盘,将多余的日志 ...