javascript - 使用 JavaScript 选择页面上的特定部分不包括所有部分？

Question

在这里，我使用 JavaScript 作为我的轮播 slider 。在我做了所有事情的过程中，我只面临一个问题，那就是当我单击下一个按钮时，它会选择页面上的所有部分，但我只想选择 div 内的部分。

这是我的代码:

 var divMain = document.getElementById("slide");
    console.log(divMain)

    var align = divMain.getAttribute("type");
    console.log(align)

    divMain.insertAdjacentHTML("afterbegin",' <progress id="progressbar" value="0" max="100"></progress>');
    if(align == "slideshow") {
        var timeline = document.getElementById('slide');
       $("#progressbar").css("display","none");
        timeline.insertAdjacentHTML("afterbegin",'<a class="left  color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

        timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrow  carousel-control" href="#myCarousel"  onclick = "plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

        var slideIndex = 2;
        showDivs(slideIndex);

        function plusDivs(sliderItem) {
            showDivs(slideIndex += sliderItem, sliderItem);
        }

        function showDivs(sliderItem, dir) {
            let i;

            let sliderData = document.getElementsByTagName("section");
            
            if (sliderItem > sliderData.length) {slideIndex = 1}    
            if (sliderItem < 1) {slideIndex = sliderData.length}

            for (i = 1; i < sliderData.length; i++) {
                sliderData[i].classList.add('hide')
                sliderData[i].classList.remove('active')  
                sliderData[i].classList.remove('animated')  
                sliderData[i].classList.remove('fadeInRight')  
            }

            sliderData[slideIndex-1].classList.remove('hide')
            sliderData[slideIndex-1].classList.add('active')
            sliderData[slideIndex-1].classList.add('animated')
            if(dir === 1)
                sliderData[slideIndex-1].classList.add('fadeInLeft')
            else if(dir === -1)
                sliderData[slideIndex-1].classList.add('fadeInRight')
        }
    }

<div type="timeline/slideshow" id="slide">
	<section >
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>

我应该怎么做才能解决这个错误。我们将不胜感激。

Answer 1

使用此代码:

let slideElement = document.getElementById("slide");

let sliderData = slideElement.getElementsByTagName("section");

而不是:

let sliderData = document.getElementsByTagName("section");

检查这个 JsFiddle 看看它是如何工作的:https://jsfiddle.net/4jkvrszw/12/