如何在 JavaScript 中按类获取元素？

Question

我想替换 html 元素中的内容，因此我使用以下函数：

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

上述方法效果很好，但问题是我想要替换其内容的页面上有多个 html 元素。所以我不能使用 id 而是使用类。有人告诉我，javascript 不支持任何类型的按类函数内置的 get 元素。那么如何修改上述代码以使其与类而不是 id 一起使用呢？

附：我不想为此使用 jQuery。

Answer 1

document.querySelectorAll(".your_class_name_here");

这将适用于实现该方法的“现代”浏览器 (IE8+)。

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

如果您想为旧版浏览器提供支持，您可以加载一个独立的选择器引擎，如 Sizzle (4KB mini+gzip) 或 Peppy (10K mini)，如果原生 querySelector 方法则回退到它没有找到。

仅仅为了获取某个类的元素而加载选择器引擎是不是有点矫枉过正？大概。但是，脚本并没有那么大，您可能会发现选择器引擎在脚本的许多其他地方都很有用。

Answer 2

我认为是这样的：

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

会有用的

Answer 3

这应该适用于几乎任何浏览器...

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

你应该可以这样使用它：

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

Answer 4

此代码应该适用于所有浏览器。

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

它的工作方式是遍历文档中的所有元素，并在它们的类列表中搜索matchClass。如果找到匹配项，则替换内容。

jsFiddle Example, using Vanilla JS (i.e. no framework)

Answer 5

当然，所有现代浏览器现在都支持以下更简单的方式：

var elements = document.getElementsByClassName('someClass');

但请注意，它不适用于 IE8 或更早版本。见http://caniuse.com/getelementsbyclassname

此外，并非所有浏览器都会像预期的那样返回纯 NodeList。

您最好还是使用您最喜欢的跨浏览器库。

Answer 6

简单易行的方法

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}

Answer 7

当某些元素缺少 ID 时，我会这样使用 jQuery：

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

这可能是一个奇怪的解决方案，但也许有人觉得它有用。

Answer 8

我很惊讶没有使用正则表达式的答案。这几乎是Andrew's answer，使用RegExp.test 而不是String.indexOf，因为根据jsPerf tests，它似乎对多个操作执行得更好。
还有seems to be supported on IE6。

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

如果您经常查找相同的类，您可以通过将（预编译的）正则表达式存储在其他地方并将它们直接传递给函数而不是字符串来进一步改进它。

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

Answer 9

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

Answer 10

我认为在最初询问时这不是一个有效的选项，但您现在可以使用document.getElementsByClassName('');。例如：

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

请参阅MDN documentation 了解更多信息。

Answer 11

jQuery 处理这个很容易。

let element = $(.myclass);
element.html("Some string");

它将所有 .myclass 元素更改为该文本。

Answer 12

get elements by class in javascript 有 3 种不同的方式。但是在这里您可以查询，因为您有多个具有相同类名的元素，您可以使用 2 种方法：

1. getElementsByClassName 方法 - 它返回文档中或调用它的父元素中具有指定类的所有元素。

   function ReplaceContentInContainer(className, content) {
       var containers = document.getElementsByClassName(className);
       for (let i = 0; i < containers.length; i++) {
           containers[i].innerHTML = content;
       }
   }
   ReplaceContentInContainer('box', 'This is the replacement text');
   
   <div class='box'></div>
   

2. querySelectorAll 方法 - 它在 CSS 选择器的基础上选择元素。用一个点将你的 CSS 类传递给它，它会将所有具有指定类的元素作为类似数组的对象返回。

   function ReplaceContentInContainer(className, content) {
       var containers = document.querySelectorAll(`.${className}`);
       for (let i = 0; i < containers.length; i++) {
           containers[i].innerHTML = content;
       }
   }
   ReplaceContentInContainer('box', 'This is the replacement text');
   
   <div class='box'></div>