document对象的方法无法通过元素来调用

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>万年历</title>
    <link rel="stylesheet" type="text/css" href="css/rl.css">
    <script type="text/javascript">
        window.onload=function(){
            var oContainer=document.getElementsByClassName('container');

            // 触发器
            var aBtn=document.getElementsByTagName('button');


            // 被操纵对象
            var oCont=oContainer.getElementsByClassName('container');

            var arr=['你好啊我们一起去意大利',
            '哈哈哈哈哈哈哈哈哈哈哈哈',
            'llllllllllllllllllll',
            'inaongd',
            '555555555555555555555555555',
            '666666666666',
            '7777777777777777777',
            '88888888888',
            '99999999999',
            '101010',
            '111111111111111111111',
            '1212121212',
            ];

            for (var i = aBtn.length - 1; i >= 0; i--) {
                aBtn[i].onmouseover=function() {
                    aBtn[i].index=i;
                    oCont.innerHTML='<h3>'+(this.index+1)+'月活动</h3><p>'+arr[this.index]+'</p>';
                }
            }
        }
    
    </script>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="row">
                <div><button>1</button></div>
                <div><button>2</button></div>
                <div><button>3</button></div>
            </div>
            <div class="row">
                <div><button>4</button></div>
                <div><button>5</button></div>
                <div><button>6</button></div>
            </div>
            <div class="row">
                <div><button>7</button></div>
                <div><button>8</button></div>
                <div><button>9</button></div>
            </div>
            <div class="row">
                <div><button>10</button></div>
                <div><button>11</button></div>
                <div><button>12</button></div>
            </div>
        </div>
        <div class="content">
            <h3>1月活动</h3>
            <p>要去拜年事业有成</p>
        </div>
    </div>
</body>
</html>

CSS代码：

.container{
    width: 190px;
    margin: 0 auto;
    position: relative;
}
.wrapper{
    display: table;
    border-collapse: separate;
    border-spacing: 10px 10px;
    background: #ccc;
    margin:0 auto;
}
.row{
    display: table-row;
}
.row div,
.row button{
    display: table-cell;
    height:50px;
    width: 50px;
}
.row button{
    font-size: 25px;
    background: #333;
    color: #fff;
    border:none;
}
.row button:hover{
    cursor: pointer;
    background: #23aa11;
}
.content{
    position: absolute;
    left: 0;
    top: 250px;
    width: 190px;
    display: block;
    background: #ccc;
}
.content h3,
.content p{
    margin: 10px;
}
.content h3{
    font:bold 16px/1 '黑体';
}
.content p{
    font-size: 14px;
}

报错截图：
图片描述

报错信息：

Uncaught TypeError: oContainer.getElementsByClassName is not a function at window.onload

sublime-text javascript

阅读 3.6k

3 个回答

✓ 已被采纳

getElementsByClassName() 返回的是一个集合，而不是一个元素——注意到方法中的 Elements 是加了 s 的。

然后你的这个逻辑我并不是很理解

var oContainer=document.getElementsByClassName('container');
// 上面这句话已经得到了文档内所有类名包含 container 的节点，
// 下面为什么还要从这些节点中去搜索 container？
var oCont=oContainer.getElementsByClassName('container');

这里我只能假设你是写错了，你的本意是要找 content，那么正确的代码是

var oContainer=document.getElementsByClassName('container');

var oCont;

// oContainer 现在是一个节点集合，所以应该遍历查找其中你想找的东西
// 这里假设你只需要找其中一个 oCont
for (var i = 0; i < oContainer.length; i++) {
    oCont = oContainer[i].getElementsByClassName('container');
    // oCont 也是一个集合，可以通过其长度来判断是否有找到
    if (oCont.length > 0) {
        break;
    }
}

// 检查 oCont 主要是为了避免 oContainer 是空数组(没找到)的情况
// 检查 oCont.length 是判断是否有找到的包含 content 类的节点
if (oCont && oCont.length > 0) {
    // 因为下面用 oCont 是当作一个节点(直接使用了 oCont.innerHTML) 来使用
    // 所以这里先把它从一个集合变成一个节点对象。
    // 上面假设你只需要任意找到一个 content，所以直接取第 0 个了
    oCont = oCont[0];
}

上面这段代码从语法上来说是没啥大问题了，逻辑上也走得通。但是有一些假设。

在写程序的时候请注意区分 id 和 class 的用法。id 用于精确表示一个节点。 class 用于表示一类具有相似作用的节点。所以在通过 id 和 class 来查找节点的时候，也是有区别的。在你这个 HTML 中似乎更适合用 id 而不是 class。

同时注意 document.getElementById() 是直接找到节点而不是一个节点集合。