如何创建一个以2个元素为参数并返回一个在另一个元素之前的函数(HTML代码中的更多内容)?
例如,在这样的文档中:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="title"></h1>
<h1 id="subtitle"></h1>
<div>
<span></span>
</div>
</body>
</html>
该函数将返回:
head
和body
之间的head
;div
和div
之间的span
;h1#title
和h1#title
之间的h1#subtitle
;false
和html
之间的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>