почему parentNode всегда возвращается как неопределенный, хотя он там есть?

Question

У меня есть набор вложенных div:

<div style="border:solid 1px #7F9DB9; height:535px; width:285px;" id="div_master">
                <div onmouseover="" id="a" onclick="div_catlist_mouseclick(this)">a</div>
                <div onmouseover="" id="b" onclick="div_catlist_mouseclick(this)">b</div>
                <div onmouseover="" id="c" onclick="div_catlist_mouseclick(this)">c</div>
                <div onmouseover="" id="d" onclick="div_catlist_mouseclick(this)">d</div>
            </div>

Я вызываю функцию div_catlist_mouseclick (this) по щелчку мыши:

function div_catlist_mouseclick(div) {
        div.style.background = "#316AC5";
        div.style.color = "#fff";

        var x = this.parentNode;
    }

Почему я не могу назначить parentNode для x, после того, как я пропущу эту строку, x всегда неопределен. Однако, если я проверю this.parentNode, он отобразится как объект с 4 дочерними узлами, чего я и ожидаю ...

Я пытаюсь получить дочерние узлы, чтобы можно было итерировать их, и если они не являются выбранным узлом, но были выбраны до того, как вернуть цвет текста и фона к значениям по умолчанию. Должно быть легко, правда?!

Спасибо.

Answer 1

Вы должны использовать div.parentNode вместо this.parentNode.