多次使用 parentNode答案

【问题标题】：Using parentNode multiple times多次使用 parentNode
【发布时间】：2014-04-04 18:39:12
【问题描述】：

我在一个页面中有这个 html 代码

<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>

还有这个带有 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);
        }

当我右键单击时，此脚本会使用新条目修改上下文菜单

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

和 parentNode 我去

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

并用

保存href

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

我不能做的是保存 alt

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

我试过了

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

到达

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

和

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

我该怎么办？我是 javascript 和 DOM 的新手。

【问题讨论】：

有一个显式的if条件只在点击图片.getAttribute("src") == "/pic/aaab.gif"时才做某些动作……它与parentNode无关。

标签： javascript dom greasemonkey

【解决方案1】：

我解决了这个问题

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

【讨论】：

请简短说明您做了什么以及它如何提供帮助 - 通常不鼓励单行！

【解决方案2】：

我尝试node3 = node.parentNode.parentNode.firstChild.firstChild.firstChild 从node = <img src="/pic/aaab.gif" style="vertical-align: middle;" alt="Upload" /> 到<img src="/pic/abc-aaa-bb.png" alt="aa/bb-cccc" />。

.firstChild 确实获得了 DOM 中的第一个子节点 - 它不需要是实际元素，但可以是任何节点类型。在您的情况下，<tr> 的 firstChild 是空白文本节点（<td> 之前的 html 中的换行符）。

我该怎么办？

你可以试试.firstElementChild property。

但是，过度依赖 DOM 的确切结构可能不是一个好习惯。也许尝试类似的东西

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

【讨论】：