removechild，removechild什么意思

关于js循环执行removeChild 只移除其中一部分的问题

这个问题一般是疏忽的问题，通过getElementsByName获取到的是一个集合，而你循环删除的时候，把第一个元素，也就是obj[0]删除了之后，它后面的另一个元素会位置提升到第一个，这时候，循环过来之后，删除第2个元素obj[1],而这个元素已经实际的位置成了obj[0]所以他就找不到了，所以，循环应该这么写

例子：

<scripttype=”text/j*ascript”>functiondel(){varobj=document.getElementsByName(“GoodsBrowsed”);for(vari=obj.length-1;i>=0;i–){obj[i].parentNode.removeChild(obj[i]);}}</script>

来源：网页链接

flash 中removeChild();的问题

假设通过addChild(mc)生成的几个MC：

var i:uint;

for(i=0; i<5; i++){

var mc:MovieClip= new tempMc();

mc.name=String(“mc”+i);

mc.txt.text=mc.name;

stage.addChild(mc);

}然后在for外面全部删除新生成的MC：var i:uint;

var mc_array:Array=new Array;

for(i=0; i<5; i++){

var mc:MovieClip= new tempMc();

mc.name=String(“mc”+i);

mc.txt.text=mc.name;

mc_array.push(mc);

stage.addChild(mc);

}

function removeMc(){

for each(var _p:MovieClip in mc_array){

stage.removeChild(_p);

}

}

//执行函数，就删除刚才的那些MC

removeMc();不过用removeChild()移除后的东西还会占内存的（这个没办法，当初就这么设计的，汗，因为removeChild只是将显示列表里面的引用设置为null）~..如果想彻底移除的话..可以使用=null或者

removeMc(stage);

function removeMc(mc){

while(mc.numChildren>0){

mc.removeChildAt(0);

}

}

不过后者只是是删除了所有的显示对象，不是删除前面的程序生成的对象

所以按照你的要求应该是使用=null的方法，希望对你有帮助！对了，貌似还有一种方法，不知道对不对，使用delete mc

不过在AS3以后的用途已经小了

js 删除div 用parentNode.removeChild页面没反应

1、您是否在电脑上用短接线了，短接线与您的连接线过长会引起 2、移动硬盘上借口损坏，可以引起（这个情况已经被您排出 3、主机箱上的usb接口有问题，前端usb连接线（主机箱内的）有问题，后端是连在主板上的主板问题我建议您1、首先检查主板上的usb接口是否接触不好2、看看主板是不是有其他问题，电容是否有鼓的？ 3、就是上面的朋友提到的电压不足的问题，这可能穿现在你的主板上的接口上通过您的测试，我感觉您的移动硬盘没有问题，关键是你的主板问题！你到控制面板—-管理工具—计算机管理—磁盘管理—是否看到您的移动硬盘？看到了证明，你的硬盘没问题谢.谢`，麻.烦`采纳.！~.~

…无法获取未定义或 null 引用的属性"removeChild"

这种情况很多时候是文件加载不全或编码不对。这和网络状况、js文件路径、js文件大小、js文件编码等有关。得一项项检查。以前有遇到过使用相对当前页面路径写引用的js路径造成js文件载入不全（在DT里看只载入了一部分），后改为相对网站根目录才恢复，但是有的服务器上又没有这样的情况，不知是何种原因。也有一次是因为js文件的编码和HTML文件的编码不一致，导致问题的出现。当时js文件的代码是从网页上粘贴来的，js文件编码是ansi，网上贴来的是utf-8，网站页面使用的是GBK，贴进js文件里后中文注释变乱码，但是测试时没问题，放到服务器上问题后不定时出现，有时候可以使用js，有时候就报语法错或udefined或null错，后手工一个个字母敲进js文件才搞定。

个人经验，希望对你有帮助。

simpleshow使用方法

使用方法，图片上传预览是一种在图片上传之前对图片进行本地预览的技术。

使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。

但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。

不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。

例如ie7/ie8的滤镜预览法，firefox 3的getasdataurl方法。

但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。

用j*ascript实现图片上传并且预览效果的实现原理处基本思路：

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。

程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。

程序有以下几种预览方式：

simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；

filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；

domfile模式：调用file的getasdataurl方法获取data uri数据来显示预览，适用于ff3；

remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。

程序定义时就自动根据浏览器设置mode属性：

imagepreview.mode=

b.ie7||

b.ie7||

b.ie8?”filter”:

b.firefox?”domfile”:

b.firefox?”domfile”:

b.opera||

b.chrome||

b.chrome||

b.safari?”remote”:”simple”;

