一、浅拷贝:

拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制,

或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用

    <script>
var obj1={
age:24,
sex:"男",
name:"Eric"
}
var obj2={};
//定义一个函数,把a对象中的所有属性复制到对象b中
function extend(a,b){
for(var key in a){
b[key]=a[key];
}
}
extend(obj1,obj2);
console.log(obj2.name);//Eric
console.log(obj2.sex);//男
console.log(obj2.age);//24
</script>

二、深拷贝:

拷贝还是复制,"深"是把一个对象中所有的属性或者方法,一个一个的复制,
并且在另外一个对象中开辟相应的空间,一个一个的存储到另外一个对象中
    <script>
var obj1={
age:25,
sex:"男",
car:["奥迪","特斯拉","五菱"],
dog:{
name:"小白",
age:6,
color:"黄色"
}
};
var obj2={};
//通过函数,把对象a中的所有数据拷贝到对象b中
function extend(a,b){
for(var key in a){
//先获取a对象中每个属性的值
var item=a[key];
//判断这个值是不是数组
if(item instanceof Array){
//如果是数组,在对象b中添加一个新的属性,并且这个属性值也是数组
b[key]=[];
//调用这个方法,把a对象的这个数组的属性值一个一个的复制到b对象这个数组属性中
extend(item,b[key]);
}else if(item instanceof Object){//判断这个值是不是对象类型的
//如果是对象类型的,那么在b对象中添加一个属性,也是对象
b[key]={};
//调用这个方法,把a对象中的属性对象的值.一个一个的复制到b对象的这个属性对象中
extend(item,b[key]);
}else{
//如果是普通的数据,直接复制到b对象这个属性中
b[key]=item;
}
}
}
extend(obj1,obj2);
console.dir(obj2);//见下图
</script>

三、遍历DOM树:

1、代码:

    <div>
<!-- 遍历DOM树 -->
<h1></h1>
<p>
<span></span>
<span></span>
</p>
</div>
<ul>
<li>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</li>
<li></li>
<li></li>
</ul>
<script>
//获取页面中的根节点---根标签
var root=document.documentElement;//html
//根据根节点,调用fn的函数,显示的是根节点的名字
function forDOM(root1){
//调用f1,显示的是节点的名字
f1(root1);
//获取根节点所有的子节点
var children=root1.children;
//调用遍历所有子节点的函数
forChildren(children);
}
//给我子节点,把子节点的所有子节点显示出来
function forChildren(children){
//遍历所有的子节点
for(var i=0;i<children.length;i++){
//每个子节点
var child=children[i];
//显示每个子节点的名字
f1(child);
//判断child下面有没有子节点,如果有子节点,那么就继续遍历
child.children&&forDOM(child);
}
}
function f1(root){
console.log("节点名字:======"+root.nodeName);
}
forDOM(root);
</script>

2、思路

拷贝和遍历DOM树的更多相关文章

  1. 函数遍历DOM树

    //获取页面中的根节点--根标签   var root=document.documentElement;//html   //函数遍历DOM树   //根据根节点,调用fn的函数,显示的是根节点的名 ...

  2. 先序遍历DOM树的5种方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...

  3. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  4. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  5. 遍历DOM树

    遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...

  6. JavaScript 算法应用: 遍历DOM树的两种方式

    1 常见的DOM树结构: 2  DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码

  7. 遍历DOM树,each()遍历

    在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...

  8. 遍历DOM树,理解更新范围

    在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...

  9. 遍历DOM树,链式操作

    如果需要在同一个选取结果上使用多个jQuery方法,可以同时列出这些方法,并用.隔开,如下面的代码. 1 $("#one").hide().delay(500).fadeIn(15 ...

随机推荐

  1. C++ new/delete详解及原理

    学了冯诺依曼体系结构,我们知道: 硬件决定软件行为,数据都是围绕内存流动的. 可想而知,内存是多么重要.当然,我们这里说的内存是虚拟内存(详情看Linxu壹之型). 1.C/C++内存布局 2.C语言 ...

  2. Golang常用快捷键以及常见快捷键冲突

    配置快捷键: 跳转到函数定义 回退 查找函数使用 File/Settings/Keymap 工具: gofmt/golint File/Settings/Tools/File Watchers gol ...

  3. Python2和3字符编码的区别

    Python2和3字符编码的区别 一.字符编码应用之Python 1.1 执行Python程序的三个阶段 Python test.py(我再强调一遍,执行test.py的第一步,一定是先将文件内容从硬 ...

  4. Python开发【第一章】:简介和入门

    Python简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种继承. ...

  5. VMware Workstation Pro 15 序列号

    VMware Workstation Pro 15 序列号: GA70H-8TYE2-H886P-04YZC-YVA84 YG5H2-ANZ0H-M8ERY-TXZZZ-YKRV8 UG5J2-0ME ...

  6. 在论坛中出现的比较难的sql问题:17(字符分拆2)

    原文:在论坛中出现的比较难的sql问题:17(字符分拆2) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必要记录下来 ...

  7. C#在txt类文件中追加内容

    string path = "test.txt"; FileStream mystream = new FileStream(path, FileMode.OpenOrCreate ...

  8. 使用 rm -rf 删除了工程目录,然后从 pycharm 中找了回来

    一次惊险的 rm -rf 操作,以后删东西真的要小心,慢点操作 前两天周 4 周 5,写了两天的 python 代码没有提交,昨天晚上删日志目录,先跨目录查看了下日志目录的列表情况:ll ~/logs ...

  9. Go 操作 Mysql(二)

    查询数据方法回顾整理 上一篇博客中,主要是快速过了一遍 demo 代码和 DB 类型对象中方法的使用 在整理查询数据方法的时候,使用了 Query() 方法,其实 sqlx 还提供了 QueryRow ...

  10. 我是怎么和SAP结缘的 - Jerry的SAP校园招聘之路

    2006年9月,结束了一年的北京中科院实习后,我回到了电子科技大学,此时已经是研三上学期了.有着"金九银十"之称的秋季校园招聘正式开始了. 准备好了简历后,Jerry也加入了浩浩荡 ...