Ruby's Louvre

每天学习一点点算法

导航

元素的自定义属性 

<!doctype html>
<html>
  <head>
    <title>元素节点的自定义属性 2 by 司徒正美</title>
    <meta charset="utf-8"/>
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <meta name="keywords" content="元素节点的自定义属性 by 司徒正美" />
    <meta name="description" content="元素节点的自定义属性 by 司徒正美" />
    <script type="text/javascript" charset="utf-8">
   
      window.onload = function(){
        var h1 = document.getElementById("aaa");
        alert(h1.idd)
        var p = document.getElementsByTagName("p")[0];
        alert(p.pp)
        var h2 = h1.cloneNode(true);
        document.body.appendChild(h2);
        alert(h2.idd)
      }


    </script>

  </head>
     <body>
    <h1 id="aaa" idd="bbb" >元素节点的自定义属性 by 司徒正美</h1>
    <p pp="pp">检测P元素的自定义属性</p>
    </body>
</html>

标准浏览器下不能使用数组形式取元素节点的自定义属性，而需要一些特殊的方法取其值，如：

        alert(p.getAttributeNode("pp").nodeValue)
        alert(p.attributes["pp"].value);

在自定义属性中，又分为动态自定义属性与静态自定义属性，如果标准浏览器支持outerHTML，它会显示那些静态自定义属性，亦即那些存放于元素attributes中的属性。这些属性是用for...in循环遍历不出来的，而动态添加的自定义属性则可以。这两者都无法通过cloneNode实现拷贝。但进一步的实验，发现attribute并不只包含静态自定义属性。

<!doctype html>
<html>
  <head>
    <title>元素节点的自定义属性 2 by 司徒正美</title>
    <meta charset="utf-8"/>
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <meta name="keywords" content="元素节点的自定义属性 by 司徒正美" />
    <meta name="description" content="元素节点的自定义属性 by 司徒正美" />
    <script type="text/javascript" charset="utf-8">
    
      window.onload = function(){
        var h1 = document.getElementById("aaa");
        alert(h1.outerHTML);
        alert(h1.attributes.length)
        var h2 = h1.cloneNode(true);
        alert("------------")
        document.body.appendChild(h2);
        alert(h2.outerHTML);
        alert(h2.attributes.length)
      }
  
    </script>

  </head>
  <body>
    <h1 id="aaa" idd="bbb"  onclick="alert('222')">元素节点的自定义属性 by 司徒正美</h1>
    <p pp="pp">检测P元素的自定义属性</p>
  </body>
</html>

上面实验说明了两个问题，el.attribute包含了所有以内联形式定义的属性，包括事件与样式。标准浏览器是能复制事件的，但只支持内联事件。

posted on 2010-05-30 20:16  司徒正美  阅读(1819)  评论(1)  编辑  收藏  举报