JavaScript取HTML DOM一个元素的前一个元素引出的问题

朋友“小平的

fans

”和我讨论一个问题，他发一个文件给我，说

JavaScript

不能取到一个元素的前一个元素。

test.html

代码如下

<!

DOCTYPE

html

PUBLIC

"-//W3C//DTD XHTML
1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

>

<

html

>

<

head

>

<

title

>

test

</

title

>

<

script

type

=

"text/javascript"

>

function



f(){

var



sub =
document.getElementById(

"ME-26934"

);

sub = sub.previousSibling;

alert(sub

.getAttribute(

"id"

)

);

}

</

script

>

</

head

>

<

body

onload

=

"f();"

>

<

input

type

=

"text"

id

=

"ME-26933"

value

=

"aaa"

>

dddddd

</

input

>

<

input

type

=

"text"

id

=

"ME-26934"

>

eeee

</

input

>

<

input

type

=

"text"

id

=

"ME-26935"

>

rrr

</

input

>

</

body

>

</

html

>

这个问题我遇到过，

previousSibling

返回元素之前紧随的兄弟节点。

元素后面会有一个文本节点，无论它是不是含有文本。所以这里的脚本应修改

sub = sub

.previousSibling

.previousSibling;

alert(sub.getAttribute(

"id"

));

我用的

FireFox3.6

，试了下，可以了，就发给朋友。

过了一会儿他回复说，

IE6

下还是不行，输出（

alert

）了空字符串。

我实验了下，果真不行，看不出来出了什么问题。

sub =
sub.previousSibling.previousSibling;

alert(sub.nodeType+

":"

+sub.getAttribute(

"id"

));

IE6

输出的是

1:

1

代表的是元素

element

，这没错啊，取到元素了。

我首先想到的是令人郁闷的浏览器差异，惯性的想是不是方法兼容问题。

于是试着换了几个方法、属性，结果都不行。

正卡壳，忽然想到干嘛这么毫无逻辑的瞎猜，既然有输出（虽然是空字符串），那么方法是可用的，可能是取错了。

alert(sub.nodeType+

":"

+sub.tagName);

IE6

下输出的是

1:/INPUT

发现问题了！

<

input

type

=

"text"

id

=

"ME-26933"

value

=

"aaa"

>

dddddd

</

input

>

IE6

下这种书写格式，同级节点分别是：

<input>

元素、

</input>

元素

、文本节点。

FireFox3.6

下

<input>

元素

&</input>

元素算一个元素。

如此，问题迎刃而解。整理后的文档如下：

test.html

文件

<!

DOCTYPE

html

PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

>

<

html

>

<

head

>

<

title

>

test

</

title

>

<

script

type

=

"text/javascript"

>

function



f(){

var



sub =
document.getElementById(

"ME-26934"

);

sub = sub.previousSibling.previousSibling;

alert(sub.nodeType+

":"

+sub.tagName+

":"

+sub.getAttribute(

"id"

));

var



sub1 =
document.getElementById(

"ME-26935"

);

sub1 =
sub1.previousSibling.previousSibling;

alert(sub1.nodeType+

":"

+sub1.tagName);

}

</

script

>

</

head

>

<

body

onload

=

"f();"

>

<

input

type

=

"text"

id

=

"ME-26933

"

value

=

"aaa"

/>

dddddd

<

input

type

=

"text"

id

=

"ME-26934"

>

eeee

</

input

>

<

input

type

=

"text"

id

=

"ME-26935"

>

rrr

</

input

>

</

body

>

</

html

>

第一个

alert

：

1:INPUT:

ME-26933

第二个

alert

：

1:/INPUT

小结：

1.

<

input

type

=

"text"

id

=

"ME-26933"

value

=

"aaa"

>

dddddd

</

input

>

IE6

下这种书写格式，同级节点分别是：

<input>

元素、

</input>

元素、文本节点。

2.

分析问题要条理清晰，步步为营，而不是“投机式”的试错，虽然有些时候“投机式”方法能够快速的解决问题，但分析问题就不太适用了，什么问题用什么方法。