innerHTML在Firefox和Opera下的执行特例

执行

是在CSDN论坛看到的一个问题,平常我也没有注意,或者说没有这样用吧。看代码:

以下是引用片段:
 <body id="www.never-online.net">
 <script>
 var foo = function() {
 var $ = function() { return document.getElementById(arguments[0]); }
 $("d2").innerHTML = $("d1").innerHTML;
 }
 //]]>
 </script>
 <h4>改动两个文本框里的值,把这个容器的innerHTML赋值给d2</h4>
 <button >foo()</button>
 <div id="d1" style="color:red">
 <input value='blog.never-online'/>
 <input value=""/>
 </div>
 <div id="d2">
 </div>
 </body>

不是预期的结果吧?包括在Opera下执行的情况也是与Firefox下相同的,你可以尝试在Opera下运行就明白了。

如果能够得到我们预期的效果呢?我尝试着用__defineGetter__的方法在Mozilla下得到所有的innerHTML,在这里却给了我一些提示。比如: 以下是引用片段:
<script type="text/javascript">

function elementDetail (e) {
  if (!e.attributes) return "";
  var attrs = e.attributes;  var str = "<" + e.tagName;
  for (var i=0; i<attrs.length; i++) {
    str += ' ' +attrs[i].name+ '="' +attrs[i].value+ '"';
  }; str += ">";
  return str;
}
function foo() {
  var a = document.getElementById("d1");
  var str = "";
  for (var i=0; i<a.childNodes.length; i++) {
    var chld = a.childNodes[i];
    str += elementDetail(chld);
  }
  alert(str);
}

</script>

<h4>改动两个文本框里的值,把这个容器的innerHTML赋值给d2</h4>
<button >foo()</button>
<div id="d1" style="color:red">
<input value='blog.never-online'/>
<input value="script by never-online"/>
</div>
<div id="d2">
</div>

上面这些代码虽然达不到预期目的,但是却是要知道一定要得到attribute的值,因此我尝试着用下面这个方法来做。 
<script type="text/javascript">
var $ = function(id) { return document.getElementById(id); }
function foo() {
  $("d2").innerHTML = $("d1").innerHTML;
}
</script>
<h4>改动两个文本框里的值,把这个容器的innerHTML赋值给d2</h4>
<button >foo()</button>
<div id="d1">
<input value='blog.never-online' onkeyup="this.setAttribute('value',this.value)"/>
<input value="script by never-online"/>
</div>
<div id="d2"></div>

这个方法却成功了,也就可以说明,在Mozilla下的innerHTML通过遍历元素的所有节点的tagName还有attrubutes来得到其innerHTML的。因此我们第一个例中的innerHTML得不到改动后的value值。

与此同时,Opera下这一招也可以用。也证明在Opera下的innerHTML也是通过遍历元素的所有节点的tagName还有attrubutes来得到其innerHTML的。

难道w3c里的标准是这样的吗?还没有空来得及查w3c的资料,所以也说不上是Opera与Mozilla下的巧合,还是IE下面比较让开发人员舒服的设计。

时间: 2024-10-26 05:43:49

innerHTML在Firefox和Opera下的执行特例的相关文章

innerHTML在Mozilla Firefox和Opera下执行的一个特例情况。_javascript技巧

改动两个文本框里的值,把这个容器的innerHTML赋值给d2 foo()

aspx页面Url传参在火狐浏览器下Page_Load执行两次的Bug

问题描述 机器环境:Xpsp3+Vs2010+Firefox28.0问题描述:新建一个空的Website,加入一个a.aspx和b.aspxa.aspx页面代码<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="a.aspx.cs"Inherits="a"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transi

支持多浏览器(IE、Firefox、Opera)剪切板复制函数修正版_javascript技巧

需要注意的是,firefox下必须要设置下 signed.applets.codebase_principal_support 在 firefox浏览器地址栏输入about:config 过滤器中输入signed.applets.codebase_principal_support双击设置为true即可支持.因为firefox默认情况下是不支持脚本操作剪切板的. 因为只是什么都不支持的浏览器才是最安全的浏览器. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面是ie firefo

Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题_AJAX相关

需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

透明PNG背景图片&amp;nbsp;For&amp;nbsp;IE&amp;nbsp;6.0&amp;nbsp;Firefox&amp;nbsp;Opera

背景图片|透明 PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是对于PNG图片的支持却不是很理想, Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器.可是IE却不理PNG,使得设计者无法很随意的使用png图片. IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供.我们就利用这个滤镜和

[转]JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本

js根据浏览器的useAgent来判断浏览器的类型 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. JavaScript语法:navigator.userAgent PHP语法:$_SERVER['HTTP_USER_AGENT'] ASP语法:Request.ServerVariables("HTTP_USER_AGENT") ASP.NET语法:HttpContext.Current.Request.UserAgent JSP语法:r

上传-jQuery ajax form提交在IE8下不执行回调函数

问题描述 jQuery ajax form提交在IE8下不执行回调函数 // 上传文件function myUploadExcel(obj) {var options = { url : ""${ctx}/ins/pro/upLoadTempFile.do?filename=""+obj.value dataType : ""text"" beforeSubmit : function(formDatajqFormoption

Firefox与IE下UL预设标记的异同

列表UL或是OL中都有一个预设标记,这个标记可能是实点圆点,也可能是数字.在实际的应用中,我们需要去掉这个预设标记,但我们不清楚这个预设标记是存在于什么位置.因为IE与FF似乎在处理UL的预设标记时都有着不同的方式:我们来写一个UL的HTML代码结构: HTML结构: <ul> <li>建设部通报八起房地产交易违法.违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造

css中的background在firefox ie7 ie6下不同的表示

css中的background在firefox ie7 ie6下不同的表示