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