无法获取最近元素：从li元素获取带data-message属性的p元素失败

我明白你遇到的问题了——你想从<li>元素出发，找到最近的带有data-message属性的<p>元素，但当前代码返回null。这大概率是因为你用错了DOM查找方法，咱们一步步来解决：

为什么你的代码返回null？ #

假设你是用li.querySelector('[data-message]')这类写法，那肯定会返回null。因为querySelector()只会查找当前元素的后代节点，而目标<p>元素是在<li>的父元素<ul>的前面，属于兄弟元素的范畴，根本不在<li>的后代链里，自然找不到。

解决方案 #

根据你的HTML结构，我给你几个可行的方案：

方案1：针对当前结构的快速解法 #

如果你的HTML结构固定（<ul>直接跟在目标<p>后面），可以直接通过父元素的前一个兄弟节点定位：

// 先获取li元素
const li = document.querySelector('li');
// 拿到ul的前一个兄弟元素
const targetP = li.parentElement.previousElementSibling;
// 验证是否是符合要求的p元素
if (targetP && targetP.matches('p[data-message]')) {
  console.log(targetP); // 会输出带有data-message的p元素
}

方案2：更通用的遍历解法（适配结构变化） #

如果未来HTML结构可能调整（比如<ul>前面有其他元素），可以写一个通用函数，从<li>开始向上遍历祖先元素，同时查找每个祖先的前置兄弟节点：

function findClosestPrecedingElement(startEl, selector) {
  let currentParent = startEl.parentElement;
  while (currentParent) {
    // 遍历当前父元素的所有前置兄弟
    let sibling = currentParent.previousElementSibling;
    while (sibling) {
      if (sibling.matches(selector)) {
        return sibling;
      }
      sibling = sibling.previousElementSibling;
    }
    // 没找到就往上找父元素的父元素
    currentParent = currentParent.parentElement;
  }
  return null;
}

// 使用示例
const li = document.querySelector('li');
const targetP = findClosestPrecedingElement(li, 'p[data-message]');
console.log(targetP);

方案3：用XPath精准定位 #

如果你熟悉XPath，也可以用它直接查找目标元素，代码更简洁：

const li = document.querySelector('li');
const targetP = document.evaluate(
  './preceding-sibling::p[@data-message][1]',
  li.parentElement,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;
console.log(targetP);

这段XPath的意思是：在<li>的父元素（<ul>）的前置兄弟元素中，找到第一个带有data-message属性的<p>。

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