Question

我正试图通过getElementsByClass()来操纵HTML，但由于某种原因它不起作用。当我使用document.getElementByID()时，它有效吗？这是为什么？

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

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

Answer 1

尝试：

document.getElementsByClassName('boldStuff')[0]

Answer 2

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

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。
最后，它会对提供的根目录下的所有元素进行手动过滤。

Answer 3

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

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

请参阅mdn的docs

Answer 4

正确的调用方法是getElementsByClassName()，它会为您提供一系列元素。

document.getElementsByClassName('boldStuff')

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

Answer 5

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

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

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

5 个答案: