removechild?removechild删除所有子节点
JS中remonveChiled为什么要移除两次才能彻底移除这个div
通过document.body.childNodes来获取body下的所有节点会有一个问题,就是body中的内容中的空格和换行都会被当成body中的一个节点,所以才会出现要删除两次才能真正删除元素的情况。
楼主可以将,<img id='div1'/>和<body>写在同一行,再运行页面,就会发现只用删除一次就可以了。
如果要删除div1这个元素,也可以这么写,
document.body.removeChild(document.getElementById('div1'));
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.complete+”,”;};
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组件缩放图片,测试请先安装该组件。
关于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>
来源:网页链接
…无法获取未定义或 null 引用的属性"removeChild"
这种情况很多时候是文件加载不全或编码不对。这和网络状况、js文件路径、js文件大小、js文件编码等有关。得一项项检查。以前有遇到过使用相对当前页面路径写引用的js路径造成js文件载入不全(在DT里看只载入了一部分),后改为相对网站根目录才恢复,但是有的服务器上又没有这样的情况,不知是何种原因。也有一次是因为js文件的编码和HTML文件的编码不一致,导致问题的出现。当时js文件的代码是从网页上粘贴来的,js文件编码是ansi,网上贴来的是utf-8,网站页面使用的是GBK,贴进js文件里后中文注释变乱码,但是测试时没问题,放到服务器上问题后不定时出现,有时候可以使用js,有时候就报语法错或udefined或null错,后手工一个个字母敲进js文件才搞定。
个人经验,希望对你有帮助。
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以后的用途已经小了
本文链接:http://www.dike88.com/html/87959397.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。