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

来源：互联网发布：端口多路复用原理编辑：程序博客网时间：2024/06/06 14:27

朋友“小平的fans”和我讨论一个问题，他发一个文件给我，说JavaScript不能取到一个元素的前一个元素。

test.html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

function f(){

var sub =document.getElementById("ME-26934");

sub = sub.previousSibling;

alert(sub.getAttribute("id"));

}

</script>

</head>

<input type="text" id="ME-26933" value="aaa">dddddd</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>

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>

<input type="text" id="ME-26933" value="aaa"/>dddddd

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