XPath 以第一个祖先标记为目标-解网

问：

一些 HTML：

<div>
  
  <div>
    <button>
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="x" />
      </svg>
    </button>    
  </div>
  
  <div>
    <button>                                      <!-- I want this -->
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="y" />                            <!-- I have this -->
      </svg>
    </button>
  </div>
  
</div>

我有数据（）来定位第二个，然后我想得到它的祖先。ypathbutton

我可以像这样定位元素：path

//svg/path[@d='y']

但我不能瞄准它最近的祖先：button

//svg/path[@d='y']/ancestor::button

演示在这里。

如果我在 firefox 或 chromium devtools 中尝试这样做（对于包含上述标记的页面）：

$x("//ancestor::button[1]", document.querySelector("path[d='y']"))

...它返回许多结果，而不仅仅是第一个祖先按钮。

html xml xpath

您是否知道您的文档在没有命名空间中有一些 HTML 元素，但在 SVG 命名空间中有一些 SVG？您如何解析输入，作为 HTML、XML、支持或不支持命名空间？重要的是要知道，以判断是否例如选择该 SVG 元素或不选择任何元素。至于你的尝试，那应该是.//svgsvg$x("//ancestor::button[1]", document.querySelector("path[d='y']"))$x("ancestor::button[1]", document.querySelector("path[d='y']"))

0赞 lonix 9/20/2023

@MartinHonnen 谢谢。这是一个 HTML 文档，正在浏览器中解析。顺便说一句，您的代码片段在浏览器中对我有用，谢谢。

答：

1赞 Jack Fleeting 9/19/2023 #1

你正在与命名空间纠缠不清。

处理此问题的一种方法是将 xpath 更改为

//svg[*[local-name()='path'][@d='y']]/parent::*[local-name()='button']

看看它是否有效。

var namespaceResolver = function(prefix) {
  if (prefix === 'svg')
    return 'http://www.w3.org/2000/svg';
  else
    return null;
}

var path = document.evaluate('//svg:svg/svg:path[@d = "y"]', document, namespaceResolver, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;


var ancestorButton = document.evaluate('ancestor::button[1]', path, namespaceResolver, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;

console.log(ancestorButton.outerHTML);

<div>
  
  <div>
    <button>
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="x" />
      </svg>
    </button>    
  </div>
  
  <div>
    <button>                                      <!-- I want this -->
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="y" />                            <!-- I have this -->
      </svg>
    </button>
  </div>
  
</div>

或者切换到 SaxonJS 和 XPath 3.1，例如，在查找 SVG 和 HTML 元素时使用不同的默认元素命名空间，例如

const xhtmlNamespace = 'http://www.w3.org/1999/xhtml';

const svgNamespace = 'http://www.w3.org/2000/svg';

var path = SaxonJS.XPath.evaluate('//svg/path[@d = "y"]', document, { xpathDefaultNamespace : svgNamespace });


var ancestorButton = SaxonJS.XPath.evaluate('ancestor::button[1]', path, { xpathDefaultNamespace : xhtmlNamespace });


console.log(ancestorButton.outerHTML);

<script src="https://martin-honnen.github.io/Saxon-JS-2.5/SaxonJS2.js"></script>
<div>
  
  <div>
    <button>
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="x" />
      </svg>
    </button>    
  </div>
  
  <div>
    <button>                                      <!-- I want this -->
      <svg xmlns="http://www.w3.org/2000/svg">
        <path d="y" />                            <!-- I have this -->
      </svg>
    </button>
  </div>
  
</div>

上一个：HTML 代码在尝试验证时获取列的错误消息

下一个：Google 表格中的 IMPORTHTML/XML 表格仅返回 50 个值

XPath 以第一个祖先标记为目标

XPath to target first ancestor tag

评论

评论