Question

假设我有以下DOM元素：

<div>test</div>
<div>test</div>

让我们假设我有一个对每个div的引用，但不是对它们的集合。有什么方法可以确定它们之间的关系吗？例如，如果我有div1和div2，我是否可以通过某种方式判断div1是在div2之前还是之后（或内部，或其他什么）？

我知道我可以使用

var elements = document.querySelectorAll('div');

...当然，elements[0]在elements[1]之前。但是，如果我没有那些元素的集合，只有单独的引用，有没有办法告诉？

Answer 1

好的，现在你已经说过关于JavaScript的问题了，你想知道如何在不使用它们在集合中的位置来“区分”两个div（querySelectorAll不返回实际的数组，只是非常类似的东西）。我能想到的唯一原因就是如果你没有这个集合，你只需要引用这两个div，并想知道文档中哪个是第一个。

当然，您可以获取集合，然后查找其中的div，但您也可以使用compareDocumentPosition（链接到规范，但不是尽可能清楚; here's the MDN article）。 compareDocumentPosition告诉您调用它的元素相对于传入元素的位置：

DOCUMENT_POSITION_DISCONNECTED（1）
DOCUMENT_POSITION_PRECEDING（2）
DOCUMENT_POSITION_FOLLOWING（4）
DOCUMENT_POSITION_CONTAINS（8）
DOCUMENT_POSITION_CONTAINED_BY（16）
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC（32）

E.g：

if (oneDiv.compareDocumentPosition(theOtherDiv) & 2) {
    // oneDiv is prior to theOtherDiv in the document order
} else {
    // could be any of the others, but if we assume that both
    // are actually in the document and that neither contains
    // the other, then theOtherDiv is prior to oneDiv
}

示例：

var list = document.querySelectorAll('div');
theoreticalFunction("0, 1", list[0], list[1]);
theoreticalFunction("1, 0", list[1], list[0]);
snippet.log(" "); // Just to move past the divs

function theoreticalFunction(label, oneDiv, theOtherDiv) {
  snippet.log(label);
  // 2 = "preceding"
  if (oneDiv.compareDocumentPosition(theOtherDiv) & 2) {
    snippet.log("theOtherDiv is prior to oneDiv in the document order");
  } else {
    // We're assuming it's following, but of course, there are lots
    // of other possible values:
    // DOCUMENT_POSITION_DISCONNECTED	1
    // DOCUMENT_POSITION_PRECEDING	2
    // DOCUMENT_POSITION_FOLLOWING	4
    // DOCUMENT_POSITION_CONTAINS	8
    // DOCUMENT_POSITION_CONTAINED_BY	16
    // DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32
    snippet.log("oneDiv is prior to theOtherDiv in the document order");
  }
}

div {
  position: absolute;
  top: 0px;
  left: 0px;
}

<div>test</div>
<div>test</div>
<p id="spacer"></p>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

当问题似乎与CSS有关时的原始答案：

听起来就像你正在尝试这样做

在CSS中，
不向元素添加任何其他识别功能

我不相信你可以，除非他们在同一个父母（或者当然，如果他们中的一个在另一个内，但那不是你所展示的），或者除非你可以参考他们的父母/祖先元素（我们不能回答，因为问题中没有）。

如果他们在同一个父母中，您有两种选择：

如果他们真的像你展示的那样，彼此相邻，你可以使用 adjacent sibling combinator ，+来区分它们：

div + div {
    /* Styles for second div */
}

示例：

div {
    position: absolute;
    top: 0px;
    left: 0px;
}
div {
  color: blue;
}

div + div {
  top: 20px;
  color: red;
}

<div>test</div>
<div>test</div>

如果它们实际上不相邻，则可以使用general sibling combinator，~。

div ~ div {
    /* Styles for latter div */
}

示例：

div {
    position: absolute;
    top: 0px;
    left: 0px;
}
div {
  color: blue;
}

div ~ div {
  top: 20px;
  color: red;
}

<div>test</div>
<p>Something in-between</p>
<div>test</div>

Answer 2

这里只是一个黑暗的镜头，但是有什么不对的：

＆＃13;

var same = elements[0] === elements[1]; // false
var same2 = elements[0] === elements[0]; // true

＆＃13;

-KB

确定两个元素之间的关系

2 个答案: