当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对此无影响.