javascript - 更改 DOM 中的随机元素(无 jQuery)

Question

我正在尝试为任何简单的 html 端编写 js。例如，js 应该选择所有 img 或 p 元素，并通过单击按钮交换相同类型的 2 个随机元素的位置。

let max = document.getElementsByTagName("img").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("img")[x1];
let tmp2 = document.getElementsByTagName("img")[x2];

这是我的第一步，但我不知道如何继续。希望有人能帮忙

Answer 1

您需要使用 insertBefore 来执行此操作。

let max = document.getElementsByTagName("div").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("div")[x1];
let tmp2 = document.getElementsByTagName("div")[x2];

// from here, do the changes
let wrapper = document.getElementById("wrapper"); // get wrapper reference
wrapper.insertBefore(tmp1, tmp2); // insert node before tmp1.
wrapper.insertBefore(tmp2, tmp1);

<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

这里需要注意的事情，

1. 所有你需要改变位置的元素，都应该在某个节点下。我没有直接将它们放在 document 下，而是创建了一个包装器节点并添加了它。
2. 为了便于查看，我将节点添加为 div 而不是 img。但代码应该可以正常工作。
3. 这只是为了演示insertBefore。为了正确实现，您需要检查 nextSibling 或 previousSibling 并使用这些节点执行此操作。