Question

我正在尝试使用DOM和JS获取属性值，但我无法使代码运行。为什么呢？

<!DOCTYPE html>
<HTML>
  <HEAD>
    <SCRIPT>

      var x = document.getElementById("sw").getAttribute("src");
      alert("src "+ x);

      document.getElementById("sw").innerHTML ="src "+ x;
    </SCRIPT>
  </HEAD>

  <BODY>
    <FORM>
      <IMG id="sw" src="photo.jpg"/>
    </FORM>
  </BODY>
</HTML>

Answer 1

HTML（DOM）的标签尚未加载，但在执行JS代码时尚未出现。这就是为什么你需要将你移到HTML代码之下的原因：

<!DOCTYPE html>
<HTML>
<HEAD>

</HEAD>

<BODY>
<FORM>
<IMG id="sw" src="photo.jpg"/>
<SCRIPT>

var x = document.getElementById("sw").getAttribute("src");
alert("src "+ x);

document.getElementById("sw").innerHTML ="src "+ x;
</SCRIPT>
</BODY>
</HTML>

或者您需要在DOMLoaded事件上添加事件句柄，如下所示：

   <SCRIPT>
document.addEventListener("DOMContentLoaded", function(event) { 

    var x = document.getElementById("sw").getAttribute("src");
    alert("src "+ x);

    document.getElementById("sw").innerHTML ="src "+ x;
});
</SCRIPT>

Answer 2

你正在尝试获取尚未加载的元素的属性尝试将你的js置于就绪函数中，因此它将在DOM元素存在之后触发：

document.addEventListener('DOMContentLoaded', function() {
    var x = document.getElementById("sw").getAttribute("src");
    alert("src "+ x);

    document.getElementById("sw").innerHTML ="src "+ x;
});

或者您可以将<script>代码放在结束标记</body>之前。

希望这有帮助。

<!DOCTYPE html>
<HTML>
  <HEAD>
    <SCRIPT>
      document.addEventListener('DOMContentLoaded', function() {
        var x = document.getElementById("sw").getAttribute("src");
        alert("src "+ x);

        document.getElementById("sw").innerHTML ="src "+ x;
      });
    </SCRIPT>
  </HEAD>

  <BODY>
    <FORM>
      <IMG id="sw" src="photo.jpg"/>
    </FORM>
  </BODY>
</HTML>

JS DOM getAttribute（）

2 个答案: