使用parentNode多次

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

什么我不能做的就是从

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

保存ALT我试图

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中的第一个子节点 - 它不需要是实际的元素，但可以是任何节点类型。在你的情况下，<tr>的firstChild是空白文本节点（在<td>之前的HTML中的换行符）。

我该怎么办？

您可以改为使用.firstElementChild property。

但是，严重依赖DOM的确切结构可能不是好的做法。也许你可以试试

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

Answer 2

我解决了这个由

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