Question

我正在编写small library，我需要通过querySelector方法选择目标元素的相对元素。

例如：

HTML

<div class="target"></div>
<div class="relative"></div>

<!-- querySelector will select only this .target element -->
<div class="target"></div>
<div class="relative"></div>

<div class="target"></div>
<div class="relative"></div>

的JavaScript

var target = document.querySelectorAll('.target')[1];

// Something like this which doesn't work actually
var relativeElement = target.querySelector('this + .relative');

在上面的示例中，我尝试选择.relative类元素仅相对于.target元素，其值存储在target变量中。任何样式都不应适用于其他.relative类元素。

PS：选择器可以变化。因此，我无法使用JavaScript的预定义方法，例如previousElementSibling或nextElementSibling。

我不需要jQuery或其他JavaScript库中的解决方案。

Answer 1

你不能。 如果你坚持使用主题元素的querySelector，答案是没有办法的。

规范和MDN都明确表示Element.querySelector必须返回“调用它的元素的后代”，并且您想要的对象元素不会满足这个限制。

你必须上去使用其他元素，例如document.querySelector，如果你想爆发。

您始终可以覆盖Element.prototype.querySelector来执行出价，包括实施自己的CSS引擎，以您想要的任何语法选择所需的任何元素。我没有提到这一点，因为你将打破一个非常重要的功能的假设，容易打破其他库甚至正常的代码，或者最好放慢速度。

Answer 2

理想情况应该是：

var relativeElement = target.querySelector('.relative');

但实际上这会尝试在目标元素中选择一些东西。因此，只有当您的html结构类似于：

时，这才有效

<div class="target">
 <div class="relative"></div>
</div>

在这种情况下，你最好的选择是使用nextElementSibling，我理解你很难使用它。

Answer 3

我找到了一种适用于我的图书馆的方式。

我将使用唯一的自定义属性值替换querySelector中的"this "。像这样：

Element.prototype.customQuerySelector = function(selector){
    // Adding a custom attribute to refer for selector
    this.setAttribute('data-unique-id', '1');

    // Replace "this " string with custom attribute's value
    // You can also add a unique class name instead of adding custom attribute
    selector = selector.replace("this ", '[data-unique-id="1"] ');

    // Get the relative element
    var relativeElement = document.querySelector(selector);

    // After getting the relative element, the added custom attribute is useless
    // So, remove it
    this.removeAttribute('data-unique-id');

    // return the fetched element
    return relativeElement;
}

var element = document.querySelectorAll('.target')[1];
var targetElement = element.customQuerySelector('this + .relative');

// Now, do anything with the fetched relative element
targetElement.style.color = "red";

<强> Working Fiddle

Answer 4

target.querySelector('.relative');

通过在目标而不是文档上使用querySelector，可以将DOM遍历范围限定为目标元素。你的解释并不完全清楚，但相关的我认为你的意思是后代？

获取所有可以使用的目标元素

document.querySelectorAll('.target')

然后迭代结果

如何使用选择器获取相对于Element实例的元素？

4 个答案: