1. myList.cloneNode(true); 在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树,包括属性

2. myList.cloneNode(false); 在参数为false 的情况下,执行浅复制,即只复制节点本身,包括属性

  cloneNode()方法不会复制添加到DOM 节点中的JavaScript 属性,例如事件处理程序等。这个方法只复制特性、(在明确指定的情况下也复制)子节点,其他一切都不会复制。IE 在此存在一个bug,即它会复制事件处理程序,所以我们建议在复制之前最好先移除事件处理程序。

3. Node类型 

  DOM1 级定义了一个Node 接口,该接口将由DOM 中的所有节点类型实现。这个Node 接口在JavaScript 中是作为Node 类型实现的;除了IE 之外,在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自Node 类型,因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType 属性,用于表明节点的类型。节点类型由在Node 类型中定义的下列12 个数值常量来表示,任何节点类型必居其一:

 Node.ELEMENT_NODE(1);
 Node.ATTRIBUTE_NODE(2);
 Node.TEXT_NODE(3);
 Node.CDATA_SECTION_NODE(4);
 Node.ENTITY_REFERENCE_NODE(5);
 Node.ENTITY_NODE(6);
 Node.PROCESSING_INSTRUCTION_NODE(7);
 Node.COMMENT_NODE(8);

 Node.DOCUMENT_NODE(9);
 Node.DOCUMENT_TYPE_NODE(10);
 Node.DOCUMENT_FRAGMENT_NODE(11);
 Node.NOTATION_NODE(12)。

4. DocumentFragment类型 文档片段

文档片段继承了Node 的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会将文档片段的所有子节点添加到相应位置上;文档片段本身永远不会成为文档树的一部分。来看下面的HTML 示例代码:

<ul id="myList"></ul>
假设我们想为这个<ul>元素添加3 个列表项。如果逐个地添加列表项,将会导致浏览器反复渲染(呈现)新信息。为避免这个问题,可以像下面这样使用一个文档片段来保存创建的列表项,然后再一次性将它们添加到文档中。
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);

在这个例子中,我们先创建一个文档片段并取得了对<ul>元素的引用。然后,通过for 循环创建3 个列表项,并通过文本表示它们的顺序。为此,需要分别创建<li>元素、创建文本节点,再把文本节点添加到<li>元素。接着使用appendChild()将<li>元素添加到文档片段中。循环结束后,再调用appendChild()并传入文档片段,将所有列表项添加到<ul>元素中。此时,文档片段的所有子节点都被删除并转移到了<ul>元素中。

5.使用NodeList

理解NodeList 及其“近亲”NamedNodeMap 和HTMLCollection,是从整体上透彻理解DOM的关键所在。这三个集合都是“动态的”;换句话说,每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息。从本质上说,所有NodeList 对象都是在访问DOM文档时实时运行的查询。例如,下列代码会导致无限循环:

var divs = document.getElementsByTagName("div"),
i,
div;
for (i=0; i < divs.length; i++){
div = document.createElement("div");
document.body.appendChild(div);
}

第一行代码会取得文档中所有<div>元素的HTMLCollection。由于这个集合是“动态的”,因此只要有新<div>元素被添加到页面中,这个元素也会被添加到该集合中。浏览器不会将创建的所有集合都保存在一个列表中,而是在下一次访问集合时再更新集合。结果,在遇到上例中所示的循环代码时,就会导致一个有趣的问题。每次循环都要对条件i < divs.length 求值,意味着会运行取得所有<div>元素的查询。考虑到循环体每次都会创建一个新<div>元素并将其添加到文档中,因此divs.length 的值在每次循环后都会递增。既然i 和divs.length 每次都会同时递增,结果它们的值永远也不会相等。如果想要迭代一个NodeList,最好是使用length 属性初始化第二个变量,然后将迭代器与该变量进行比较,如下面的例子所示:
var divs = document.getElementsByTagName("div"),
i,
len,
div;
for (i=0, len=divs.length; i < len; i++){
div = document.createElement("div");
document.body.appendChild(div);
}
这个例子中初始化了第二个变量len。由于len 中保存着对divs.length 在循环开始时的一个快照,因此就会避免上一个例子中出现的无限循环问题。在本章演示迭代NodeList 对象的例子中,使用的都是这种更为保险的方式。一般来说,应该尽量减少访问NodeList 的次数。因为每次访问NodeList,都会运行一次基于文档的查询。所以,可以考虑将从NodeList 中取得的值缓存起来。

