为什么文档图像包含的不仅仅是图像引用

这里的JavaScript新手，请温柔。我正在使用的 JavaScript 资源似乎都说document.images是一个数组(更新：除了它不是一个数组;请参阅下面的 Badacadabra 的答案(对页面上img元素的引用。这已经足够清楚了，所以为了深入研究它，我写了这个：

<!DOCTYPE html>
<html>
<body>
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">       
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">
  <p><button onclick="myFunction()">test</button></p>
  <p id="demo"></p>
  <script>
    function myFunction() {
      image_report = ""
      for (i in document.images) {
        image_report = image_report + document.images[i].src + "<br>";
      }
      document.getElementById("demo").innerHTML = image_report;
    }
  </script>
</body>
</html>

但是，我不仅获得了页面三个图像的src值列表，还获得了另外三个未定义src的对象：

http://java2s.com/style/demo/border.png
http://java2s.com/style/demo/border.png
http://java2s.com/style/demo/border.png
undefined
undefined
undefined

那些是什么，他们在那里做什么？为什么不解释这一点，例如，在这里？我是否可能错过了一些关于for...in如何工作的东西？

for...in语句循环访问对象

for..in也得到了.length、.item和.namedItem document.images的性质

您也可以使用for..of循环

<!DOCTYPE html>
<html>
<body>
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">       
  <img src="http://java2s.com/style/demo/border.png" width="150" height="113">
  <p><button onclick="myFunction()">test</button></p>
  <p id="demo"></p>
  <script>
    function myFunction() {
      image_report = ""
      for (let image of document.images) {
        image_report = image_report + image.src + "<br>";
      }
      document.getElementById("demo").innerHTML = image_report;
    }
  </script>
</body>
</html>

你可以改用这个：

document.getElementsByTagName('img')

document.images 不是数组。

console.log(Array.isArray(document.images));

document.images是一个 HTMLCollection，它是一个类似数组的对象。类似数组的对象看起来像数组(键是数字(，具有 length 属性，但不是 Array 的实例，并且无法访问Array.prototype方法。

顺便说一下，这段代码应该可以工作：

for (var i = 0; i < document.images.length; i++) {
  console.log(document.images[i].src);
}

相关内容

最新更新

热门标签：