当网站有两个根html元素时，如何使用xpath/css选择器？
当一个网站的结构中存在两个根HTML元素时，这通常意味着页面可能包含多个<html>标签，这在标准的HTML文档中是不常见的，因为一个有效的HTML文档应该只有一个根<html>元素。然而，在某些情况下，例如使用了错误的服务器端模板或者客户端JavaScript动态生成了额外的<html>标签，可能会出现这种情况。
基础概念
XPath 是一种用于在XML文档中查找信息的语言，它同样适用于HTML文档。XPath使用路径表达式来选择节点或节点集。
CSS选择器 是一种用来选择HTML元素的工具，它允许开发者根据元素的属性、类、ID等来指定样式规则。
解决方案
使用XPath选择器
如果页面中有两个<html>元素，你可以使用XPath的相对路径或绝对路径来选择特定的元素。例如，如果你想选择第一个<html>元素下的所有<div>元素，可以使用以下XPath表达式：
//html[1]//div这个表达式会选择第一个<html>元素下的所有<div>元素。如果你想选择第二个<html>元素下的所有<div>元素，可以使用：
//html[2]//div使用CSS选择器
CSS选择器在这种情况下可能不那么灵活，因为它们通常是基于单个文档树的。但是，你可以尝试使用属性选择器或者结合:not()伪类来尝试选择特定的元素。例如，如果两个<html>元素有不同的ID，你可以这样做：
#html1 div {
/* 样式规则 */
}
#html2 div {
/* 样式规则 */
}如果<html>元素没有ID，你可以尝试使用其他属性，比如class，或者结合其他元素来构建选择器。
应用场景
这种情况可能出现在以下场景中：
- 错误的服务器端模板：服务器端模板引擎可能错误地生成了多个
<html>标签。 - 客户端JavaScript错误：JavaScript可能在页面加载后动态插入了额外的
<html>标签。 - 第三方插件或库：某些插件或库可能会以不正确的方式修改DOM结构。
解决问题的方法
- 检查服务器端模板：确保服务器端模板正确地只生成一个根
<html>元素。 - 审查客户端JavaScript：检查所有可能影响DOM结构的JavaScript代码，确保没有意外地添加额外的
<html>标签。 - 使用浏览器的开发者工具：利用浏览器的开发者工具来检查和调试DOM结构，找出多余的
<html>元素的来源。
示例代码
假设我们有两个<html>元素，分别带有ID html1 和 html2，我们可以使用以下JavaScript代码来选择它们内部的<div>元素：
// 使用XPath选择器
var divsInFirstHtml = document.evaluate('//html[@id="html1"]//div', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < divsInFirstHtml.snapshotLength; i++) {
console.log(divsInFirstHtml.snapshotItem(i));
}
var divsInSecondHtml = document.evaluate('//html[@id="html2"]//div', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < divsInSecondHtml.snapshotLength; i++) {
console.log(divsInSecondHtml.snapshotItem(i));
}
// 使用CSS选择器
var divsInFirstHtmlWithCss = document.querySelectorAll('#html1 div');
divsInFirstHtmlWithCss.forEach(function(div) {
console.log(div);
});
var divsInSecondHtmlWithCss = document.querySelectorAll('#html2 div');
divsInSecondHtmlWithCss.forEach(function(div) {
console.log(div);
});请注意，这些解决方案假设你能够通过ID或其他属性区分两个<html>元素。如果不能，那么问题可能需要更深入的调查来解决。
相关·内容
我正在使用Python，selenium webdriver，IE，xpath和css从互联网上获取一些报告。问题是网站有两个html元素： <html></html>
<html lang="en"></html> 我知道我感兴趣的元素位于第一个html块中
浏览 36提问于2021-03-25得票数 0
我尝试使用:root引用没有根元素的根元素。我正在尝试一个旧版本的浏览器(IE8)。提前谢谢。
浏览 0提问于2011-05-22得票数 1
回答已采纳
我正在尝试从HTML页面中获取一些内容。在这里，我将HTML分成几个部分，并使用Nokogiri解析每个子部分。#!</div>')div = doc.at_css('div')
puts div, "\n&
浏览 2提问于2013-07-26得票数 0
回答已采纳
webdriver.Chrome()accept_button = driver.find_element_by_xpath('/html/body/div/div[2]/div[3]/div[2]/button')上面写着：
消息:没有这样的元素:无法定位元
浏览 8提问于2021-05-20得票数 1
回答已采纳
我有一个没有定义Id的元素。类名不允许我唯一地标识元素。这就是为什么我想使用role或header属性来定位它：class="ng-tns"> </p-dialog>
我应该如何在Protractor / Selenium Webdriver中做到这一点？我可以通
浏览 0提问于2018-05-25得票数 0
我试图使用XPath选择器，通过nightwatch.js命令将聚合物自定义元素的子元素作为目标。function(svgWidth) {
})ERROR: Unable to locate element: "//th-compare-balance-chart/svg" using: cssselector
getAttribute的文档和其他命令声明您可以提供css选择器或<e
浏览 4提问于2014-06-26得票数 3
回答已采纳
1回答
我正在尝试自动化网站上的一个过程，该网站动态地为其元素生成ID：我设法为大多数元素创建了CSS或XPATH选择器。虽然我正在努力处理一个ul/li元素，但我设法用它的id点击了它，而不是用一个相对的XPath，这就是我的目标：
我尝试过所有类型的xpath：/html[1]/body/
浏览 3提问于2019-11-08得票数 0
2回答
我有两个元素具有相同的属性，但在页面上一次显示一个(当一个显示时，另一个消失)之前，两者之间唯一的区别是，显示的元素将有‘：：.The’选择器。是否可以使用xpath或css选择器根据元素的id以及元素是否包含：：之前来检索元素
浏览 1提问于2015-04-21得票数 11
1回答
我试图使用webdriverio/mocha框架点击Button，代码如下所示：beforeEach(function() {function () { });但我得到了以下错误：
错误:使用给定的搜索参数无法在页面上找到元素我也尝试过XPath：(&
浏览 3提问于2017-04-14得票数 0
1回答
根CSS伪类匹配表示文档的树的根元素。应用于HTML，:root表示元素，并且与选择器html相同，只是它的特异性更高。
它到底是用来做什么的？当您只使用html选择器时，为什么除了更高的特异性之外，还有人会使用它呢？
浏览 0提问于2014-05-08得票数 4
回答已采纳
使用webdriver查找元素的最好、最快的方法是什么？By.XPath还是By.ID或者其他什么？为什么？
我在许多地方读到过XPath是合适的候选人，但就是找不到确切的原因。
浏览 0提问于2012-08-02得票数 17
回答已采纳
我想要的是：我已经搜索过了，但是我只看到了通过XPath的解决方案--我没有XPath，我有WebElement。
有什么想法吗？
浏览 1提问于2016-08-15得票数 0
回答已采纳
我在Firefox中使用了Selenium命令，这是我第一次使用Selenium，所以我可能缺少一些基本的东西。<tr> <td>css=button.k-button.km-button</td></tr>从页面中获取按
浏览 0提问于2013-02-24得票数 3
2回答
www.tokopedia.com/sunxin中取消了这个市场📷此按钮的原始源代码是：我尝试通过xpath、classname、link text来获取元素，但仍然无法工作。driver.fi
浏览 0提问于2020-07-22得票数 2
我正在使用Selenium C#自动化一个网站。我得到了NoSuchElementException，而试图点击元素使用CSS选择器。但是，当我使用xpath时，一切都正常。谁能帮助我理解为什么我有这个问题，而使用CSS选择器。//*[@id="primary-navigation"
浏览 1提问于2015-10-14得票数 1
如果我没有获得HTML元素的id、名称或类，那么在Selenium中使用CSS选择器怎么样？与XPath相比，更喜欢CSS怎么样？
浏览 4提问于2014-01-16得票数 0
我试图从一个网站抓取信息使用CSS选择器，以获得特定的文本元素，但遇到了一个问题。我试图搜索我想要的网站部分，但我的程序告诉我它不存在。我的程序返回一个空列表。我正在使用request和lxml库，并使用CSS选择器来进行HTML抓取。我有Python 3.7。我试着用选择器搜索我需要的网站部分，但它没有出现。我也尝试过使用<e
浏览 0提问于2019-01-22得票数 1
1回答
转换为CSS选择器
、、、
尝试转换下面给定的HTML标记的Image Button，我想点击它，但在使用Xpath时没有被点击。 <img src="../../../..Show Application List" 所生成的Xpath：
/
浏览 3提问于2017-02-14得票数 3
回答已采纳
1回答
XPath和CSS查询算法的不同
、、、、
我想知道为什么有人会想要使用CSS选择器而不是XPath选择器，或者反之亦然，如果他可以使用这两个选择器。我认为理解处理这些语言的算法将解决我的疑问。有很多关于XPath和CSS选择器的文档，但是我发现很少有比较。而且，我没有那么多地使用CSS选择器。
以下是我所读到的关于这些差异的文章。(这三个参考文献讨论了在Selenium
浏览 4提问于2011-11-15得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
