javascript - document对象的方法无法通过元素来调用-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

怪我咯 2017-04-11 11:43:20

[JavaScript讨论组]

648

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 p,
.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

怪我咯

走同样的路，发现不同的人生

全部回复(3)

大家讲道理2017-04-11 11:45:20 3楼

document.getElementsByClassName返回的是HTMLCollection不是DOM对象，你需要遍历。
你这里oContainer是一个DOM数组。
getElementsByClassName

赞 +0

添加回复

PHP中文网2017-04-11 11:45:20 2楼

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() 是直接找到节点而不是一个节点集合。

赞 +0

添加回复