课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

提示有这样的错误：Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

来源：1-4 js实现切换效果

Honghong1223

2015-07-29 10:25


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Tab切换</title>

<link type="text/css" rel="stylesheet" href="style.css">

<script src="jquery-2.1.1.js" type="text/javascript"></script>

<script type="text/javascript">

 

    function $(id){

    //这个是把id单独封装

    return typeof id==='string'?document.getElementById('id'):id;

    }

    window.onload=function(){

        //获取鼠标滑过或点击的标签和要切换内容的元素

        var titles=$('notice-tit').getElementsByTagName('li');

        var divs=$('notice-con').getElementsByTagName('div');

            alert(titles.length);

    }



</script>


</head>

<body>

<div id="notice">

    <div id="notice-tit" >

       <ul>

           <li><a href="#">公告</a></li>

           <li><a href="#">规则</a></li>

           <li><a href="#">论坛</a></li>

           <li><a href="#">安全</a></li>

           <li><a href="#">公益</a></li>

       </ul>

    </div>

    <div id="notice-con">


        <div style="display:none;">

            <ul>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">阿里2000万驰援灾区！</a></li>

                <li><a href="#">旅游宝让你边玩边赚钱</a></li>

                <li><a href="#">多行跟进阿里信用贷款</a></li>

            </ul>

        </div><!--公告end-->


        <div style="display:none;">

            <ul>

                <li>

                    <span>[<a href="#">通知</a>]</span>

                    <a href="#">要玩快乐足球</a>

                </li>

                <li>

                    <span>[<a href="#">通知</a>]</span>

                    <a href="#">阿里2000万驰援灾区！</a>

                </li>

                <li>

                    <span>[<a href="#">通知</a>]</span>

                    <a href="#">旅游宝让你边玩边赚钱</a>

                </li>

                <li>

                    <span>[<a href="#">通知</a>]</span>

                    <a href="#">多行跟进阿里信用贷款</a>

                </li>

            </ul>

        </div><!--规则end-->


         <div style="display:none;">

            <ul>

                <li>

                    <span>[<a href="#">聚焦</a>]</span>

                    <a href="#">要玩快乐足球</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">阿里2000万驰援灾区！</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">旅游宝让你边玩边赚钱</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">多行跟进阿里信用贷款</a>

                </li>

            </ul>

        </div><!--论坛end-->


        <div style="display:none;">

            <ul>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">要玩快乐足球</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">阿里2000万驰援灾区！</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">旅游宝让你边玩边赚钱</a>

                </li>

                <li>

                    <span>[<a href="#">张勇</a>]</span>

                    <a href="#">多行跟进阿里信用贷款</a>

                </li>

            </ul>

        </div><!--安全end-->


        <div style="display:block;">

            <ul>

                <li><a href="#">小红要玩快乐足球</a></li>

                <li><a href="#">阿里2000万驰援灾区！</a></li>

                <li><a href="#">旅游宝让你边玩边赚钱</a></li>

                <li><a href="#">爱心品牌联合征集</a></li>

            </ul>

        </div><!--公益end-->


    </div>

</div>


</body>

</html>


写回答 关注

13回答

  • 慕UI3582978
    2019-10-07 18:55:40

    请把把html文件中的 

    <script .....
    </script>
    移到body的最后，就可以啦！！！?

    0 0
  • 是桃子精呀
    2019-07-14 10:45:57

    还是不行。被这个问题搞疯了！！！！！！！！！！！！！！！！！

    0 0
  • 慕勒3591117
    2018-10-16 18:46:31

    为什么移到body就行了,我试了一下果然可以了，求解，好奇怪！！

    1 0

    慕仙5514...

    我的也是一样，移到body就可以了，好奇怪

    2019-02-27 22:58:02

    共 1 条回复 >

  • 慕莱坞8228613
    2018-06-02 20:18:05

    我也这样，但是前面说的都没解决

    1 0

    慕布斯373...

    你试试把html文件中的 <script ..... </script> 移到body的最后试试

    2018-06-04 17:17:05

    共 1 条回复 >

  • _Rainy
    2018-01-26 15:26:58

     function $(id){

        //这个是把id单独封装

        return typeof id==='string'?document.getElementById('id'):id;//('id')这里封装函数用的是参数，不要引号，后面调用时你传入具体值才需要引号起来

        }


    0 0
  • 言枫
    2017-06-28 11:35:41

    这个问题解决了，跟第一行代码有关

    function $(id){

        return typeof id==="string"?document.getElementById(id):id;

    }

    这句代码中的$其实代表的是函数名，所以$("tab-tit").getElementsByTagName("li"),的意思其实是获取了id为tab-tit下面的所有li，要注意html中有没定义这个id，确定有的话就不会报“Cannot read property 'getElementsByTagName' of null”这个错了


    1 1

    qq_肥鱼_...

    正解~~

    2018-01-30 10:46:54

    共 1 条回复 >

  • 言枫
    2017-06-28 11:02:29

    菜鸟表示不懂

    var titles=$('notice-tit').getElementsByTagName('li');

     var divs=$('notice-con').getElementsByTagName('div');

    $('notice-con')为什么可以跟getElementsByTagName('div')？又为什么会报“Cannot read property 'getElementsByTagName' of null”这样的错，看了很多人都有说到这个问题，挺纳闷，到底是用js还是jq


    0 0
  • qq_果汁分ni半_03462240
    2017-05-07 15:29:33

    好巧，我也是怎么解决？

    0 0
  • 慕粉3809271
    2017-03-20 15:54:21

    上面的回复都没解决这个问题，求解决方法？

    0 0
  • renpingjun
    2015-10-18 20:29:05

    我在写的时候浏览器也报了同样的错误，求解决方法？

    0 0
  • 心无杂念
    2015-07-31 16:12:56

    这样写的话，应该是 document.getElementsByTagName("div")，而不是通过jQuery吧

    0 0
  • Honghong1223
    2015-07-29 16:46:08

    哦，那我想问下老师为什么可以这样写呢？

    3 0

    qq_虹大人... 回复珺珺

    好赞啊 给你100分不怕你骄傲！

    2016-08-19 11:33:12

    共 3 条回复 >

  • 心无杂念
    2015-07-29 11:38:11
    jquery没有getElementsByTagName('li');方法，直接写成$('notice-tit li')就可以了,看看jQuery选择器的文档
    1 0

    Hongho...

    哦，那我想问下老师为什么可以这样写呢？

    2015-07-31 11:24:28

    共 1 条回复 >

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65465 学习 · 581 问题

查看课程

相似问题

aDiv[j].style.display="none";代码： Uncaught TypeError: Cannot read property &#039;style&#039; of undefined

回答 1

提示错误getElementsByTagName

回答 3

TypeError: $(...).getElementsByTagName is not a function

回答 2

无法获取未定义或null引用的属性getElementsByTagName

回答 6

JS中这一行代码老是提示 缺少分号错误 这是为什么呢

回答 1

打开慕课网App查看更多内容