Javascript 用getELementByClassName/getElementByClass替换getElementById？

目前，我正在使用CSS、HTML和Javascript为一个网站创建功能选项卡，例如，我正在使用

getElementById

调用特定ID。不过，现在我想在一个选项卡下添加多个项目，包括图像、更多文本、标题等。如何使用

getElementByClassName

或

getElementByClass

（我应该使用哪个？）将所有多个项分组到一个类中并将其放入Javascript中

我想将id更改为类并添加多个元素（我知道如何）：

---

它被称为

getElementsByClassName

，并返回一个

HTMLCollection

，您必须对其进行迭代

因此，替换

document.getElementById("id").whatever.foo = bar;

与

---

要按元素的类名获取元素，请使用

...(name){

  document.getElementsByClassName(name);

}

---

但是它返回一个数组，所以您应该迭代返回的每个元素。

创建一些CSS样式

如果要使用javascript向元素添加样式，请尝试以下操作：

var el = document.getElementById('theID');
el.className += 'newClassNameToAdd';

使用JQuery

$('#theID').addClass('newClassNameToAdd');

$('tagName').addClass('newClassNameToAdd');

现在，如果您有一个HTMLCollection（多个元素），请使用标记或类选择器：

var els = document.getElementsByTagName('tagName');
var len = els.length;

for (var i = 0; i < len; i++) {
    els[i].className += 'newClassNameToAdd';
}

---

首先，它的

getElementsByClassName

not

getElementByClassName

元素末尾有一个

S

。它的复数形式是因为它返回多个数据。它返回以类名为目标的元素数组

必须使用for循环才能使用

getElementsByClassName

var classElem = document.getElementsByClassName
for(i=0;i < classElem.length;i++){
    if(classElem[i].innerHTML == "home"){
        classElem[i].style.display = "block"
        classElem[i].style.background = " rgb(235, 197, 191)"
        break;
    }
}

var classElem=document.getElementsByClassName
对于（i=0；i

---

.innerHTML

返回标记的内容

此文本是innerHTML

首先，

getElementById（）

在具有给定唯一ID的页面上定位单个元素

另一方面，

getElementsByTagName（）

和

getElementsByClassName（）

分别返回其标记/类与给定标记/类匹配的元素数组。因此，这些不是简单的可互换性

你为什么不试着把它推广到N个标签上呢？使用当前方法，每次添加新选项卡时都需要复制代码

例如：

<!-- These do not need to be paragraphs.  Any element will work as long as it has this class and a unique ID -->
<p class="tab-text" id="home">HOME TEXT!!!</p>
<p class="tab-text" id ="about">ABOUT TEXT!!!</p>

        <h1>Little Shop </h1>

        <ul id="tabs">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>

<script>
// Run when document is ready
(function() {
    // Find the UL parent of the tab links
    var tabs = document.getElementById('tabs');
    // Find all links inside it
    var tabLinks = tabs.getElementsByTagName('a');

    // Iterate through them and give them a click event handler
    for (var i = 0; i < tabLinks.length; i++)
    {
        tabLinks[i].onclick = function() {
            // Iterate over all the elements with a class of tab-text and hide them initially
            [].forEach.call(document.getElementsByClassName("tab-text"), function(el) {
              el.style.display = 'none';
            });

            // Then find the element whose ID matches the href attribute of the link clicked and show that
            document.getElementById(this.href.split('#')[1]).style.display = 'block';

            return false;
        }
    }
})();
</script>

主页文本
关于文本
小店




//在文档准备就绪时运行
（功能（）{
//查找选项卡链接的父级
var tabs=document.getElementById（'tabs'）；
//查找其中的所有链接
var tabLinks=tabs.getElementsByTagName（'a'）；
//遍历它们并给它们一个click事件处理程序
对于（var i=0；i

如果您想添加一个新选项卡，您需要做的唯一一件事就是创建一个具有“tab text”类和任何id属性的新元素。然后在UL中添加一个新链接，该链接具有指向ID的href属性

工作样本：

---

您是否考虑过只使用css和类选择器，还是使用jquery（它允许css样式选择器收集dom元素数组并允许您对其进行操作）？为什么不使用jquery。这将是非常容易汉德尔。但出于学习目的，您可以选择document.getElementsByClassName。在这里您可以获得元素引用：@dinespatra:他为什么要使用jQuery？它已经很容易处理了。@collapsar：在JS中使用CSS样式选择器不需要jQuery。jQuery只是在支持它的浏览器中使用内置的

.querySelectorAll（）

方法（现在几乎所有浏览器都支持这个方法）。@squint从技术上讲，你是对的。然而，jquery用自己的css选择器集来补充css选择器集，这些选择器集通常很方便，并且可以生成更易于维护的代码。但是，这些特定于jquery的选择器无法利用

querySelectorAll

的高度优化的本机实现，这可能会影响应用程序的性能。它返回类似数组的集合（特别是

HTMLCollection

），而不是数组。对于第一行，名称之前的“…”应该是什么{'将替换为？函数…（名称）{我看到人们最常用的方法就是像你在这里展示的那样——创建变量并让它们表示document.getElementsByClassName或document.getElementById，或者类似的东西，然后使用变量和“.innerHTML”。我不知道“.innerHTML”是做什么的。有没有不使用变量的方法？（而不是像上面我的代码一样直接键入document.getElementsByClassName？）谢谢你的回答！

document.getElementsByClassName

大部分时间用于循环，所以如果有1000个类，你不必写1000次。我有另一个更新问题。你为什么不想使用变量？

$('tagName').addClass('newClassNameToAdd');

var classElem = document.getElementsByClassName
for(i=0;i < classElem.length;i++){
    if(classElem[i].innerHTML == "home"){
        classElem[i].style.display = "block"
        classElem[i].style.background = " rgb(235, 197, 191)"
        break;
    }
}

<!-- These do not need to be paragraphs.  Any element will work as long as it has this class and a unique ID -->
<p class="tab-text" id="home">HOME TEXT!!!</p>
<p class="tab-text" id ="about">ABOUT TEXT!!!</p>

        <h1>Little Shop </h1>

        <ul id="tabs">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>

<script>
// Run when document is ready
(function() {
    // Find the UL parent of the tab links
    var tabs = document.getElementById('tabs');
    // Find all links inside it
    var tabLinks = tabs.getElementsByTagName('a');

    // Iterate through them and give them a click event handler
    for (var i = 0; i < tabLinks.length; i++)
    {
        tabLinks[i].onclick = function() {
            // Iterate over all the elements with a class of tab-text and hide them initially
            [].forEach.call(document.getElementsByClassName("tab-text"), function(el) {
              el.style.display = 'none';
            });

            // Then find the element whose ID matches the href attribute of the link clicked and show that
            document.getElementById(this.href.split('#')[1]).style.display = 'block';

            return false;
        }
    }
})();
</script>