HTML DOM nextElementSibling 属性

在 Web 开发中，我们经常需要操作 DOM 元素，其中一个常用的属性就是 nextElementSibling。这个属性返回指定元素的下一个兄弟元素（不包括文本节点）。

语法

element.nextElementSibling

示例

假设我们有以下 HTML 结构：

<div id="parent">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
    <div class="child3">Child 3</div>
</div>

我们可以使用 nextElementSibling 属性来获取元素的下一个兄弟元素。例如，如果我们想获取 child1 元素的下一个兄弟元素：

const child1 = document.querySelector('.child1');
const nextSibling = child1.nextElementSibling;
console.log(nextSibling); // 输出 <div class="child2">Child 2</div>

注意事项

• 如果指定元素没有下一个兄弟元素，则 nextElementSibling 属性返回 null。
• nextElementSibling 只返回元素节点，不包括文本节点。

应用场景

nextElementSibling 属性在很多场景下都非常有用。例如，我们可以利用它来实现一个简单的轮播图功能。假设我们有一个轮播图，每个图片都是一个 img 元素，我们可以通过控制 nextElementSibling 属性来实现图片的切换。

<div id="carousel">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

// www.javascriptcn.com code example
const carousel = document.getElementById('carousel');
const activeImage = carousel.querySelector('.active');

function showNextImage() {
    const nextImage = activeImage.nextElementSibling || carousel.firstElementChild;
    
    activeImage.classList.remove('active');
    nextImage.classList.add('active');
}

setInterval(showNextImage, 3000); // 每隔 3 秒切换一次图片

在上面的示例中，我们通过 nextElementSibling 属性来获取当前活动图片的下一个兄弟元素，如果没有下一个兄弟元素，则切换到第一张图片，从而实现了简单的轮播效果。

结论

nextElementSibling 属性是操作 DOM 元素时非常实用的一个属性，可以方便地获取指定元素的下一个兄弟元素。在实际开发中，我们可以结合其它 DOM 方法和属性，灵活运用 nextElementSibling 来实现各种功能。