使用 DOM 计算我的页面上有多少张图片答案

【问题标题】：Using DOM to figure out how many images are on my page使用 DOM 计算我的页面上有多少张图片
【发布时间】：2018-10-14 14:52:52
【问题描述】：

我正在尝试使用 DOM 来找出我的页面上有多少图像。我需要编写代码来检查我的页面以查看有多少图像并将它们存储到变量中。我不确定如何编写此代码，但我知道您需要在代码中搜索所有标签。

<body>
<div id="main_content">

<div id="image_selection">
<script type="text/javascript">

</script>
</div>

<div id="images">
<h3>Some Images</h3>
    <p><img src="firetruck.jpg" >  |
    <img src="baseball.jpg" >  |
    <img src="soccer_ball.jpg" >
    </p>

</div><!-- end of 'images' div -->
</div><!-- end of 'main content' div -->

【问题讨论】：

您想将图像存储到变量中，以什么方式？ HTMLImageElement/<img> 节点？ src 属性？作为一个数组？

标签： javascript jquery html css dom

【解决方案1】：

var numberOfImgTags = document.getElementsByTagName('img').length 试试这个。

【讨论】：

他想存储图片，而不是图片长度。

【解决方案2】：

要查找页面上的所有<img> 元素，并将生成的NodeList 分配给一个变量：

// (returns live HTMLCollection):
let allImages1 = document.images;
// or (returns (static, non-live) NodeList):
let allImages2 = document.querySelectorAll('img');
// or (returns (live) HTMLCollection):
let allImages3 = document.getElementsByTagName('img');

要了解找到了多少<img> 元素，只需访问NodeList 的length 属性，例如：

let totalNumberOfImages = allImages1.length;

演示“实时”和“静态”集合之间的区别：

使用：document.images：

let images = document.images,
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })

body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}

<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo.

使用document.querySelectorAll('img')：

let images = document.querySelectorAll('img'),
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })

body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}

<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo.

使用document.getElementsByTagName('img')：

let images = document.getElementsByTagName('img'),
  counter = document.querySelector('.count');
counter.textContent = images.length;

Array.from(images).forEach(
  (el) => {
    el.addEventListener('click', (evt) => {
      evt.target.remove();
      counter.textContent = images.length;
    });
  })

body {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

span.count {
  grid-column: 1 / -1;
  background-color: limegreen;
  text-align: center;
  font-weight: bold;
}

<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<img src="https://placekitten.com/200/200" />
<span class="count"></span>

JS Fiddle demo.

请注意，我们（尝试）在每个演示中以相同的方式更新计数，只需访问images 变量的length 属性；变量已更新，因此在使用 document.images 和 document.getElementsByTagName() 时是“活动的”，但在使用 document.querySelectorAll() 时它保持不变，因此是“静态”：

参考资料：

【讨论】：

【解决方案3】：

jQuery 将返回与选择器匹配的元素集合。这就是你需要计算的所有内容：$('img').length

这就是您当前代码的工作方式：

$('img').attr('height','50px').attr('width','50px');

这将在集合的元素上运行一个隐式循环并设置其属性。

【讨论】：

【解决方案4】：

$('img').length 将为您提供运行时存在的总数

【讨论】：