JS 动态获取节点代码innerHTML分析 [IE,FF]

<div id="parentnode">
<span id="childnode">child</span>
</div>
<script type="text/javascript">
var childNode = document.getElementById("childnode") , parentNode = document.getElementById("parentnode");
</script>

当为子节点添加默认属性时：
childNode.className = "childClass"; 或： childNode.className = new String("childClass");
parentNode.innerHTML IE,FF都能获得 [ <span class="childClass" id="childnode">child</span> ]

当为子节点添加私有属性时：
childNode.type = "childType";
parentNode.innerHTML 当且仅当 IE能获得 [ <span type="childType" id="childnode">child</span> ]
childNode.type = new String("childType"); //Object对象
parentNode.innerHTML IE,FF都不能获得 [ <span id="childnode">child</span> ]

childNode.setAttribute("type","childType");
parentNode.innerHTML IE,FF都能获得 [ <span class="childClass" id="childnode">child</span> ]
childNode.setAttribute("type", new String("childType"));
parentNode.innerHTML 当且仅当 FF能获得 [ <span class="childClass" id="childnode">child</span> ]

当对元素动态添加私有属性后获取innerHTML，如果采用.属性 方式赋值，无论哪种数据类型FireFox都不能获得，如果当赋值的类型是个对象的话IE不能通过innerHTML获得。
如果使用setAttribute方法赋值时，无论哪种数据类型FireFox都能获取，如果当赋值的类型是个对象的话IE不能获取 。
总结：在IE 环境下 赋值类型为对象时 innerHTML 获取不到其改变，在FireFox环境下 .属性 方式获取不到其改变。

赞 (0)

相关推荐

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • Js 获取HTML DOM节点元素的方法小结

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取:          (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已经出现了如proto

  • JS 获取HTML标签内的子节点的方法

    子节点的个数: document.getElementById("id").childNodes.length 注意: 标签开/闭合算2个节点 第几个子几点: document.getElementById("id").childNodes[n] 示例: 这里是 length-4 处,margin-left:20px 输出:length=8 实例: <div id="page_kx" style="text-align: cent

  • js获取html页面节点方法(递归方式)

    很久没有操作过递归调用了.看完之后,蓦然惊醒啊! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • JS 动态获取节点代码innerHTML分析 [IE,FF]

    <div id="parentnode"> <span id="childnode">child</span> </div> <script type="text/javascript"> var childNode = document.getElementById("childnode") , parentNode = document.getElementByI

  • js动态获取时间的方法分析

    js动态获取时间的方法分析

    本文实例讲述了js动态获取时间的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> function show_cur_times(){ //获取当前日期 var date_time = new Date(); //定义星期 var week; //switch判断 switch (date_time.getDay()){ case 1: week="星期一"; break; case 2: week=

  • js动态获取子复选项并设计全选及提交的实现方法

    在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加上onclick事件,并默认类别1为选择状态. <input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked=&q

  • 详解js动态获取浏览器或页面等容器的宽高

    详解js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body

  • JS动态获取当前时间,并写到特定的区域

    复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>   <script type="text/jav

  • echarts动态获取Django数据的实现示例

    echarts动态获取Django数据的实现示例

    目录 一.后端 二.前端 三.页面效果 四.总结 在开发过程中我们需要将我们的数据通过图标的形式展现出来,接下来我为大家介绍一个有趣的框架:Echarts.这是一个使用JavaScript实现的开源可视化库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数据可视化的关系图.treemap.旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭(官网照抄,有兴趣的小伙伴可以去官网发现更多ec

  • JS使用ajax从xml文件动态获取数据显示的方法

    本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; var txt,x,xx,i; if (window.XMLHttpRequest) {// code for IE7+,

  • 兼容IE,firefox的获取节点的文本值的javascript代码

    我们知道通过浏览器自带的innerHTML属性能够获取节点的所包含的字符串的值,比如有如下节点: 复制代码 代码如下: <div id="test"><strong>i'm strong</strong></div> 通过 复制代码 代码如下: var obj=document.getElementById("test");alert(obj.innerHTML);//返回的值是<strong>i'm st

  • js中获取 table节点各tr及td的内容简单实例

    <table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>

  • js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

    js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

    引言 前段时间发了一个编辑器的插件,忙完后自己再次进行了详细的测试,然后心里冒出一句:"这谁写的这么奇葩的插件?完全没什么luan用啊!" 自己做了让自己不满意的事,咋整?男人不怕累,花了时间重写(为世界上所有像我一样勤劳的男人点赞)~ 思维导图 在小生看来,在开发每一个新功能的时候都应该做到心中有一张思维导图:功能实现逻辑和实现功能大致的方法.当然我们不可能在还没动手 前就考虑得面面俱到,但在正式开发之前心里对整个流程有个清晰的印象肯定会让我们在动手时愈加流畅(喝口娃哈哈美滋滋,看图

随机推荐