Как оказывается, что у всех элементов одинаковые свойства, такие как класс и идентификатор?

Классы (class) и идентификаторы (id) - это HTML атрибуты, позволяющие выбирать элементы для стилизации через CSS и взаимодействия через JavaScript.

Класс:

• Может быть присвоен нескольким HTML элементам.
• Используется для группировки элементов, имеющих общие визуальные или поведенческие характеристики.
• В CSS селектор класса начинается с точки (.), например: .my-class.
• В JavaScript элементы по классу выбирают методами getElementsByClassName или querySelectorAll.

Идентификатор:

• Должен быть уникальным в пределах всей HTML-страницы.
• Используется для идентификации одного конкретного элемента.
• В CSS селектор идентификатора начинается с решетки (#), например: #my-id.
• В JavaScript элемент по ID выбирают методом getElementById.

Пример:

  <div class="card">
      <p>Текст карточки 1</p>
  </div>
  <div class="card">
      <p>Текст карточки 2</p>
  </div>
  <button id="myButton" class="btn">Кнопка</button>

  .card { // Стилизация всех элементов с классом "card"
      border: 1px solid grey;
      padding: 10px;
      margin-bottom: 10px;
  }

  #myButton { // Стилизация только элемента с ID "myButton"
      background-color: blue;
      color: white;
  }

  .btn { // Общие стили для всех кнопок
      padding: 8px 16px;
      cursor: pointer;
  }

  // Получить все элементы с классом "card"
  const cards = document.getElementsByClassName('card');

  // Получить элемент с ID "myButton"
  const button = document.getElementById('myButton');

  // Добавить обработчик события клика к кнопке
  if (button) {
      button.addEventListener('click', () => {
          alert('Кнопка нажата!');
      });
  }

И классы, и идентификаторы являются атрибутами HTML-элементов и задаются непосредственно в разметке. Это позволяет использовать их для стилизации (через CSS) и управления поведением (через JavaScript). Использование классов для схожих элементов и уникальных ID для отдельных элементов является стандартной практикой.