如何在Javascript中选择多个类而不是ID

我需要在Javascript中选择多个类，并使其在悬停时产生幻灯片效果。 元素应位于

标记中

第一个要素是工作：

<p id="tweet1">First long text displayed fully on hover</p>

---

JSFiddle上的完整代码：

这是因为

document.getElementById（'tweet1'）通过元素的“id”而不是类获取元素。（之所以这样命名是有原因的。）您可能希望使用
getElementsByClassName（）
。
您需要它来使用gelElementsByClassName（）。
因此，对代码的更改将是：

<p class="tweet1">First long text displayed fully on hover</p>

var tweet = document.gelElementsByClassName('tweet1');

第一个长文本在悬停时完全显示
var tweet=document.gelElementsByClassName（'tweet1'）；
当我编辑tweet.id='tweet1'时；它与tweet.Classname='hiding'冲突；我不知道该做什么我没有告诉你修改tweet.id。需要更改的两行显示在我的答案中。是的，你是对的-它回答了我的问题，但悬停效果停止工作。我需要更改其他内容以使其工作，我不知道要更改什么。你们看到html结果了吗？我做到了，但悬停效果完全停止工作了。当我编辑tweet.id='tweet1'时；它与tweet.Classname='hiding'冲突；我不知道该怎么办。
var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';

var slide_timer,
    max = tweet.scrollWidth,
    slide = function () {
        tweet.scrollLeft += 2;
        if (tweet.scrollLeft < max) {
            slide_timer = setTimeout(slide, 40);
        }
    };

tweet.onmouseover = tweet.onmouseout = function (e) {
    e = e || window.event;
    e = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.className = e ? '' : 'hiding';
    if (e) {
        slide();
    } else {
        tweet.scrollLeft = 0;
    }
};

#tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

<p class="tweet1">First long text displayed fully on hover</p>

var tweet = document.gelElementsByClassName('tweet1');