当li的value属性值被设为""时, 浏览器的离奇表现

情景:

      当li的value属性被设置为""时, 用JS去获取该li的value属性值, 在不同的浏览器中, 其返回值不一样, 而且获取方法不同, 在相同的浏览器中, 得到的值还不一样!

测试浏览器:

       IE6+, FF 3.0.11, Safari 4, Chrome 2.0.172.31, Opera 9.63

XHTML:

    <ul><li id="item" value="">所有分类</li></ul>

JS:

    var theItem = document.getElementById("item");

取值方式一: theItem.value

     // 输出结果如下:

     a. IE6+:  1;

     b. FF3:  -1;

     c. Safari, Chrome, Opera: 0

取值方式二: theItem.getAttribute("value")

     // 输出结果如下:

     a. IE6+:  1;

     b. FF3, Safari, Chrome, Opera: ""(即空值)

取值方式三: theItem.attributes["value"].nodeValue

     // 输出结果如下:

     a. IE6+:  1;

     b. FF3, Safari, Chrome, Opera: ""(即空值)

其他测试: 

     (1). 将value属性设置为" "(即中间加上一个空格, 加多个效果一样)

         a. theItem.value

         IE6+: 1;

         FF3: -1;

         Safari, Chrome, Opera: 0.

         b. theItem.getAttribute("value")

         各浏览器均输出相同的值: " ".

         c. theItem.attributes["value"].nodeValue

         IE6+: 1;

         FF3, Safari, Chrome, Opera: " ".

     (2). 在不同的DOCTYPE下, 进行测试

         经测试, DOCTYPE对此无影响.