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

【问题标题】：Javascript getting xlink:href from XPath using document.evaluateJavascript 使用 document.evaluate 从 XPath 获取 xlink:href
【发布时间】：2022-01-15 23:15:18
【问题描述】：

大家好，我在试图弄清楚为什么下面的 XPath 代码无法找到 Image 标记 和 HREF 链接在我的文档中附带它。

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>

出于某种原因，我不断为输出获得 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

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

最新fiddle

【问题讨论】：

标签： javascript html xpath nodes element

【解决方案1】：

一些事情：

首先，您的命名空间和Deprecated XLink URL reference attributes 有问题。

第二，在

result.Data.push({
    href: attr
  });

你应该push属性的节点值：

result.Data.push({
    href: attr.nodeValue
  });

最后，由于命名空间问题，为了简化 xpath 表达式，将您的 comeback 更改为

var comeback = checking("//*[local-name()='image'][starts-with(./@href,'https://')]/@href");

And it should work as in this fiddle.

【讨论】：

感谢@Jack 的回复，但您似乎已经在您的 jsfiddle 中取出了 xlink:href。我无法将其重命名为 href，因此您的示例代码不起作用 - Cannot read properties of null (reading 'nodeValue') 错误。

【解决方案2】：

使用 xlink:href 选择器替代@Jack Fleeting 答案（例如，跳过所有这些 div）：

string(//*[name() = 'svg']/*[name()='g']//*[name()='image' and starts-with(@*[name()='xlink:href'],'https://')]/@*[name()='xlink:href'])

这将只提取属性值作为字符串（第一次出现）

【讨论】：

试过你的例子@bigless 并且有一个错误 Failed to execute 'evaluate' on 'Document': The string '//*[name() = 'svg']/* [name()='g']//*[name()='image' 并以(@*[name()='xlink:href'],'https://')]/@* 开头[name()='xlink:href'])' 不是有效的 XPath 表达式。像这样使用它 let comeback = checks("//*[name() = 'svg']/ *[name()='g']//*[name()='image' 并以(@*[name()='xlink:href'],'https://')]/@ 开头*[name()='xlink:href']");
@StealthRT 试试这个fiddle。它没有字符串功能，使其尽可能接近您的小提琴
我说得太早了。当我将它实现到读取代码中时出现此错误：无法在“文档”上执行“评估”：字符串 '//*[name()='svg']/*[name()=' g']//*[name()='image' 并以(@*[name()='xlink:href'],'https://')]/@*[name()=' 开头xlink:href'])' 不是有效的 XPath 表达式。
@StealthRT 您在表达式末尾有额外的 ')'（复制粘贴错误；）或者您从此处复制了字符串函数。从 fiddle 尝试 xpath。
嗡嗡声似乎不是那个？查看我的 OP 以获取我看到的内容的更新屏幕截图。