如何通过jQuery或XPath选择器获取指定HTML标签及其子元素

没问题，这就给你两种常用的方法来获取所有class为c的div标签及其子元素：

jQuery的选择器语法非常直观，直接用div.c就能选中所有class包含c的<div>元素，而且选中的jQuery对象会自动包含这些元素的所有子元素，你可以直接对它们进行操作。

示例代码 #

// 获取所有class为"c"的div元素
const cDivs = $('div.c');

// 举个例子：遍历每个元素，打印它们的完整HTML（包含子元素）
cDivs.each(function(index, element) {
  console.log(`第${index+1}个div的内容：`, $(element).html());
});

如果需要精确匹配class属性值恰好是c的div（排除那些class包含c但还有其他值的元素），可以用属性选择器：

const exactCDivs = $('div[class="c"]');

如果你需要用XPath来筛选，表达式也很容易写，不同场景下有不同的写法：

1. 精确匹配class为"c"的div #

//div[@class="c"]

解释：//表示从文档根节点开始查找所有匹配的元素，div指定标签名，[@class="c"]表示匹配class属性值等于c的元素。

2. 匹配class包含"c"的div（兼容多class场景） #

如果你的div可能有多个class值（比如<div class="c d">），上面的精确匹配就会失效，这时候可以用包含匹配：

//div[contains(concat(" ", @class, " "), " c ")]

这种写法会在class值前后加上空格，确保匹配的是独立的c类名，避免误匹配类似cc或者cx的情况。

浏览器中使用XPath的示例代码 #

// 定义XPath表达式
const xpath = '//div[@class="c"]';
// 执行查询
const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

// 遍历所有匹配到的元素
for (let i = 0; i < result.snapshotLength; i++) {
  const divElement = result.snapshotItem(i);
  console.log(`第${i+1}个div的内容：`, divElement.innerHTML);
}

内容的提问来源于stack exchange，提问作者spacecodeur