如何通过JavaScript中的类获取HTML元素？

我试图通过getElementsByClass()操纵HTML，但由于某些原因它不起作用。当我使用document.getElementByID()它的作品？为什么是这样？如何通过JavaScript中的类获取HTML元素？

<div class='boldStuff'> <p>Welcome to the site. </p> </div> 

<script type="text/javascript"> 
    document.getElementsByClass('boldStuff').innerHTML = 'Fred Flinstone'; 
</script>

来源

2011-11-25 user172071

只是一个旁白：这是 “打火石”，而不是 “Flinstone” ... – nnnnnn

尝试：

document.getElementsByClassName('boldStuff')[0]

来源

2011-11-25 19:15:07 Godwin

'getElementsByClassName方法（）'是没有得到普遍支持。 –

@Michael还有什么可以让班级得到普遍支持的吗？ – user172071

这是真的，你必须做一些错误检查或只使用jQuery。 – Godwin

正确的方法来调用是getElementsByClassName()，它会给你元素的数组。

document.getElementsByClassName('boldStuff')

无论如何，这与旧版IE不兼容。检查兼容性here。

来源

2011-11-25 19:15:55

我很确定这只适用于Firefox，不是吗？自从我使用它以来已经有一段时间了 - 现在所有浏览器都支持此功能吗？ –

它不能在IE 8以上工作，只是因为IE9似乎工作。 –

它甚至不支持在IE8中，虽然它在IE 9中工作。 –

getElementsByClassName返回一个NodeList。你将不得不使用

document.getElementsByClassName('boldStuff')[0].innerHTML

指的docs在MDN

来源

2011-11-25 19:18:48 robert

它返回一个数组所以设置阵列的innerHTML的第一个元素

document.getElementsByClassName('boldStuff')[0].innerHTML = 'Fred Flinstone';

来源

2011-11-25 19:19:09 BumbleB2na

这里是一个得到广泛支持的解决方案：

function getElementsByClassName(root, clss) { 

    var result = [], els, i; 

    if(arguments.length < 2 || !root || !clss || root.nodeType !== 1) { 
     return result; 
    } 

    clss = clss + ''; 

    if(root.getElementsByClassName) { 
     result = root.getElementsByClassName(clss); 
    } else if(root.querySelectorAll) { 
     result = root.querySelectorAll('.' + clss); 
    } else { 
     els = root.getElementsByTagName('*'); 
     clss = " " + clss + " "; 
     for(i = 0; i < els.length; ++i) { 
      if((" " + els[ i ].className + " ").indexOf(clss) !== -1) { 
       result.push(els[ i ]); 
      } 
     } 
    } 
    return result; 
}

然后使用它是这样的：

var bold = getElementsByClassName(document, "boldStuff"); 

for(var i = 0; i < bold.length; ++i) { 
    bold[ i ].innerHTML = 'Fred Flinstone'; 
}

的好处是，它使用了本地方法尽可能。

它首先尝试getElementsByClassName，因为它通常是最快的。
然后它尝试querySelectorAll，这将带来支持IE8。
最后，它会对提供的根目录下的所有元素进行手动过滤。

来源

2011-11-25 19:44:58 RightSaidFred

非常好的代码片段。但是，[文档的节点类型是9.]（http://www.w3schools.com/jsref/prop_node_nodetype.asp#nodetypes）您可以删除条件'root.nodeType！== 1'。 – KitKat

如何通过JavaScript中的类获取HTML元素？

回答

相关问题