更新 DOM (JavaScript)

Question

我在更新 DOM 时遇到问题。对于有经验的开发人员来说，这可能并不难。我制作了一个包含 4 个项目的轮播，所有项目都默认显示。例如，当单击 < LEFT ARROW 时，我需要用下一个替换第一个项目，并且第一个必须作为最后一个被推送。同样逻辑右箭头 >

我的轮播是这样的：

const carouselItems = Array.from(document.querySelectorAll('.carousel-item'));

还有替换物品的功能：

function carouselToLeft() {
            carouselItems.push(carouselItems.shift());
        }

所以我的 caroueslItems 数组按预期更改，但我无法使 DOM 更新。请有人帮忙。我没有你猜的那样有经验，但我现在需要答案。

Answer 1

Array.from 创建一个新的数组对象，无论你对它做什么都可以让 DOM 更新自己。

你可以通过使用document.querySelectorAll得到一个类似数组的对象，然后push它的每一项为真数组.

然后，当您想用下一个替换第一个项目时，您可以删除它，然后追加到它的父元素。

Answer 2

这是一个只使用一个常量而不使用变量或数组的解决方案：

const cont=document.querySelector(".container");
document.querySelectorAll("button").forEach(b=>b.onclick=ev=> // assign click events
  cont[(b.textContent=="<"?"pre":"ap")+"pend"]( // prepend() or append()
   cont.children[b.textContent=="<"?cont.children.length-1:0]) // last or first child-element
)

<h2>A simplified carousel</h2>
<div class="container">
  <div class="carousel-item">one</div>
  <div class="carousel-item">two</div>
  <div class="carousel-item">three</div>
  <div class="carousel-item">four</div>
  <div class="carousel-item">five</div>
</div>
<button title="move last element to the top">&lt;</button>
<button title="move first element to the bottom">&gt;</button>

我使用这么少代码的原因是，当我们append()或prepend()一个DOM元素时，它会被从原来的位置移走。因此，无需“清理”。通过重新查看 .container 的 children 集合，我始终了解轮播的最新状态。

更新 DOM (JavaScript)

Updating DOM (JavaScript)

javascript

arrays

dom

nodelist