把dom里的类数组对象转换为数组

最新推荐文章于 2024-04-07 16:34:21 发布

小小李子@@

最新推荐文章于 2024-04-07 16:34:21 发布

阅读量1.8k

点赞数 2

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qweasd222asd/article/details/108343297

版权

本文介绍了三种将类数组对象转换为数组的方法：forEach(), slice() 和 map() 方法，并提供了详细的代码示例。

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

1.forEach()方法

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用foreach()方法把类数组对象转换为数组</title>
    <script>
        window.onload=function(){
            var odivs=document.getElementsByTagName("div");
            console.log(odivs)
            var odivs2=Array.prototype.forEach.call(odivs,function(item,index){
                console.log(item,index);
            })
        }
    </script>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
</html>

结果：
在这里插入图片描述

2.slice()方法

js代码：
  window.οnlοad=function(){
            var odivs=document.getElementsByTagName("div");
            console.log(odivs)
            odivs=Array.prototype.slice.call(odivs);
            odivs1=[].slice.call(odivs);
            console.log(odivs)
            console.log(odivs1)
            
html代码：
  <div id="one">div1</div>
    <div id="two">div2</div>
    <div id="three">div3</div>

结果：
在这里插入图片描述

3.map()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map转换为数组</title>
    <script>
        window.onload=function(){
            var odivs=document.getElementsByTagName("div")
            console.log(odivs)
            //第一种：
            var odivs1=Array.prototype.map.call(odivs,function(item,index){
                return item;
            })
            //第二种:
            // var odivs1=[].map.call(odivs,function(item,index){
            //     return item;
            // })
            console.log(odivs1)
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

结果：
在这里插入图片描述