<!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包含了所有以内联形式定义的属性，包括事件与样式。标准浏览器是能复制事件的，但只支持内联事件。