如果用能力检测会比较麻烦，所以只用了浏览器检测。

由于浏览器对应的默认模式是不会变的，这个值直接会保存到函数属性中作为公用属性。

ps：ie6也可以用filter模式，不过它有更好的simple模式。

使用说明

实例化时，有两个必要参数，分别是file控件对象和img元素的预览显示对象：

new imagepreview( file, img);

可选参数用来设置系统的默认属性，包括：

属性:默认值//说明

mode: imagepreview.mode,//预览模式

ratio: 0,//自定义比例 j*a免费学习 j*a自学网

maxwidth: 0,//缩略图宽度

maxheight: 0,//缩略图高度

oncheck: function(){},//预览检测时执行

onshow: function(){},//预览图片时执行

onerr: function(){},//预览错误时执行

以下在remote模式时有效

action: undefined,//设置action

timeout: 0//设置超时(0为不设置)

如果要使用remote模式必须设置一个action。

还提供了以下方法：

preview：执行预览*作；

dispose：销毁程序。

具体实现及代码：

【获取数据】

调用preview方法，就会执行预览程序：

if( this.file&& false!== this.oncheck()){

this._preview( this._getdata());

}

在通过检测后，再调用_getdata获取数据，并作为_preview的参数进入下一步。

程序初始化时就会根据mode来设置_getdata数据获取程序：

this._getdata= this._getdatafun(opt.mode);

mode的默认值是imagepreview.mode，也可以在可选参数中自定义。

由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。

在_getdatafun里面，根据mode返回数据获取程序：

复制代码

switch(mode){

case”filter”:

return this._filterdata;

case”domfile”:

return this._domfiledata;

case”remote”:

return this._remotedata;

case”simple”:

default:

return this._simpledata;

}

复制代码

不同的模式有不同的数据获取程序：

滤镜数据获取程序：

this.file.select();

try{

return document.selection.createrange().text;

} finally{ document.selection.empty();}

一般用在ie7/8，在file控件select后再通过selection对象获得文件本地路径。

此时file控件不能隐藏，否则不能被select，不过一般能选择文件就肯定能被select了。

确实要隐藏也可以在获取数据之后再隐藏。

domfile数据获取程序：

return this.file.files[0].getasdataurl();

用getasdataurl从file控件获取数据，这个方法暂时只有ff3支持。

远程数据获取程序：

this._setupload();

this._upload&& this._upload.upload();

用_upload上传文件对象把数据提交后台，根据返回的数据再显示。

这个方法不属于本地预览，是没有办法中的办法。

一般数据获取程序：

return this.file.value;

最原始的方法，现在只有ie6还支持从file的value直接获取本地路径。

获取数据后，作为_preview预览程序的参数，再进行处理：

if(!!data&& data!== this._data){

this._data= data; this._show();

}

首先排除空值或相同值的情况，再执行_show程序进行显示预览，其中_data属性用来保存当前的图片数据。

图片使用data uri数据时可能会设置一个很大的src值，在ie8获取很大的src值会出现“无效指针”的错误。

使用_data属性保存这个值可以避免从src取值而触发这个错误。

远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。

【显示预览】

程序初始化时就会根据mode来设置_show预览显示程序：

this._show= opt.mode!==”filter”? this._simpleshow: this._filtershow;

除了filter模式，都是使用_simpleshow显示程序来显示预览图片的。

里面会先调用_simplepreload方法设置一般预载图片对象：

复制代码

if(!this._preload){

var preload= this._preload= new image(), othis= this,

onload= function(){ othis._imgshow( othis._data, this.width, this.height);};

this._onload= function(){ this.onload= null; onload.call(this);}

preload.onload=

b.ie? this._onload: onload; preload.onerror= function(){ othis._error();};} else if(

b.ie? this._onload: onload; preload.onerror= function(){ othis._error();};} else if(

b.ie){

this._preload.onload= this._onload;

}

复制代码

预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。

要实现这些功能使用image对象就足够了。

在onload中执行_imgshow显示预览，在onerror中进行出错处理。

ps：ff、chrome和safari的图片对象还有naturalheight和naturalwidth属性可以获取图片的原始尺寸，即使图片尺寸已经修改过。

这里要注意ie6/7的gif图片载入bug，测试以下代码：

<!doctype html><body><img id=”img”/><div id=”div”></div></body>

<script>

img.onload= function(){ div.innerhtml+= this*plete+”,”;};

img.src=””;

</script>

一般图片执行一次onload后并不会重复执行，但ie6/7的gif每次循环播放都会执行一次onload。

ps：ie8在非标准（怪辟）模式下也有相同的问题。

可以在onload的时候，判断complete是否为false来判断是否重复加载。

