如何抓取图像的父链接？

Question

我有一个可以找到图像的 Chrome 扩展程序。当您单击该图像时，我想打印您转到的链接。例如，在这种情况下，我想打印“https://politi.co/3ef3fyd?fbclid=IwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc”。

我按照this SO 的建议尝试了 parentNode。 “这里有一个定义的图像”打印得很好。但随后我在下一行收到错误消息：“TypeError: Cannot read property 'href' of undefined.”

Javascript

    var image = $(uCW).find('[src^="https://external"]').attr("src");
    console.log(image);

    if(typeof image !== "undefined")
    {
          console.log("there's a defined image here");
          var ilink = image.parentNode.href;
          console.log("ilink", ilink);
    }

更新：

现在我正在使用：

var cat = $("image").closest('a').href;
console.log("cat", cat)

但它只是打印“未定义”。

HTML

<a href="https://politi.co/3ef3fyd?fbclid=IwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc" aria-describedby="u_fetchstream_3_7" aria-label="Tara Reade’s lawyer drops her as a client" tabindex="-1" target="_blank" rel="noopener nofollow" data-lynx-mode="asynclazy" data-nguardprocessed="true" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fpoliti.co%2F3ef3fyd%3Ffbclid%3DIwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc&amp;h=AT2KhFxAof_9rmralxQQBdP5e1HxxUdkL-Bu8y09XvpSAcOGDaIhyU7SRJ9IeDsJhrXKMOmyUZ6WDBPiAJrhkeMQ_yaWEFhFVHlFXuyIj5XXQugS5BaFuJO3U3kR4Lk1wKEUq_SPGmWbnhAfHv7Zh3vu5tIlhfZuQZXT5wnGk4U">
   <div class="accessible_elem inlineBlock" id="u_fetchstream_3_7">
      <div class="nguard-widget" style="display: inline-block; position: relative;">
         <div>
            <div class="sc-VigVT hgSSpT">
               <div class="sc-jTzLTM fuPExf">
                  <svg class="newsguard_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 64">
                     <g>
                        <rect fill="#fff" x="5.11" y="11.06" width="40.4" height="31.66"></rect>
                     </g>
                     <g>
                        <path fill="#42b149" fill-rule="evenodd" d="M49,0H0V24.07C0,40.86,0,52,22.79,63.18l1.67.82,1.66-.82C48.54,52,49,40.86,49,24.07ZM22.86,40.23a2.35,2.35,0,0,1-3.45,0L7.33,28.37a2.47,2.47,0,0,1,0-3.39l3.54-3.4a2.15,2.15,0,0,1,1.67-.75,2.45,2.45,0,0,1,1.77.75l6.83,6.76L36.9,12.77A2.45,2.45,0,0,1,38.67,12a2.14,2.14,0,0,1,1.67.75l3.54,3.39a2.49,2.49,0,0,1,0,3.4Z"></path>
                     </g>
                  </svg>
               </div>
            </div>
         </div>
      </div>
      Her attorney said the decision “is by no means a reflection on whether then-Senator Biden sexually assaulted Ms. Reade.”
   </div>
   <div class="_6l- __c_">
      <div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:514px;height:268.42222222222px;"><img class="scaledImageFitWidth img" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQB8m91AABOjBxLI&amp;w=540&amp;h=282&amp;url=https%3A%2F%2Fstatic.politico.com%2F7c%2F4a%2Fc9f2023e43c0aa8055e248e1ffee%2F200522-tara-reade-ap-773.jpg&amp;cfs=1&amp;upscale=1&amp;fallback=news_d_placeholder_publisher&amp;_nc_hash=AQBjEY6wVpUxS5-r" data-src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQB8m91AABOjBxLI&amp;w=540&amp;h=282&amp;url=https%3A%2F%2Fstatic.politico.com%2F7c%2F4a%2Fc9f2023e43c0aa8055e248e1ffee%2F200522-tara-reade-ap-773.jpg&amp;cfs=1&amp;upscale=1&amp;fallback=news_d_placeholder_publisher&amp;_nc_hash=AQBjEY6wVpUxS5-r" style="top:0px;" alt="" width="514" height="269" aria-label="No photo description available."></div>
   </div>
</a>

Answer 1

这将为您提供图像周围所有链接的数组：

$$('img').map((el) => el.closest('a'))
  .filter(Boolean)
  .map((link) => link.href)

您可以像这样缩小搜索范围：

Object.values(root.getElementsByTagName('img'))
  .map((el) => el.closest('a'))
  .filter(Boolean)
  .map((link) => link.href)

root 是一些 DOM 元素