JavaScript：如何通过选择器获取父元素？

13 浏览
0 Comments

JavaScript：如何通过选择器获取父元素？

例子：

    
        ...
        
        ...

我想通过一些选择器从内部div元素（具有myDiv类的元素）中获取父级元素。

如何使用纯JavaScript实现这个，不使用jQuery？

类似于：

var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');

0

3 答案

0 Comments

JavaScript中要通过选择器获取父元素的问题是因为在某些情况下，我们需要获取一个元素的父元素，但是JavaScript本身并没有提供直接的方法来实现这个功能。为了解决这个问题，我们可以使用一个自定义的函数closest()来实现。

closest()函数的作用是找到与给定选择器匹配的最近的父元素（或者元素本身）。函数接受三个参数，分别是要查找的元素（el），选择器（selector）和停止查找的选择器（stopSelector）。

函数使用了一个while循环来遍历元素的父元素链，直到找到匹配选择器的元素或者遇到停止选择器。在每次循环中，使用el.matches()方法来判断当前元素是否匹配选择器。如果匹配选择器，则将该元素赋值给retval变量，并跳出循环。如果存在停止选择器，并且当前元素匹配停止选择器，则跳出循环。

最后，函数返回找到的最近的父元素或者元素本身。

然而，该函数的命名存在问题。作者认为应将其命名为"closestAncestor"，因为如果最近的祖先元素在上方10个元素，而最近的子孙元素在下方1个子元素，那么"closest"将会是子孙元素而不是祖先元素，但是这个函数将返回祖先元素而不是子孙元素。

因此，可以使用这个closest()函数来解决通过选择器获取父元素的问题，但是需要注意函数命名可能引起的误解。

0
0 Comments

JavaScript: 如何通过选择器获取父元素？

在JavaScript中，有时候我们需要根据给定的选择器来获取父元素。但是在原生的JavaScript中，并没有提供直接的方法来实现这个功能。因此，我们需要通过编写自定义的代码来实现这个功能。

下面是一种基本的实现方式：

function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}
function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}
var yourElm = document.getElementById("yourElm"); //div in your original code
var selector = ".yes";
var parent = findParentBySelector(yourElm, selector);

这种方法的效率相对较低，因为它会在整个文档中检索具有相同选择器的所有元素，而不仅仅是检查父元素。

为了解决性能问题，我们可以使用Element.matches()方法来代替Document.querySelectorAll()方法。

以下是一些相关的性能测试结果：JSPerf test。

根据测试结果，Element.matches()方法的性能要优于相关的polyfill方法。

因此，建议使用Element.matches()方法来实现通过选择器获取父元素的功能。

0
0 Comments

在JavaScript中，有时候我们需要根据选择器获取父元素。一个常见的解决方法是使用`closest()`方法，该方法可以在现代浏览器中使用。例如，我们可以使用以下代码获取具有某个属性的父元素：

var div = document.querySelector('div#myDiv');
div.closest('div[someAtrr]');

然而，对于不支持`closest()`方法的浏览器（如旧版的IE），我们需要使用对象检测来提供一个polyfill或替代方法。以下是一种解决方法：

// 检测是否支持closest()方法
if (!Element.prototype.closest) {
  // 定义polyfill方法
  Element.prototype.closest = function(s) {
    var el = this;
    // 循环遍历父元素，直到找到匹配选择器的元素或到达根元素
    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

如果你正在使用的是现代浏览器或Edge浏览器，那么可以放心使用`closest()`方法。然而，如果你需要兼容旧版的IE，你可以将上述polyfill代码添加到你的项目中。

另外，如果你在2021年之后使用该功能，那么上述解决方法已经足够了。但是，如果你正在使用2022年或之后的版本，你可以考虑将这个功能作为标准的解决方法。

总结起来，要通过选择器获取父元素，我们可以使用`closest()`方法或使用polyfill来兼容旧版的IE。这是一个简单而有效的解决方案，可以帮助我们在JavaScript中实现这个功能。感谢那些为这个问题提供解决方法的开发者！

0