无法读取未定义的属性'replace' - 替换JS生成的HTML中的文本

Question

我有一个ul由外部JavaScript生成的无序列表().在每个列表项中都有一条我想要删除的重复行.因为我无法修改外部javascript,我试图使用replace方法.该列表由给予每个li元素的类标识; rss-item.

以下是我的代码:

   <script>
        function myFunction() {
            var str = document.getElementsByClassName('rss-item').innerHTML; 
            var res = str.replace('Text to replace', '');
            document.getElementsByClassName('rss-item').innerHTML = res; 
        }
    </script>

    <button onclick="myFunction()">Replace</button>

错误发生在以下行:

var res = str.replace('Text to replace', '');

错误说明:

Uncaught TypeError: Cannot read property 'replace' of undefined

据我所知,这可能意味着javascript要么找不到类名为'rss-item'的元素,要么找不到我想要替换的文本.我绝对肯定这是正确的类名,我试图替换的文本确实存在.是否出现此问题是因为标记是由javascript生成的？我走到了尽头.

Answer 1

document.getElementsByClassName('rss-item')返回一个类似数组的对象(HTMLCollection).如果你想要第一个元素,你应该要求它:

var str = document.getElementsByClassName('rss-item')[0].innerHTML;

如果你想要更具防御性,可能值得实际检查是否找到了任何元素,使用类似这样的东西:

var elements = document.getElementsByClassName('rss-item');
if (elements.length > 0) {
    elements[0].innerHTML = elements[0].innerHTML.replace('Text to replace', ''); 
}

正如您在评论中建议的那样,您可能希望对找到的所有元素执行替换.在这种情况下,您可以循环遍历这样的元素:

var elements = document.getElementsByClassName('rss-item');
for (var i = 0; i < elements.length; ++i) {
    elements[i].innerHTML = elements[i].innerHTML.replace('Text to replace', '');
}