javascript(兼容)遍历元素的特性

在需要将DOM的结构序列化为XML或HTML字符串时, 多数都会涉及遍历元素特性.

注意:

• 针对attribute对象中的特性, 不同浏览器返回的顺序不同. 这些特性在XML或HTML代码中出现的先后顺序, 不一定与它们出现在attribute对象的顺序一致.
• IE7及更早版本会返回HTML中所有可能的特性, 包括没有指定的特性. 换句话说, 返回100多个特性的情况会很常见.

代码

function outputAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;
        for(i=0, len=element.attributes.length; i < len; i++) {
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            if(element.attributes[i].specified) {
                //兼容IE, 如果该属性为true则在HTML中定义了该属性
                pairs.push(attrName + "=\"" + attrValue + "\"");
            }
        }
        return pairs.join(" ");
}

```巩固一下之前学的知识. 看如下的效果图. 

功能描述: 基本游戏需求以及排行榜记录保存.

主界面: 
![这里写图片描述](https://img.haomeiwen.com/i8424049/70ac419e65332123?imageMogr2/auto-orient/strip)

-----------------------------------------------

游戏界面: 
[站外图片上传中...(image-fe0b26-1510147943342)]

-------------------------------------------------

游戏记录保存: 

为了方便演示, 结束时提示保存记录, 正常输了的话提示重新开始游戏.
![这里写图片描述](https://img.haomeiwen.com/i8424049/09039747a31aacdf?imageMogr2/auto-orient/strip)

------------------------------------------------------

排行榜:

![这里写图片描述](https://img.haomeiwen.com/i8424049/6d051e91d7e1cea9?imageMogr2/auto-orient/strip)
![这里写图片描述](https://img.haomeiwen.com/i8424049/65021e8706daa1b4?imageMogr2/auto-orient/strip)


代码和教程都在github上: 
https://github.com/TheKiteRunners/Web-Sweep