前端面试题——dom的逆序

最新推荐文章于 2025-05-27 17:22:59 发布

原创最新推荐文章于 2025-05-27 17:22:59 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

js面试题专栏收录该内容

208 篇文章

订阅专栏

这篇博客通过示例展示了如何使用JavaScript操作DOM元素，特别是针对`<ul>`列表的处理。首先，它获取了`<ul>`中的所有`<li>`元素，并将它们转换为数组。接着，数组被反转并重新插入到`<ul>`中，实现了列表项的倒序显示。这个过程涉及到JavaScript的基础语法和DOM操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

    <script>
        let ul = document.querySelector('ul')
        let lis = ul.querySelectorAll('li')
        let lisArr = Array.from(lis)
        let arr = []
        for(let i = 0; i < lisArr.length; i++) {
            arr.push(lisArr[i].innerText)
        }
        arr.reverse()
        ul.innerHTML = ''
        for(let i = 0; i < arr.length; i++) {
            let li = document.createElement('li')
            li.innerText = arr[i]
            ul.appendChild(li)
        }
    </script>