Sejinda 2022-04-02 07:58 采纳率: 90%
浏览 108
已结题

JS中通过getElementsByTagName和getElementsByClassName不能够获取到子节点,这是为什么啊

问题遇到的现象和发生背景
  1. JS中通过getElementsByTagName和getElementsByClassName不能够获取到子节点,这是为什么啊
问题相关代码,请勿粘贴截图

2、

<body>
    <ul id="father">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ul class="father2">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
       
        //获取父节点
        let ul = document.getElementsByTagName('ul');

        //获取所有子节点
        // let son = document.body.childNodes;

        let son = ul.childNodes;
        console.log(son);//undifined
        console.log(son.length);


        //------------------------------------------
        let ul2 = document.getElementsByClassName('father2');
        console.log(ul2.childNodes.length);
      //控制台报错
      //Uncaught TypeError: Cannot read properties of undefined (reading 'length')
        console.log(ul2.childNodes);
    </script>

我的解答思路和尝试过的方法

3、而当我通过getElementById的方式就可以得到

        //获取父节点
        let ul = document.getElementById('father');

        //获取所有子节点
        // let son = document.body.childNodes;

        let son = ul.childNodes;
        console.log(son);
        console.log(son.length);

展开全部

  • 写回答

2条回答 默认 最新

  • uliar 2022-04-02 08:22
    关注

    问题出在:getElementsByTagName和getElementsByClassName返回的是数组,因此使用document.getElementsByTagName('ul')[0]

     // 正确写法
     //获取父节点
        let ul = document.getElementsByTagName('ul')[0];
    
        //获取所有子节点
        // let son = document.body.childNodes;
    
        let son = ul.childNodes;
        console.log(son);//undifined
        console.log(son.length);
    
    
        //------------------------------------------
        let ul2 = document.getElementsByClassName('father2')[0];
        console.log(ul2.childNodes.length);
        console.log(ul2.childNodes);
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 4月9日
  • 已采纳回答 4月2日
  • 创建了问题 4月2日

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部