js对html元素自定义属性的操作

<html>
<head>
<script>
   function tree(tree_id)
   {
           //alert(tree_id);
       var _tree_id=tree_id;
       var _otree=document.getElementById('tree_a');
                //alert(_otree);
       //添加接点
       this.addnode=function(pnode,node_id,node_title,node_url)
       {
           if(pnode==null)
           {
               var _tmpnode=document.createElement('div');
               _tmpnode.innerHTML="<table><td style='width:0px;'> </td>"
                    + "<td><img src='' /><a href='"+node_url+"'>"+node_title+"</a></td></table>";
               //alert(_tmpnode.innerHTML);
               _otree.appendChild(_tmpnode);
                                _tmpnode.setAttribute('info','aaaaa');
                                return _tmpnode;
           }
                        return null;
       }
   }

   var otree;

   window.onload=function()
   {
        //alert('kk');
            otree=new tree('tree_a');
        var xx=otree.addnode(null,1,'jkllj','1.htm');
            alert(xx.getAttribute("ilevel"));   //ie firefox     ,其他仅ie xx.attributes["info"].nodeValue
            otree.addnode(null,2,'abc','1.htm');
   }
</script>
</head>

<body>
   <div id='tree_a'>

   </div>
</body>
</html>

参考：

javascript/js对html元素自定义属性的操作(兼容Firefox和IE)

分类： JS与AJAX 2011-10-08 14:54 1269人阅读评论(0) 收藏举报
firefoxhtmlieinputjavascriptattributes
很多情况下，我们常常通过javascript对HTML元素的属性进行操作，如获取或设置以下html代码块中input元素的value;
1

<input id="input_btn" type="button" value="kanqd.com" />

我们常常会写以下的代码：
1
2

var inputObj = document.getElementById('input_btn');
alert(inputObj.value);

如我们所想的一样，页面上弹出kanqd.com.

问题: 在一些应用产景中，我们需要对html元素的添加一些自定义属性以满足应用，比如，对给以上input标记加一个info属性，代码如下：
1

<input id="input_btn" type="button" value="kanqd.com" info="this is a self defined attribute" />;

如果我们还是以同样的代码进行操作：
1
2

var inputObj = document.getElementById('input_btn');
alert(inputObj.info);

执行后会发现，在IE中弹出”this is a self defined attribute” , 但在firefox中它就出错了，原因是IE自动将自定义属性解析到了DOM中，和标准属性没有任何区别，但FireFox对自定义属性的使用，限制更高.

兼容方法如下：
1、用元素attributes[]集合来访问:
1
2
3
4

var inputObj = document.getElementById('input_btn');
alert(inputObj.attributes['info'].nodeValue);
inputObj.attributes['info'].nodeValue = 'this is a new info';
alert(inputObj.attributes['info'].nodeValue);

2、用getAttribute 和 setAttribute对其进行操作:
1
2
3
4

var inputObj = document.getElementById('input_btn');
alert(inputObj. getAttribute('info'));
inputObj.setAttribute('info','this is a new info');
alert(inputObj. getAttribute('info'));

^_^：
注意：这里所说的自定义属性是特指在html页面中定义的元素属性，用javascript动态创建的属性不会有这个问题。

js对html元素自定义属性的操作

猜你喜欢