writing-a-parents-function-using-vanilla-js-2pgc

原始地址：https://dev.to/urielbitton/writing-a-parents-function-using-vanilla-js-2pgc

介绍

为了使用更现代的框架（如React、Vue和Ember JS），我放弃了非常有用和强大的Jquery，最让我怀念Jquery的是它超级简单的DOM操作，在纯JS中我们没有这个功能。
我最喜欢的内置函数是.parents()函数和.on()事件处理程序（$ elm节省了很多代码字符！）。这两个函数的唯一作用就是至少将纯JS代码减少了10倍。Jquery中的.on()函数可以轻松地将事件处理程序（如click）绑定到任意数量的元素，如下所示：

$('p').on("click", function() {
   // 在单击页面上的任何p标签时执行任何操作
});

这非常酷和有用。现在，使用纯JS，我们知道我们必须遍历p标签的集合，并将点击事件绑定到该集合中的每个项（因为它们被视为数组）。
代码变得更加复杂：

const p = document.querySelectorAll('p')
for(item of p) {
   p.onclick = () => { //ES6
      // 当点击p标签时执行操作
   }
}

我们可以看到这是可行的，但是很容易增加3-4行额外代码（即使使用ES6）。

但是对于神奇的.parents()函数，Javascript甚至没有提供一个长路径或短路径来实现Jquery所做的事情。因此，让我们看看为了模拟.parents()的行为，我们需要设计什么。最后，与其只是编写.parents()，会增加将近20行额外的代码，但我们将会拥有可重用的函数！它可能会有点冗长，但请坚持下去，我保证你不会后悔。

function getParents(el, parentSelector) {
   if (parentSelector === undefined) {
      parentSelector = document;
   }
   var parents = [];
   var p = el.parentNode;
   while (p !== parentSelector) {
      var o = p;
      parents.push(o);
      p = o.parentNode;
   }
   parents.push(parentSelector);
   return parents;
}

代码解释

让我们理解一下这段代码。第一行启动函数并传递两个参数，实际元素和一个可选的父选择器，用于停止我们对父节点的搜索。
第二行表示如果我们不提供父选择器，则将父选择器设置为根元素，即文档本身（位于html标签之上）。
然后，我们创建一个父元素数组，并填充所有父元素的元素。然后，我们有一个while循环，该循环规定只要当前父节点不是我们提供的父选择器（或文档本身），则将该节点分配给变量o，并将o推入父数组中。
因此，如果每次迭代父节点都不是提供的父选择器，我们将该节点添加到数组中。最终，我们提供的父选择器将成为当前父节点，因为它向上比较每个父节点的过程。
一旦找到匹配，while循环将停止，数组最终将推送我们提供的父选择器，因此最高父节点将位于数组末尾。最后，我们返回数组parents，并完成操作。

现在我们如何实际利用我们自己构建的函数像在jquery中使用.parents()一样？简单。我们在我们想要的元素上调用函数，并将我们的元素和最大父选择器作为参数传递，如下所示：

// parentDiv是我们的最大父选择器
const button = document.querySelector('button')
const parentDiv = document.querySelector('.parentdiv')
// 我们在这里调用我们的getParents函数
const parents = getParents(button, parentDiv)
// 魔法发生在这里，因为我们的父节点始终是最后一个
parents[parents.length-1]
由于我们的父选择器始终是最后一个，我们可以简单地使用我们的parents数组，并通过parents.length-1来检索数组中的最后一个元素（将获得数组中的最后一个元素）。
然后我们可以：

```javascript
parents[parents.length-1].querySelector('p').innerHTML //在我们的父元素中查找p标签的内部HTML内容，就像在jquery中一样

将Jquery与Vanilla JS进行比较

最后让我们看看我们自己构建的纯JS解决方案与Jquery解决方案之间的比较：

// jquery
var mytxt = $('button').parents('.parent1').find('p').html() //将获得我们按钮的父元素div内的p元素的HTML内容 - 非常有用的DOM操作
// 纯JS
const parents = getParents(button, parent1)//假设button和parent1已经赋值
const mytxt = parents[parents.length-1].querySelector('p').innerHTML
通过使用Vanilla JS而不是Jquery，我们现在得到了我们想要的结果！

### 最后的想法
当然，纯JS解决方案需要一些复杂的代码，但是最终并不那么糟糕，并且非常值得使用，尤其是如果我们在整个应用程序中重复使用该函数。
感谢您对我帖子的关注，并一直阅读到最后。我希望您会发现这个有用，并且帮助您在将来的编码项目中！