Javascript 使用 document.evaluate 从 XPath 获取 xlink:href

Question

嘿，我正忙着弄清楚为什么下面的 XPath 代码无法找到 Image 标签以及我文档中的 HREF link。

XPath（完整）看起来像这样：

//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/descendant::image[starts-with(@href,'https://')]

我使用的javascript代码是：

function checking(Path) {
   const nodes = document.evaluate(Path, document, null, XPathResult.ANY_TYPE, null);
   const result = {
       Data: []
   };
   let attr = nodes.iterateNext();
   result.Data.push({ href: attr});
   return JSON.stringify(result);
}
console.log(checking("//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/descendant::image[starts-with(@href,'https://')]"));

以及我正在浏览以获取所述图像的 HTML Xlink:HREF：

<body class="">
  <div id="" style="">
    <div>
      <div class="">
        <div class="">
          <div class="">
            <div class="">
              <div class="">
                <div class="">
                  <div class="">
                    <div class="">
                      <div class="" role="5ma">
                        <div class="">
                          <div class="">
                            <div class="">
                              <div>
                                <div class="">
                                  <div class="">
                                    <div class="">
                                      <a aria-label="" class="" href="https://www.this.com/link/is/not/needed" tabindex="0">
                                        <div class="">
                                          <svg aria-label="" class="" data-visualcompletion="ignore-dynamic" role="img" style="height: 168px; width: 168px;">
                                            <g mask="url(#)">
                                              <image x="0" y="0" height="100%" width="100%" xlink:href="https://www.google.com/logos/doodles/2021/seasonal-holidays-2021-6753651837109324-6752733080595603-cst.gif" style="height: 168px; width: 168px;"></image>
                                              <circle class="" cx="8" cy="4" r="4"></circle>
                                            </g>
                                          </svg>
                                        </div>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

出于某种原因，我的 output 一直得到 NULL？这里有一个 jsfiddle 来直观地测试它。

{
  "Data": [
    {
      "href": null
    }
  ]
}

有人知道我为什么会这样吗？

更新 1

检查我的项目的“官方”xPath 是这样的：

// html/body/div1/div/div1/div/div3/div/div/div1/div1/div/div/div1/div2/div/div/div/div1/div/div/svg/g/image

我更改了最新的 fiddle 以反映@bigless 在他的 fiddle 中提出的建议，但仍然为空。

Javascript 使用 document.evaluate 从 XPath 获取 xlink:href

Javascript getting xlink:href from XPath using document.evaluate

html

javascript

xpath

element

nodes