ps：除了ie，其他浏览器在onload时complete就已经为true了。

问题是选择另一个图片时这个complete仍然是true，这样就没有意义了。

所以只好在onload里面重置onload为null，并在每次选择文件重设onload了。

然后设置_preload的src预载图片，如果成功预载就会执行_imgshow显示预览。

要注意src的设置要在onload/onerror的设置之后，否则设置之前就加载完成的话就触发不了*了。

_imgshow需要三个参数，包括要预览图片的src值，图片原始宽度和图片原始高度。

在_imgshow里面首先设置预览图片的尺寸：

复制代码

var img= this.img, style= img.style,

ratio= math.max( 0, this.ratio)|| math.min( 1,

math.max( 0, this.maxwidth)/ width|| 1,

math.max( 0, this.maxheight)/ height|| 1

);

style.width= math.round( width* ratio)+”px”;

style.height= math.round( height* ratio)+”px”;

复制代码

这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。

自动计算首先要确保maxwidth最大宽度和maxheight最大高度大于等于0。

然后分别跟原始宽高做“/”运算得到比例，如果比例为0表示不限制，那么比例就自动改为1。

最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。

当然比例的计算可以根据需要自行修改。

ps：style的优先级比属性(width/height)高，所以要用style设置。

最后设置img的src就可以实现预览了。

【remote模式】

remote模式会先提交file控件到后台，通过返回的数据来显示图片。

它跟其他模式最大的区别就是获取数据的部分。

在_remotedata远程数据获取程序中，会调用_setupload来设置上传文件对象。

如果设置了action，并存在quickupload函数，就会实例化一个上传文件对象保存到_upload中：

复制代码

var othis= this;

this._upload= new quickupload(this.file,{

onready: function(){

this.action= othis.action; this.timeout= othis.timeout;

var parameter= this.parameter;

parameter.ratio= othis.ratio;

parameter.width= othis.maxwidth;

parameter.height= othis.maxheight;

},

onfinish: function(iframe){

try{

othis._preview( iframe.contentwindow.document.body.innerhtml);

}catch(e){ othis._error(“remote error”);}

},

ontimeout: function(){ othis._error(“timeout error”);}

});

复制代码

这里使用的quickupload就是简便无刷新文件上传程序。

在onready中设置参数，在onfinish中处理返回数据，ontimeout进行出错处理。

返回的数据可以是图片的地址或对应的data uri数据，然后给_preview处理。

当然针对不同的后台输出，数据处理的方式也不同，可以按照需要修改。

后台最好先根据传递的参数缩小图片，尽量减少返回数据来提高预览速度。

【filter模式】

filter模式在_filterdata程序中得到文件本地路径，但ie7/8都不允许直接使用本地路径显示图片。

不过还是可以通过滤镜，用本地路径来做预览图片效果。

filter模式使用_filtershow方法来显示预览图片。

里面先调用_filterpreload方法来设置滤镜预载图片对象。

跟一般预载图片对象不同，滤镜预载对象是用滤镜来显示图片，所以并不一定要图像元素。

程序就使用了div元素作为滤镜预载对象：

复制代码

var preload= this._preload= document.createelement(“div”);

$$d.setstyle( preload,{

width:”1px”, height:”1px”,

visibility:”hidden”, position:”absolute”, left:”-9999px”, top:”-9999px”,

filter:”progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='image')”

});

var body= document.body; body.insertbefore( preload, body.childnodes[0]);

复制代码

在样式设置中隐藏元素并添加滤镜，要使滤镜生效width和height必须设置一个值。

由于要获取尺寸，只能用visibility来隐藏并*body，关于alphaimageloader滤镜后面再介绍。

然后在_filtershow中预载图片：

try{

preload.filters.item(“dximagetransform.microsoft.alphaimageloader”).src= data;

}catch(e){ this._error(“filter error”); return;}

成功的话，再给img载入图片：

this.img.style.filter=”progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='scale',src=\””+ data+”\”)”;

注意，如果路径中有“)”，“%”这类字符的话，直接拼接到滤镜字符串中会出现类似sql注入的问题。

程序会先对这些敏感字符进行escape编码：

