操作节点的方法

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用不同方法获取节点及对节点插入、复制和移除的更多相关文章

  1. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  3. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  4. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  5. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  6. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  7. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  8. JS(基础)_总结获取页面中元素和节点的方式

    一.前言 1.元素和节点的区别 2.总结获取元素的方式 3.总结获取节点的方式 二.主要内容 1.结点和元素的区别 (1)一些常见基本概念: 文档:document 元素:页面中所有的标签 结点:页面 ...

  9. 遍历DOM树,获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

随机推荐

  1. Spring Cloud Zuul之ZuulFilter详解

    简介 Spring Cloud Zuul网关在整个微服务体系中肩负对外开放接口.请求拦截.路由转发等作用,其核心处理则是ZuulFilter ZuulFilter部分源码 Zuul Filter全部继 ...

  2. Kubernetes-Service资源详解

    service的三种工作模式:(userstats(效率低).iptables.ipvs) service可以自动实现负载均衡.service自动实现了负载均衡,service通过selector标签 ...

  3. sc,sockname = sock.accept()

    tcpSerSock.accept()返回两个结果,第一个放入tcpClisock,第二个放入addr. 这是python特有的语法.可以接收多个返回值.

  4. python学习记录(二)

    0824--https://www.cnblogs.com/fnng/archive/2013/02/24/2924283.html 如果需要写一个非常非常长的字符串,它需要跨多行,那么,可以使用三个 ...

  5. 1 使用MySQL

    1.1 连接 主机名(localhost) 端口(3306) 一个合法的用户名 用户口令 1.2 选择数据库 USE crashcourse 1.3 了解数据库和表 SHOW databases; s ...

  6. Python常用库 - logging日志库

    logging的简单介绍 用作记录日志,默认分为六种日志级别(括号为级别对应的数值) NOTSET(0) DEBUG(10) INFO(20) WARNING(30) ERROR(40) CRITIC ...

  7. My introduction

    Vistors 访客统计

  8. postman批量接口测试/批量导入/批量参数化简要全过程及遇到问题处理方法

    简单说明下postman批量接口调用的过程及注意事项: 1.报文调试(建议先调通再批量执行,统筹安排时间) 2.参数化,例如: "address": "{{address ...

  9. 04-Spring01-IOC

    今日知识 1. Spring IOC控制反转(Inverse of control) 2. Spring DI依赖注入(Dependency Injection ) Spring 1. 概念:简单来说 ...

  10. zabbix-server配置文件详解

    zabbix官方文档:https://www.zabbix.com/documentation/4.0/zh/manual zabbix-server端的配置文件在/etc/zabbix/zabbix ...