HTML Element对象的属性遍历

对于HTML Element对象，存在属性 attributes，包括了对象“所有”属性，通过对其遍历，可以获取我们所需要的信息，以便对DOM节点做进一步的处理，例如将DOM结构保存为XML或者字符串等。

function outputAttributes(element){
    var pairs = new Array();
    for(var i=0,len = element.attributes.length;i < len;i++){
        var name = element.attributes[i].nodeName;
        var value = element.attributes[i].nodeValue;
        pairs.push(name + '=\'' + value + '\'');
    }
    return pairs.join(' ');
}

每一个attribute属性有一个附加属性specified，当属性是HTML Element的属性(指写在代码中可见的)，或者是通过setAttribute方法进行的添加的时候，它的值为 true。IE6,IE7在执行上述代码的时候，会把很多的内置属性（如：onclick,onmouseover,tabIndex）一起列出来，这些属性的specified默认是为false。因此，修改上传代码如下：

function outputAttributes(element){
    var pairs = new Array();
    for(var i=0,len = element.attributes.length;i < len;i++){
        var name = element.attributes[i].nodeName;
        var value = element.attributes[i].nodeValue;
        if(element.attributes[i].specified)
            pairs.push(name + '=\'' + value + '\'');
    }
    return pairs.join(' ');
}

例子

<div id='test' class="cls" dir="ltr" title="wott" SS='WWW' ss="ss"></div>

function fun(){
	var e = document.getElementById('test');
	e.setAttribute('title2', 'titlte2');
	alert(outputAttributes(e));
}

未使用specified过滤：



使用specified过滤：