Как лучше всего учитывать пробельные символы (#text), совместимость дочерних узлов в JavaScript

Question

У меня есть код на одной из веб-страниц, как показано ниже -

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

Это ожидаемое поведение - при наведении на элемент списка изображение должно измениться на imgHowTo-new.png и «КАК"Цвет текста должен измениться на зеленый (изначально это был синий).

Теперь у меня нет разрешения изменять html или css, и мне нужно добиться ожидаемого поведения с помощью javascript.

Я использовал приведенный ниже код js -

document.getElementById("imgHowTo").onmouseover = HoverIn;
function HoverIn(){
newImg = "imgHowTo-new.png"
this.src = newImg;
this.parentNode.style.color = green;
}

Теперь при наведении курсора на значок изображение меняется и цвет текста корректно обновляется.Но я хочу, чтобы эти изменения происходили, когда мышь наводит курсор на «элемент списка», а не только на изображение / текст.Как я могу сделать это без изменения CSS / HTML?Кроме того, как мне учесть наличие проблемы совместимости пробелов (#text), когда childNodes используются для доступа к элементам?Мне нужно, чтобы это работало во всех браузерах.

спасибо!

Answer 1

Ну, вы можете сделать что-то вроде этого:

(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 , Prototype , YUI , Closure или любой из нескольких других . Они сглаживают для вас множество различий в браузерах, предлагают инструменты, которые помогут вам пропустить текстовые узлы (вы упомянули, что вас это беспокоит), и, как правило, предоставляют множество готовых, предварительно протестированных утилит, которые дают вам свободу сосредоточиться на своей конкретной работе.

Например, используя (скажем) jQuery, я бы, вероятно, сделал код немного менее чувствительным к изменениям HTML (не много, но некоторые):

(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");
    }
})();

Это немного более дружественный к небольшим изменениям HTML, потому что он не предполагает, что якорь является непосредственным родителем изображения или что элемент списка является непосредственный родитель якоря. Так, например, если кто-то обернет якорь в div, он все равно будет работать.

Использование jQuery, Prototype или, возможно, нескольких других также дает вам события mouseenter и mouseleave (которые обычно только для IE, но они эмулируются библиотеками, такими как jQuery и Prototype в других браузерах), которые полезны для эффектов при наведении, потому что они не всплывают.

Answer 2

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