Question

我在页面中有这个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的新手。

Answer 1

我尝试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中的第一个子节点 - 它不需要是实际元素，但可以是任何节点类型。在您的情况下，firstChild的{{1}}是空格文本节点（<tr>之前的html中的换行符。）

我该怎么办？

您可以尝试使用.firstElementChild property。

然而，严重依赖DOM的确切结构可能不是一个好习惯。也许尝试像

这样的东西

<td>

Answer 2

我通过

解决了这个问题

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

多次使用parentNode

2 个答案: