Question

我想在带有JavaScript的img标签中检测src的第一个字母，如果第一个字母与'l'不匹配则显示警告：

HTML：

<!DOCTYPE html>
<html>
<body>
<script src="imgDetect.js"></script>
<img src="l.jpg" />
<img src="a.jpg" />

</body>
</html>

Javascript：

x = document.getElementsByTagName('img').getAttribute('src');
if (x.charAt(0)!=='l'){
window.alert("message")
}

问题是getAttribute不适用于getElementsByTagName。

警告会显示getElementsByTagName是否被getElementById替换，（仅用于检测单个元素），我希望它适用于getElementsByTagName

中的所有代码

Answer 1

这是因为getElementsByTagName返回一个NodeList对象，它是一个像对象一样的数组，引用了多个元素。

因此document.getElementsByTagName('img')没有名为getAttribute的方法，调用该方法会导致错误。相反，您需要遍历列表并测试每个元素

x = document.getElementsByTagName('img');
for (var i = 0; i < x.length; i++) {
    if (x[i].getAttribute('src').charAt(0) !== 'l') {
        window.alert("message")
    }
}

演示：Fiddle

同样在您的脚本中，您已将脚本包含在页眉中，当执行时，页面正文尚未加载，因此document.getElementsByTagName('img')不会返回任何元素。

您可以使用窗口的加载方法来执行脚本或将脚本移动到页面底部

使用onload

window.onload = function () {
    //this part of the script will be executed after the document is loaded completely
    var x = document.getElementsByTagName('img');
    for (var i = 0; i < x.length; i++) {
        if (x[i].getAttribute('src').charAt(0) !== 'l') {
            window.alert("message")
        }
    }
}

底部的脚本

<img src="l.jpg" />
<img src="a.jpg" />
<script src="imgDetect.js"></script>

Answer 2

getElementsByTagName返回一个数组。在进一步访问其属性之前，您需要从列表中获取元素。以下是更新后的代码：

var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
  if(images[i].getAttribute('src') !== 'l') window.alert("message");
}

Javascript - getAttribute无法使用getElementsByTagName

2 个答案: