Using parentNode multiple times

Question

I have this html code in a page

<tr class="tt_row">
    <td class="ttr_type"><a href="?cat=17"><img src="/pic/abc-aaa-bb.png" alt="aa/bb-cccc" /></a></td>
    <td class="ttr_name"><a href="abc?id=2221" title="Test.2123.123"><b>Test.2123.123</b></a><br /><span class="pre">Test test</span> <span class="newtag">NEW!</span></td>
    <td class="td_dl"><a href="upload/222083/1348hgfhfchf5675675/Test.2123.123"><img src="/pic/aaab.gif" style="vertical-align: middle;" alt="Upload" /></a></td>
    <td class="ttr_size">1.65 MB<br /><a class="small" href="abc?id=2221&amp;filelist=1#filelist">15 Files</a></td>
    <td class="ttr_comments">0</td>
    <td class="ttr_added">2014-03-03<br />11:11:11</td>
    <td class="ttr_snatched">0<br />times</td>
    <td class="ttr_seeders"><b><a href="abc?id=2221&amp;peers=1#seeders">0</a></b></td>
    <td class="ttr_leechers">0</td>
</tr>

And this script with Greasemonkey

function initMenu(aEvent) {
    // Executed when user right click on web page body
    // aEvent.target is the element you right click on
    var node = aEvent.target.parentNode;
    var node1 = aEvent.target;
    var item = document.querySelector("#userscript-search-by-image menuitem");
    if (node.localName == "a") {
        if (node1.getAttribute("src") == "/pic/aaab.gif")  { // ABV
            body.setAttribute("contextmenu", "userscript-search-by-image");
            item.setAttribute("imageURL", node.href);
        }

This script modifies the contextual menu with a new entry when i right click on

<img src="/pic/aaab.gif" style="vertical-align: middle;" alt="Upload" />

and with parentNode i go to

<a href="upload/222083/1348hgfhfchf5675675/Test.2123.123">

and save href with

item.setAttribute("imageURL", node.href);

What i can't do is to save alt from

<img src="/pic/abc-aaa-bb.png" alt="aa/bb-cccc" />

I tried

node3 = node.parentNode.parentNode.firstChild.firstChild.firstChild

to get to

<img src="/pic/abc-aaa-bb.png" alt="aa/bb-cccc" />

and

item.setAttribute("imageALT", node3.alt);

What should i do? I'm new to javascript and DOM.

Answer 1

I tried node3 = node.parentNode.parentNode.firstChild.firstChild.firstChild to get from the node = <img src="/pic/aaab.gif" style="vertical-align: middle;" alt="Upload" /> to <img src="/pic/abc-aaa-bb.png" alt="aa/bb-cccc" />.

.firstChild does get the first child node in the DOM - which does not need to be an actual element, but could be of any node type. In your case, the firstChild of the <tr> is the whitespace text node (the linebreak in the html before the <td>).

What should i do?

You could try the .firstElementChild property instead.

However, relying that heavily on the exact structure of the DOM might not be good practise. Maybe try something like

<tr>.querySelector("td.ttr_type img")
<tr>.getElementsByTagName("img")[0]
<tr>.cells[0].firstChild.firstChild

Answer 2

I solved this by

node3 = node.parentNode.parentNode.getElementsByTagName('*')[0].firstChild.firstChild;