javascript - Javascript在没有jQuery的情况下获取X父节点

Question

我只是使用“Javascript:;”从一些网站手动抓取数据 在浏览器的地址栏中。它比复制/粘贴更容易。

我遇到了一些我必须做的事：object.parentNode.parentNode.... 以获取一些信息，并且由于它因站点而异，它可能处于任何级别。

显然我不想要一个循环并遍历它，因为这会使一个简单的任务更加广泛。

有没有办法说：object.parentNode[4] 或者没有 jQuery 之类的东西？

Answer 1

我不认为你会设法避免一个好的 ol' 循环：

for(var i=0; i<4 && node.parentNode; node=node.parentNode, i++); alert(node);

Answer 2

我在 Vanilla JavaScript 中编写了一个函数来做到这一点：

https://github.com/ryanpcmcquen/queryparent

这是es5版本：

https://github.com/ryanpcmcquen/queryparent/blob/master/index-es5.js

或者如果只需要支持现代浏览器，可以使用es6版本：

https://github.com/ryanpcmcquen/queryparent/blob/master/index.js

你这样称呼它：

queryParent(SELECTOR, PARENT);

它将返回原始 JavaScript 节点。

这是一个获得您想要的确切类选择器的演示，即使有另一个元素具有相同的选择器（您不想要）：

https://jsfiddle.net/ryanpcmcquen/zkw0gdj7/

/*! queryParent.js v1.2.1 by ryanpcmcquen */
/*global module*/
/*jshint esversion:6*/

const d = document;
const qu = 'querySelector';

const queryParent = (s, p) => {
  const q = (x) => d[qu](x);
  const qa = (y) => d[`${qu}All`](y);
  const pa = qa(p);
  (typeof s === 'string') && (s = q(s));
  return [...pa].filter((n) => {
    return (n.contains(s)) ? n : false;
  }).pop();
};

//module.exports = queryParent;

console.log(
  queryParent('.bar', '.foo')
);

// PSST! Check the console!

<div>
  <ul class="foo">
    But there is also a <code>foo</code> we don't want here.
  </ul>
  <ul class="foo">
    The <code>foo</code> we want is here.
    <li>
      <ul>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul></ul>
        </li>
        <li>
          <ul class="bar"><code>bar</code> is here.</ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

我发现这更有用的原因是它不依赖于一定数量的.parent()调用（或者相反.parentNode在纯 JS 中）。出于这个原因，它使您的代码更具前瞻性，并且在标记结构发生变化时不太可能停止工作。