js复制对象 和 节点类型和NodeList的更多相关文章

  1. js原型对象与Java类的比较

    在我学习Javascript的原型对象时,我总是不自觉地拿Java的类思想来做比较,时间久了,我渐渐认识到二者有巨大的不同. 首先,类是不能直接当方法来运行,它最简便的方式是调用其静态方法:而原型对象 ...

  2. js 复制对象的深复制与浅复制

    1.潜复制(修改新对象会改变原对象) var baz = {a:'hello', b: {c:'my', d:'friend'}} var foo = baz foo.a="better&q ...

  3. JS基础_数据类型-Null类型和Undefined类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS 复制对象

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  5. JS复制对象

    CSSCommonJS.DeepCopy = function (json) { if (typeof json == 'number' || typeof json == 'string' || t ...

  6. 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间

    [源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...

  7. 关于js的闭包和复制对象

    一.有关js的闭包 1.概念:所谓的闭包,就是指的两个作用域,其中内层作用于可以访问外层作用域的函数的现象 2.简单应用 for(var i = 0;i< lis.lenth;i++){ (fu ...

  8. js中Boolean类型和Number类型的一些常见方法

    Boolean类型 Boolean类型重写了valueOf() 方法, 返回基本布尔类型值true或false,重写了toString() 方法,返回基本字符串"true" 和 & ...

  9. java中复制对象通过反射或序列化

    在使用缓存读取数据后修改发现缓存被修改.于是找了下复制对象的方法. 关于对象克隆 按我的理解,对象是包含引用+数据.通常变量复制都是将引用传递过去.比如: Person p1 = new Person ...

随机推荐

  1. python 二分法查找实例(递归、循环)

    二分法,主要应用于有序序列中,原理是每次查找都将原序列折半,逐渐缩小查找范围的一种算法. 需求 要求在一个有序序列中,例如[0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30 ...

  2. Java微博搜索关键字采集

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  3. Linux(CentOS) 如何查看当前占用CPU或内存最多的K个进程

    一.可以使用以下命令查使用内存最多的K个进程 方法1: ps -aux | sort -k4nr | head -K 如果是10个进程,K=10,如果是最高的三个,K=3 说明:ps -aux中(a指 ...

  4. 让 BAT 的 Offer 不再难拿

    随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得.由于我面试的都是比较大的公司,所以自然也是做了这方面的准备,因此这篇总结并不一定适合想去创业公司的同学.另 ...

  5. jquery滚动到指定元素,模仿锚点

    html <div class="pd-nav"> <div class="n-item active"> 保险服务 <i> ...

  6. [Awson原创]洪水(flood)

    Description Awson是某国际学校信竞组的一只菜鸡.今年,该市发生了千年难遇的洪水.被监禁在学校的Awson不甘怠堕,想将自己投入到公益服务事业中去.这天,他偷了H老师的小电驴,偷偷地溜出 ...

  7. vue组件自定义属性命名

    今天自己写vue组件demo的时候发现一个有趣的问题:vue组件自定义属性命名不支持用驼峰命名! 上面图示为正常情况下的自定义属性,没有任何问题. 但是一旦出现自定义属性中包含了大写字母,则如下图所示 ...

  8. Linux 中如何避免 rm -rf /*

    Linux 的删除命令中 rm中没有回收站的概念,一旦文件被删除比较难还原.更可怕的是rm -rf /*,连自己都能删 这命令太危险了,弄错了就核爆了,带来的损失的巨大的.比如 Gitlab.com ...

  9. HDU 1018(阶乘位数 数学)

    题意是求 n 的阶乘的位数. 直接求 n 的阶乘再求其位数是不行的,开始时思路很扯淡,想直接用一个数组存每个数阶乘的位数,用变量 tmp 去存 n 与 n - 1 的阶乘的最高位的数的乘积,那么 n ...

  10. 阿里云服务器ubuntu 配置

    由于阿里云的导入自定义 ubuntu 镜像需要开通 OSS 快照是收费的(看着感觉不贵,但是也很麻烦),而且自己已配置好的镜像想导入需要转换格式,还存在不能使用的情况,所以麻烦点直接在阿里云原来的ub ...