拷贝和遍历DOM树
一、浅拷贝:
拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制,
或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用
<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树的更多相关文章
- 函数遍历DOM树
//获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名 ...
- 先序遍历DOM树的5种方法
DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...
- jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...
- JS高级---遍历DOM树
遍历DOM树 第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点) 获取这个根节点的子节点 var children=根节点的.children 调用第二个函数 第二个 ...
- 遍历DOM树
遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...
- JavaScript 算法应用: 遍历DOM树的两种方式
1 常见的DOM树结构: 2 DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码
- 遍历DOM树,each()遍历
在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...
- 遍历DOM树,理解更新范围
在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...
- 遍历DOM树,链式操作
如果需要在同一个选取结果上使用多个jQuery方法,可以同时列出这些方法,并用.隔开,如下面的代码. 1 $("#one").hide().delay(500).fadeIn(15 ...
随机推荐
- JVM内存管理(一)--GC简介
GC策略解决了哪些问题? 既然是要进行自动GC,那必然会有相应的策略,而这些策略解决了哪些问题呢,粗略的来说,主要有以下几点. 1.哪些对象可以被回收. 2.何时回收 ...
- 设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇)
登录 保存密码 安全 加密 最近发现群内大伙对用Hbuilder做的APP怎么做登录功能以及维护登录状态非常困惑,而我前一段时间正好稍微研究了一下,所以把我知道的告诉大家,节约大家查找资料的时间. 你 ...
- sqlserver exists 与 in 的区别
使用 EXISTS 方式 select * from A a where EXISTS(select b.mainInfoId from B b where b.mainInfoId=a.main ...
- jmeter接口测试中的用例数据分离
用jmeter做接口测试的话,一个jmx文件就可以是一个用例,而用例的设计多数还是等价类.边界值等方法.用例越来越多的时候,维护比较麻烦,所以可以把用例的数据存在csv文件中,然后通过组件(CSV D ...
- RabbitMQ集群部署、高可用和持久化
RabbitMQ 安装和使用 1.安装依赖环境 在 http://www.rabbitmq.com/which-erlang.html 页面查看安装rabbitmq需要安装erlang对应的版本 在 ...
- 前端开发 Vue -4promise解读2
https://www.runoob.com/vue2/vue-tutorial.html promise promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执 ...
- Java集合源码阅读之HashMap
基于jdk1.8的HashMap源码分析. 引用于:http://blog.stormma.me/2017/05/31/Java%E9%9B%86%E5%90%88%E6%BA%90%E7%A0%81 ...
- Map和TreeMap的特点
Map的特点: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 TreeMap的特点: 无序,不允许重复(无序指元素顺序与添加顺序不一致) TreeMap集合默认会对键进行排 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 他爬取了B站所有番剧信息,发现了这些……
本文来自「楼+ 之数据分析与挖掘实战 」第 4 期学员 -- Yueyec 的作业.他爬取了B站上所有的番剧信息,发现了很多有趣的数据- 关键信息:最高播放量 / 最强up主 / 用户追番数据 / 云 ...