从节点列表中获取第一个和最后 n 个项目

Question

I have a nodelist

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>

const slides = document.querySelectorAll('ul li');

I want to save copies of first and last 2 li elements to a variable.

const first2 = slides.slice(0, 2),
  last2 = slides.slice(-2);

All the answers I've seen suggest creating array from nodelist but I need these elements to remain a nodelist. How can I do this?

I want to create clones of these items, add a class to it and add it back to ul. So the final html should look like this

<ul>
    <li class="copy">One</li>
    <li class="copy">Two</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li class="copy">Four</li>
    <li class="copy">Five</li>
</ul>

Answer 1

Do you mean something like this?

 const slides = document.querySelectorAll("ul li"); const ul = document.querySelector("ul"); const temp = []; slides.forEach(slide => { const clone = slide.cloneNode(true); clone.classList.add("red"); temp.push(clone); }); temp.slice(0, 2).reverse().forEach(slide => { ul.prepend(slide); }); temp.slice(-2).forEach(slide => { ul.appendChild(slide); });

 .red { color:red; }

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

Answer 2

You can you selector like in CSS. In this case :first-child and :last-child

 const firstElement = document.querySelector('ul li:first-child'); console.log('firstElement', firstElement) const lastElement = document.querySelector('ul li:last-child'); console.log('lastElement', lastElement)

 ul li:first-child { color:red; } ul li:last-child { color:green; }

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>