如何创建一个以2个元素为参数并返回一个在另一个元素之前的函数(HTML代码中的更多内容)?

例如,在这样的文档中:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 id="title"></h1>
    <h1 id="subtitle"></h1>
    <div>
      <span></span>
    </div>
  </body>
</html>


该函数将返回:


headbody之间的head;
divdiv之间的span;
h1#titleh1#title之间的h1#subtitle;
falsehtml之间的html


伪代码示例:

function firstElement(element1, element2) {
  let elementX = false;
  for ( ... ) {
    if ( ... ) {
      elementX = element1;
    } else {
      elementX = element2;
    }
  }
  return elementX;
}

最佳答案

您可以获取所有Dom元素,将其放置在数组中并检查IndexOf。

例如..

注意:我将all数组部分放置在函数外部,以防您需要进行大量DOM检查,例如可以将其放置在内部。



const first = document.querySelector("[data-pos=first]");
const second = document.querySelector("[data-pos=second]");

const all = Array.from(document.querySelectorAll("*"));

function firstElement(element1, element2) {
  return all.indexOf(element1) < all.indexOf(element2) ?
    element1 : element2;
}


const found = firstElement(second, first);

found.style.backgroundColor = "yellow";

<div>test 1</div>
<div>test 2</div>
<div>test 3</div>
<div>test 4</div>
<div data-pos="first">test 5</div>
<div>test 6</div>
<div>test 7</div>
<div>test 8</div>
<div>test 9</div>
<div data-pos="second">test 10</div>
<div>test 11</div>
<div>test 12</div>

09-17 12:11
查看更多