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

2020/10/12 16:01 · javascript ·  · 0评论

我想替换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 by by class函数。那么如何修改以上代码以使其与类(而不是ID)一起使用?

PS我不想为此使用jQuery。

此代码应在所有浏览器中都有效。

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示例,使用Vanilla JS(即无框架)

当然,所有现代浏览器现在都支持以下更简单的方法:

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

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

此外,并非所有浏览器都会返回纯正的值NodeList

使用您最喜欢的跨浏览器库可能会更好。

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方法,则退回到它。

仅仅加载选择器引擎以便获得具有特定类的元素是否为时过早?大概。但是,脚本并不是那么大,您可能会发现选择器引擎在脚本中的许多其他地方很有用。

一种简单的方法

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';
}

我很惊讶使用正则表达式没有答案。根据jsPerf测试,这似乎Andrew的答案RegExp.test而不是使用String.indexOf,因为它似乎在多个操作中表现更好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.");

这几乎可以在任何浏览器中使用...

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;
}
var elems = document.querySelectorAll('.one');

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

我最初提出此要求时认为这不是一个有效的选项,但是现在可以使用document.getElementsByClassName('');例如:

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

有关更多信息,请参见MDN文档

我认为是这样的:

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;
    }
}
}

会工作

jQuery处理起来很容易。

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

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

当某些元素缺少ID时,我将使用jQuery,如下所示:

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

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

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhonganleihuoquyuansu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!