本文讲解如何通过xpath表达式同时匹配id包含特定字符串和data-visible属性值为1的div元素，并准确提取其文本内容。
在Web数据抓取或DOM解析场景中，常需根据复合条件定位HTML元素。例如，目标是提取如下结构中<div>标签的文本内容（即“Need to extract”）：
<div class="line-name" id="line-10" data-visible="1">Need to extract</div>
该元素需同时满足两个条件：
- id 属性值包含字符串 "line"（如 line-10）；
- 自定义属性 data-visible="1"（注意不是 visible，而是带 data- 前缀的HTML5数据属性）。
✅ 正确的XPath表达式
以下两种写法均正确，语义等价且推荐使用：
//div[contains(@id, "line") and @data-visible="1"]
或分步逻辑更清晰的写法：
立即学习“前端免费学习笔记（深入）”；
//div[contains(@id, "line")][@data-visible="1"]
? 解析说明： //div：从任意层级匹配 <div> 元素； contains(@id, "line")：检查 id 属性是否包含子串 "line"（适用于 line-10、line-20a 等动态ID）； @data-visible="1"：精确匹配 data-visible 属性值为字符串 "1"（注意XPath中属性值必须加引号，且区分大小写与类型——此处为字符串比较，非数值）； and 连接表示同时满足，方括号 [] 为谓词，可链式叠加，增强可读性。
❌ 常见错误及修正
你原先的表达式：
'//*[contains(@id, "line")]//div[contains(@visible, "1")]'
存在三处关键问题：
- 误用 //div 嵌套：//*[contains(@id, "line")] 已匹配到目标 <div>，后续再写 //div 会尝试在其子树中查找 <div>，而原节点无子 <div>，导致无结果；
- 属性名错误：@visible 不存在，应为 @data-visible；
- contains() 不必要：data-visible 是精确值 "1"，直接用 = 更高效、语义更准确；若需模糊匹配（如 "1" 或 "true"），才考虑 contains() 或 normalize-space() 等函数。
✅ 完整PHP示例（基于DOMDocument + DOMXPath）
$html = '<div class="line-name" id="line-10" data-visible="1">Need to extract</div>';
$doc = new DOMDocument();
$doc->loadHTML($html);
$xpath = new DOMXPath($doc);
$nodes = $xpath->query('//div[contains(@id, "line") and @data-visible="1"]');
if ($nodes->length > 0) {
echo trim($nodes->item(0)->textContent); // 输出：Need to extract
}⚠️ 注意事项
- XPath对属性名严格区分大小写，data-visible 不能写作 data-Visible 或 datavisible；
- 若HTML未严格闭合或含不规范标签，建议调用 $doc->strictErrorChecking = false; 并启用 libxml_use_internal_errors(true) 避免解析中断；
- 在浏览器控制台调试时，可直接使用 document.evaluate() 验证XPath，例如：
document.evaluate('//div[contains(@id,"line") and @data-visible="1"]', document).iterateNext()?.textContent
掌握这种基于多属性联合筛选的XPath写法，能显著提升HTML结构化数据提取的准确性与鲁棒性。
