[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用
一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最后面
用法:
someNode.appendChild( newNode )
someNode通常为元素的父节点
返回值:
返回新增加的节点
1 <input type="text" name="" id="txt">
2 <input type="button" value="添加" id="add">
3 <ul id="box"></ul>
4 <script>
5 var oBtn = document.querySelector("#add");
6 var oTxt = document.querySelector("#txt");
7 var oBox = document.querySelector("#box");
8 oBtn.onclick = function () {
9 var oLi = document.createElement( "li" );
10 oLi.innerHTML = oTxt.value;
11 var returnNode = oBox.appendChild( oLi );
12 console.log( returnNode === oLi ); //true
13 console.log( returnNode === oBox.lastChild );//true
14 }
15 </script>上例，把文本框的内容当做一个新节点，添加在id为box的元素的最后面，返回值returnNode就是新增加的节点，
所以 第12行和第13行的返回值为ture, lastChild表示元素的最后一个子节点
如果appendChild后面的参数是文档现有的节点，那么表示把当前节点移动到父元素的最后面
1 <input type="button" value="移动" id="btn">
2 <ul id="box">
3 <li><a href="javascript:;">王朝</a></li>
4 <li><a href="javascript:;">马汉</a></li>
5 <li><a href="javascript:;">张龙</a></li>
6 <li><a href="javascript:;">赵虎</a></li>
7 <li><a href="javascript:;">ghostwu</a></li>
8 </ul>
9 <script>
10 var oBtn = document.getElementById("btn");
11 var oBox = document.getElementById("box");
12 oBtn.onclick = function () {
13 var firstChild = oBox.firstElementChild || oBox.firstChild;
14 var lastChild = oBox.lastElementChild || oBox.lastChild;
15 var returnNode = oBox.appendChild( firstChild );
16 firstChild = oBox.firstElementChild || oBox.firstChild;
17 lastChild = oBox.lastElementChild || oBox.lastChild;
18 console.log( returnNode === firstChild ); //false
19 console.log( returnNode === lastChild ); //true
20 }
21 </script>上例，每次点击按钮，把第一个节点移动到最后，所以在第18行为false, 因为移动之后，他就不是第一个节点了，而变成最后一个节点，所以第19行比较结果为true
二、insertBefore：向一个元素前面追加节点
用法:
someNode.insertBefore( newNode, referNode );
第一个参数: newNode，需要插入的节点
第二个参数: referNode, 参考节点，即：newNode会插入到这个参考节点的前面，
注意：如果第二个参数为null, 效果等同于someNode.appendChild( newNode )
返回值:
新插入的节点
1 <input type="text" id="txt">
2 <input type="button" value="添加" id="add">
3 <ul id="box"></ul>
4 <script>
5 var G = function ( id ){ return document.getElementById( id ) };
6 var GG = function ( id, tag ){ return G(id).getElementsByTagName(tag) };
7 var oTxt = G( "txt" ),
8 oBox = G( "box" ),
9 oAdd = G( "add" )
10 aLi = GG( 'box', 'li' );
11 oAdd.onclick = function(){
12 var oLi = document.createElement("li");
13 oLi.innerHTML = oTxt.value,
14 returnNode = null;
15 //等价于oBox.appendChild( oLi )
16 // oBox.insertBefore( oLi, null );
17 // oBox.appendChild( oLi );
18 if( aLi[0] ) {
19 returnNode = oBox.insertBefore( oLi, aLi[0] );
20 }else {
21 returnNode = oBox.insertBefore( oLi, null );
22 }
23 console.log( returnNode );
24 }
25 </script>三、removeChild: 移除一个节点
someNode.removeChild( node )
someNode通常为父元素，node就是父元素下面的一个元素
返回值: 当前被移除的元素
1 <input type="text" name="" id="txt">
2 <input type="button" value="移除" id="remove">
3 <ul>
4 <li>1</li>
5 <li>2</li>
6 <li>3</li>
7 <li>4</li>
8 </ul>
9 <script>
10 var oRemove = document.querySelector( "#remove" );
11 var oUl = document.querySelector( "ul" );
12 oRemove.onclick = function(){
13 var n = parseInt( document.querySelector("#txt").value );
14 var returnNode = oUl.removeChild( oUl.children[n] );
15 console.log( returnNode );
16 }
17 </script>上例，在输入框中， 输入需要移除的子节点的索引，即可完成移除节点操作.
四、replaceChild: 用新节点去替换已经存在的节点
用法
someNode.replaceChild( newNode, node )
第一个参数：新节点
第二个参数: 被替换的节点
返回值: 返回当前被替换的子节点
下例，有点小复杂，用了节点缓存（设计模式中的享元模式）提高替换节点的性能，虽然只有8个节点，如果是上万个节点，会有明显的提高.
1 <input type="button" value="替换" id="replace">
2 <br>
3 <span>第1个元素</span>
4 <span>第2个元素</span>
5 <span>第3个元素</span>
6 <span>第4个元素</span>
7 <span>第5个元素</span>
8 <span>第6个元素</span>
9 <span>第7个元素</span>
10 <span>第8个元素</span>
11 <script>
12 var oReplace = document.querySelector("#replace"),
13 aSpan = document.querySelectorAll("span"),
14 page = 0, //当前页
15 perPage = 4, //每次替换4个
16 total = Math.ceil(aSpan.length / perPage); //总页数
17
18 var cache = (function () {
19 var aEle = [];
20 var create = function () {
21 var oDiv = document.createElement("div");
22 aEle.push(oDiv);
23 return oDiv;
24 };
25 return {
26 getDiv: function () {
27 if (aEle.length < 4) {
28 console.log(1);
29 return create();
30 } else {
31 console.log(2);
32 var oDiv = aEle.shift();
33 aEle.push(oDiv);
34 return oDiv;
35 }
36 }
37 };
38 })();
39 var aCacheSpan = [];
40 oReplace.onclick = function () {
41 var oDiv = null;
42 page ;
43 if (page < 3) {
44 if (aCacheSpan.length > 0) {
45 var oBox = document.querySelector('div');
46 for (var i = 0, len = aCacheSpan.length; i < len; i ) {
47 document.body.insertBefore(aCacheSpan[i], oBox);
48 }
49 aCacheSpan = [];
50 }
51 for (var i = (page - 1) * perPage; i < (page - 1) * perPage perPage; i ) {
52 console.log(aSpan[i].innerHTML);
53 oDiv = cache.getDiv();
54 oDiv.innerHTML = aSpan[i].innerHTML;
55 aCacheSpan.push(document.body.replaceChild(oDiv, aSpan[i]));
56 }
57 }
58 }
59 </script>五、cloneNode: 复制一个节点
用法:
someNode.clone( bool值 )
参数有两种情况:
如果为true: 代表深拷贝: 即复制当前节点和他下面的所有子节点，如果存在行间事件，也会被复制
如果为false: 代表浅拷贝：即复制当前节点，不会复制他下面的子节点
返回值：返回当前被复制的元素
1 <input type="button" value="深拷贝" id="btn1">
2 <input type="button" value="浅拷贝" id="btn2">
3 <ul>
4 <li>1</li>
5 <li>2</li>
6 <li>3</li>
7 <li>4</li>
8 </ul>
9 <script>
10 var oBtn1 = document.querySelector("#btn1");
11 var oBtn2 = document.querySelector("#btn2");
12 var oUl = document.querySelector( "ul" );
13 oBtn1.onclick = function () {
14 var aNode = oUl.cloneNode( true );
15 console.log( aNode );
16 }
17 oBtn2.onclick = function () {
18 var aNode = oUl.cloneNode( false );
19 console.log( aNode );
20 }
21 </script>[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用相关推荐
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用...
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- [js高手之路] dom常用节点属性兼容性详解与应用
一.每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取 window.onload = function(){va ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
最新文章
- java 设置宽度和高度,如何通过设置高度和宽度来使宽度和高度反映ScaleTransform以及如何进行ScaleTransform？...
- 理科生的体面，是不是全在那些幻想里？
- 用Gmail备份多看的推送
- 函数，匿名函数新认知（与预解释、作用域的关系）
- Baidu小窥（一）
- 去除git mergetool不产生*.orig文件
- 中缀转后缀表达式，带括号的后缀表达式综合计算器，Java栈数据结构实现
- Python（十二）：异常
- 下载 嵌入式qt实战教程pdf_嵌入式QT基础视频教程免费分享！
- 《东周列国志》第七十二回 棠公尚捐躯奔父难 伍子胥微服过昭关
- 树莓派ssh远程登录连接默认账号密码
- M6A rna甲基化最新研究成果进展、论文合集（2021年）
- MATLAB读txt
- 设备、设备控制器与驱动程序
- 三门问题（基于贝叶斯分析和python的实现）
- [MySQL进阶]——索引的数据结构
- （附源码）springboot在线学习网站 毕业设计 751841
- 2020年中国智能物联网（AIoT）白皮书
- Python 某电子产品销售数据分析报告及RFM模型（一）
- Windows快捷键笔记