data= this._data.replace(/[)'”%]/g, function(s){ return escape(escape(s));});

为什么要做两次escape编码呢？测试时发现“%”只转一次的话，遇到“%40”之类的字符时还是会出问题。

所以我推测，字符在使用前会进行两次unescape解码，于是对应的做两次escape编码果然没问题了。

虽然预载对象是直接设置滤镜的src属性，但也有“%”的拼接字问题，所以也要escape编码。

ps：虽然单引号和双引号这里并不是必要，还是一起替换掉安心点。

还要注意预览对象不要用filters.item的方式设置滤镜。

因为元素*文档之前，并不能通过filters.item获取滤镜对象，但能通过style预先设置filter。

所以在不确定元素位置的情况下，只能用style来设置filter了。

最后调用_imgshow设置尺寸：

this._imgshow( imagepreview.transparent, preload.offsetwidth, preload.offsetheight);

由于img是一个图片对象，默认会显示一个小图标，为了去掉这个小图标，可以让它显示一个透明图片。

程序传递了imagepreview.transparent来设置透明图片，具体数据在data uri和 mhtml再说明。

ps：当然也可以在filter模式用div做预览图片对象就没有小图标了，但这样兼容起来会麻烦很多。

【alphaimageloader滤镜】

filter模式使用的是alphaimageloader滤镜。

它的作用是在对象容器边界内，在对象的背景和内容之间显示一张图片。

如果载入的是png图片，其透明度会被支持，因此它更多地用来解决png的兼容问题。

详细参考msdn的alphaimageloader filter和“microsoft.alphaimageloader滤镜讲解”。

它包括三个属性：enabled（滤镜是否激活），sizingmethod（图像显示方式）和src（图像路径）。

程序主要使用后面两个属性。

sizingmethod有三种方式：

crop：剪切图片以适应对象尺寸；

image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸；

scale：缩放图片以适应对象的尺寸边界。

预载图片对象_preload，需要获取图片的原始尺寸，所以要用image方式。

而预览图片对象img，则要按设定尺寸显示图片，所以要用scale方式。

而src属性设置的路径还支持本地路径，是实现filter模式的关键所在。

还好滤镜并没有像file控件那样提高安全性，否则ie7/8就没有办法实现本地预览了。

【nsidomfile接口】

ff从3.0（或许更早）开始，就不能通过file控件的value属性获取文件本地路径，也不支持直接用本地路径显示图片。

不过欣喜的是，它同时也提供了nsidomfile接口，能更好地获取文件数据。

在ff的file控件有一个filelist对象，包含了带nsidomfile接口的file对象。

ps：filelist对象貌似是一个nodelist集合，但目前只能用第一个，可能是为了将来实现一个file控件选择多个文件的功能预留的。

这个file对象有三个获取文件数据的方法：

getastext：获取文件的文本数据，可以通过参数设置编码；

getasdataurl：获取文件的data uri(url?)数据；

getasbinary：获取文件的二进制数据。

其中getasdataurl获得的data uri数据可以用于显示图片，_domfiledata中就是用它来获取数据的。

file对象还支持两个属性：filename（文件名，不包括路径）和filesize（文件大小）。

相关具体说明参考mozilla的file和nsidomfile。

【data uri和 mhtml】

上面已经多次提到data uri，详细介绍请看秦歌的“data uri和 mhtml”。

data uri的主要作用是以字符代替数据，从而把文件“嵌”在代码里。

除了ie，其他浏览器基本都很好的支持了data uri。

ie8也有限度地支持，详细参考msdn的data protocol。

由于opera，safari和chrome需要remote模式的浏览器都支持data uri，所以程序返回的是data uri形式的数据。

相比返回路径的方法，返回data uri不需要创建文件，还少一次http请求。

ps：ie8只支持32k的data uri数据，在ie8使用时要注意数据大小。

在filter模式需要一个透明图片来去掉img默认显示的小图标，一般的方法需要一个图片文件。

为了“省下”这个文件，可以使用data uri来做一个1*1的透明图片：

data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==

支持data uri的情况下，只要把img的src设置为这个值就可以显示一个透明图片了。

虽然ie6/7不支持data uri，但还有mhtml可以使。

在imagepreviewd.js开头有一段注释了的代码：

复制代码

content-type: multipart/related; boundary=”_cloudgamer”

–_cloudgamer

content-location:blankimage

content-transfer-encoding:base64

r0lgodlhaqabajeaaaaaap///waaach5baeaaaialaaaaaabaaeaaaicvaeaow==

复制代码

其中boundary的值是分隔符标识，说明用于分隔数据段的字符。

content-location说明关联引用位置，可以用作数据段的标识。

content-transfer-encoding就是字符编码形式。

后面的代码就是1*1的透明图片的base64编码数据。

然后在代码中这样调用（例如设置img元素的src属性）：

mhtml:文件完整路径!blankimage

就可以链接到一个透明图片了。

接着就要解决如何获得script（js文件）的完整路径（包含http开头的路径）的问题了。

首先要在脚本运行时获取，当前运行的script肯定是document.scripts的最后一个：

document.scripts[document.scripts.length- 1]

ps：ff不支持document.scripts，可以用getelementsbytagname(“script”)来兼容。

接着可以利用getattribute从src获取script的完整路径：

document.scripts[document.scripts.length- 1].getattribute(“src”, 4)

ie6/7的getattribute支持第二个参数，设为4表示返回完整路径的url地址，详细参考msdn的getattribute method。

结合data uri和 mhtml可以这样得到透明图片数据：

imagepreview.transparent=

b.ie7||

b.ie7||

b.ie6?

“mhtml:”+ document.scripts[document.scripts.length- 1].getattribute(“src”, 4)+”!blankimage”:

“data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==”;

使用时要注意：

脚本必须单独另存为一个文件，作为mhtml需要的文件路径。

要自动获取完整路径需要用script标签链接文件。

【超空间】

程序还有一个dispose方法用于销毁程序。

包括这几个部分：

_upload上传文件对象：它本身已经有一个dispose方法来销毁程序；

_preload预载图片对象：先清除它的onload/onerror*再移除元素；

file和img属性：直接设为null，由于不是程序创建的元素，留给使用者来移除。

说到移除元素，顺便说一下超空间（dom hyperspace），这是从“ppk谈j*ascript”中看到的。

大概指的是当元素不在dom里面，而js又有关联时，元素并不会消失，而是保存在一个称为“超空间”的地方。

详细参考书的dom超空间部分。

书中还说可以根据是否有parentnode来判断元素是否在超空间，但测试以下代码：

复制代码

<body></body>

<script>

var elm= document.createelement(“div”);

alert(elm.parentnode);

document.body.removechild(document.body.appendchild(elm));

alert(elm.parentnode);

</script>

复制代码

第一次parentnode都是null，没有问题，按理第二次也应该是null，但ie却是一个object。

经测试，这个object的nodetype是11，也就是一个碎片对象（fragment）。

而且各个被removechild移除的元素的parentnode都不相同，即会生成不同的碎片对象。

这种情况算不算在“超空间”呢，不过书中也只是说“一般来说”，也不用太考究。

那么用innerhtml清除呢？再测试以下代码：

<body><div id=”test”></div></body>

<script>

var elm= document.getelementbyid(“test”);

document.body.innerhtml=””;

alert(elm.parentnode);

</script>

结果在ie也是null了，看来removechild和innerhtml在清除元素时产生了不同的结果。

那个碎片对象貌似没什么用（难道为了保证有parentnode？），那是不是innerhtml就一定比removechild好呢？

再测试以下代码：

复制代码

<body>

<style>div{border:1px solid#000; height:20px;}</style>

<span><div id=”test1″>test1</div></span>

<span><div id=”test2″>test2</div></span>

</body>

<script>

var div1= document.getelementbyid(“test1”), parent1= div1.parentnode;

parent1.removechild(div1);

alert(div1.tagname+”:”+ div1.innerhtml);

parent1.appendchild(div1);

var div2= document.getelementbyid(“test2”), parent2= div2.parentnode;

parent2.innerhtml=””;

alert(div2.tagname+”:”+ div2.innerhtml);

parent2.appendchild(div2);

</script>

复制代码

当使用removechild时，移除元素的结构并没有发生变化，各个浏览器的效果都一样。

而使用innerhtml清除时，其他浏览器的效果跟removechild一样，但在ie被移除的元素就只剩下一个“外壳”了。

个人推测，ie在使用innerhtml时，被移除的元素会变成一个个单独的元素，失去了彼此的联系。

形象点说就是removechild是直接掰断树枝，还能继续嫁接使用，而innerhtml是把需要的树叶节点取下来，再把树枝烧掉。

ps：仅仅是推测，谁有官方资料请告诉我。

那么removechild的好处是移除的元素能再次使用，兼容性好，不好的地方是ie会产生一个没用的碎片对象。

而innerhtml的好处是不会产生多余的碎片对象，方便高效，但在ie被移除的元素基本不能再用，有兼容性问题。

那就可以根据需要使用不同的方法了，至于防止内存泄漏用那个好，感觉是innerhtml，但没有更深入研究的话还说不清楚。

使用技巧

一般来preview方法都是在onchange中调用，即选择文件后立即显示预览。

在不需要程序时最好执行一次dispose方法来销毁程序，防止内存泄漏等。

利用imagepreview.transparent可以显示透明图片，而不需另外隐藏或增加文件。

第二个实例中的resetfile是用来重置file控件的，详细参考这里file的reset。

而file控件样式设置详细参考这里的file样式。

asp版本使用persits.jpeg组件缩放图片，测试请先安装该组件。