javascript - 是否存在反向查询选择器？

Question

我知道我可以使用 querySelector 来定位文档中的元素

var element = document.querySelector(".myclass")

但是是否存在这样的逆查询选择器:

var selector = document.inverseQuerySelector(element);
Assert.AreEqual(element, document.querySelector(selector));

inverseQuerySelector 返回的选择器总是唯一标识指定的元素？

Answer 1

您可以创建一个适用于所有情况的。两种方式:

1. 使用 nth-child(使用索引)

解决方法如下:

function getMyPathByIndex(element){

        if(element == null)
            return '';

        if(element.parentElement == null)
            return 'html'

        return getMyPathByIndex(element.parentElement) + '>' + ':nth-child(' + getMyIndex(element) + ')';

    }

function getMyIndex(element){

        if(element == null)
            return -1;
        if(element.parentElement == null)
            return 0;

        let parent = element.parentElement;

        for(var index = 0; index < parent.childElementCount; index++)
            if(parent.children[index] == element)
                return index + 1;

}

例如，元素:

<a id="y" class="vote-up-off" title="This answer is useful">up vote</a> 

你可以在这个页面中获取这个元素只需在控制台中输入:

document.querySelector('a[title="This answer is useful"]');

拥有独特的querySelector:

html>:nth-child(2)>:nth-child(5)>:nth-child(1)>:nth-child(1)>:nth-child(3)>:nth-child(2)>:nth-child(6)>:nth-child(1)>:nth-child(1)>:nth-child(1)>:nth-child(1)>:nth-child(1)>:nth-child(2)

1. 将属性用于“人类可读”的方式:
   1. 获取元素的属性(仅显式属性)。
   2. 获取元素的完整路径。
   3. 使用多属性选择器统一所有特征。

使用相同的元素之前有它unique querySelector:

html>body>div>div>div>div>div>div>table>tbody>tr>td>div>a[id="y"][class="vote-up-off"][title="This answer is useful"]

通过以下方式测试解决方案是否正确:

// e is an element and e must exist inside the page
document.querySelector( getMyPathByIndex(e)) === e && 
document.querySelectorAll( getMyPathByIndex(e)).length === 1

代码解决方案如下:

function convertAttributesToQuerySelector(element){

  var tagName = element.tagName.toLowerCase();
  var result = tagName;   

  Array.prototype.slice.call(element.attributes).forEach( function(item) {
  if(element.outerHTML.contains(item.name))
    result += '[' + item.name +'="' + item.value + '"]';

});

  return result;
  //["a[id="y"]", "a[class="vote-up-off"]", "a[title="This answer is useful"]"]

}

function getMyPath(element){

   if(element.parentElement.tagName == 'HTML')
    return 'html';

  return  getMyPath(element.parentElement) + '>' + element.parentElement.tagName.toLowerCase() ;
  //"html>body>div>div>div>div>div>div>table>tbody>tr>td>div"

}

function myUniqueQuerySelector(element){

  var elementPath = getMyPath(element);
  var simpleSelector =   convertAttributesToQuerySelector(element);

  return elementPath + '>' + simpleSelector;

}

您始终可以通过以下方式测试解决方案是否正确:

// e is an element and e must exist inside the page
document.querySelector( myUniqueQuerySelector(e)) === e && 
document.querySelectorAll( myUniqueQuerySelector(e)).length === 1