如何最好地考虑javascript中的空白（#text）子节点兼容性

我在其中一个网页中有如下代码-

<li><a href="howto.php" id="howto"><img id="imgHowTo" src="imghowto.png" />HOW TO</a></li>

现在，将鼠标悬停在图标上，图像将发生变化，文本颜色将正确更新。但我希望当鼠标悬停在“列表项”上时，而不仅仅是在图像/文本上发生这些更改。如何在不更改css/html的情况下实现这一点？另外，当使用childNode访问元素时，如何解释存在空格（#text）兼容性问题？我需要这个在所有浏览器中都能工作

谢谢

嗯，你可以这样做：

document.getElementById("imgHowTo").parentNode.parentNode.onmouseover

(function() {
    var imgHowTo = document.getElementById("imgHowTo"),
        a        = imgHowTo.parentNode,
        li       = a.parentNode;
    li.onmouseover = HoverIn;
    function HoverIn(){
        imgHowTo.src = "imgHowTo-new.png";
        a.style.color = green;
    }
})();

（注意，为了避免创建全局变量，我将整个过程都放在了一个函数中。）我会担心它有多脆弱，因为它与HTML结构紧密相连，但它应该适用于您列出的结构

这样做的目的是找到

img

，然后找到要更改其颜色的锚点和要观看鼠标事件的

li

，然后连接事件。由于您只是向上移动层次结构，因此在这种特定情况下，您不必担心中间文本节点，尽管在向下移动层次结构或跨兄弟节点时，您经常需要处理这些问题

有点离题，但请注意，

mouseover

会反复触发，因此您的

HoverIn

函数会被反复调用。这其实并不重要，因为一旦它完成了它的任务，再做一次是无害的，但仍然

---

另外，对于这类事情，使用一个好的JavaScript库（如、、或）是非常值得的。它们为您消除了浏览器之间的许多差异，提供了帮助您跳过文本节点的工具（您提到过这一点），并且通常提供了大量预构建、预测试的实用工具，让您可以自由地专注于特定的工作

例如，使用（比如）jQuery，我可能会使代码对HTML更改的敏感度降低一点（不是很多，而是一些）：

这对小的HTML更改稍微友好一些，因为它不假设锚点是图像的直接父级，或者列表项是锚点的直接父级。例如，如果有人将锚包在div中，它仍然有效

---

使用jQuery、Prototype或其他几种工具也会产生

mouseenter

和

mouseleave

事件（通常仅限于IE，但其他浏览器上的jQuery和Prototype等库会模拟这些事件），这些元素对悬停效果很有用，因为它们不会冒泡。

现在我如何在解决空白childNode问题时导航到子元素？@arunnair，您提到的问题只有在使用nextSibling或previousSibling时才有问题，所以Manuel的解决方案应该适合您。@arunnair：是的，正如Amaan所说，当您进入层次结构时，您不必担心文本节点（因为它们不能包含元素）；当你穿过（兄弟）或向下穿过（后代）时，你会担心文本节点。非常感谢！这是一个巨大的帮助。我只是建立在您的解决方案的基础上，并发现当列表项悬停时，图像已正确更改。但是文本的颜色没有改变。"这"代表现在的"李"。我用了：this.style.color=红色；但是在悬停列表项时，文本的样式不会得到更新。有什么用？@arun:很高兴能帮上忙！锚点可能有自己的颜色，因此您为

li

指定的颜色无关紧要，因为锚点将覆盖它。这就是为什么在我的示例中，我指定了锚的样式。（事实上，我根本没有使用

这个
，因为您所做的所有更改都是对后代元素的，所以我只是直接使用它们。）
(function() {
    var imgHowTo = document.getElementById("imgHowTo"),
        a        = imgHowTo.parentNode,
        li       = a.parentNode;
    li.onmouseover = HoverIn;
    function HoverIn(){
        imgHowTo.src = "imgHowTo-new.png";
        a.style.color = green;
    }
})();

(function() {
    var imgHowTo = $("#imgHowTo"),
        a        = imgHowTo.closest("a"),
        li       = a.closest("li");
    if (li[0]) { // If the structure isn't there, we skip the event handler
        li.mouseover(HoverIn);
    }

    function HoverIn() {
        imgHowTo[0].src = "imgHowTo-new.png";
        a.css("color", "green");
    }
})();