Question

未捕获的类型错误：无法读取 null 的属性“getAttribute”

2015-09-12

109384

javascript

我刚开始学习 JavaScript。我只想构建一个图片轮播，但第一行就出错了：

Uncaught TypeError: Cannot read property 'getAttribute' of null

js:

function changeImage(){
    var imageSrc=document.getElementById("image").getAttribute("src");
}
changeImage();

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="hello.js"></script>
    <title></title>
</head>
<body>
    <div id="button_left">
        <img id ="left" src="left.png">
    </div>
    <div id="button_right">
        <img id ="right" src="right.png">
    </div>
    <div class="container">
        <img id ="image" src="1.jpg">
    </div>
    <div id="result"></div>
</body>
</html>

Answer 1

问题在于，在目标元素加载之前，脚本中的 document.getElementById("image") 就被调用了，从而返回 undefined / null 。然后，在 undefined / null 对象上调用链式 .getAttribute("src") 。

许多可能的解决方案之一是在页面加载后执行该函数。将脚本中的代码更改为以下内容：

window.onload = function () { var imageSrc=document.getElementById("image").getAttribute("src"); }

在 hello.js 中，将在页面完全加载后执行脚本。

其他答案涵盖了解决此问题的其他几种方法。

Answer 2

发生错误是因为在调用该方法时尚未加载“image”对象。

您需要在 DOM 加载后运行“changeImage()”方法，例如在 body onload 事件中，

<body onload="changeImage();">

或者在 body 最后添加脚本标记，确保图像对象已加载。

Answer 3

尝试这种方式：

var imageSrc = document.querySelectorAll('image[id=your-image-id]')[0].getAttributeNode("src").value;

或者使用 jQuery：

var imageSrc = $('image[id="your-image-id"]').attr('src');