Узнать количество тегов div на странице сайта

Question

Мне дали такое задание: напишите скрипт для своей страницы, который будет считать количество тегов div и выведет результат на странице. Пытался выполнить так, но нечего не получилось. Помогите пожалуйста.

 function myFunc() {
    const myDiv = document.body.querySelector( "div" );
    for( let i = 0; i < Collection.length; i++){
     console.log(i);
    }
}

Answer 1

во-первых вы неправильно используете querySelector:

document.body.querySelector( "div" );

надо

document.querySelector( "div" );

а во-вторых это же не jquery, для того чтобы получить список всех тегов надо использовать

document.querySelectorAll( "div" );

т.е. код должен быть таким:

let divs = document.querySelectorAll('div');
console.log(divs.length);

P.S.

а что у вас в коде такое Collection вообще не понятно

Answer 2

JavaScript файл с кодом необходимо подключать в конце body

const divs = document.querySelectorAll('div');
console.log(divs.length);

<div></div>
<div></div>
<div></div>
<div></div>

Или отслеживать, что DOM загрузился, и только тогда выполнять код (тут пример со span, потому что stackoverflow сниппет добавляет свои div'ы)

document.addEventListener('DOMContentLoaded', loadDOM);

function loadDOM() {
  const spans = document.querySelectorAll('span');
  console.log(spans.length);
}

<span>Контент</span>
<span>
  <span>Контент 1</span>
</span>

Как добавить к документу ваше число:

document.addEventListener('DOMContentLoaded', loadDOM);

function loadDOM() {
  const spans = document.querySelectorAll('span');
  const output = document.querySelector('.output');
  
  output.innerHTML = spans.length + ' span\'a';
}

<span>Контент</span>
<span>
  <span>Контент-1</span>
</span>

<div class="output"></div>

БЛОГ НА HUSL

Узнать количество тегов div на странице сайта

Ответы (2 шт):