Всем привет!
Вы, вероятно, поняли цель этого поста из самого заголовка. Итак, без церемоний, НАЧАЛО!

Что такое ДОМ?

DOM — это дерево объектов, которое создается при загрузке веб-страницы. API Html DOM (объектная модель документа) помогает нам сделать наши веб-сайты динамичными с помощью JavaScript.

Здесь мы сосредоточимся на отработке навыков манипулирования DOM. Однако, чтобы узнать больше о DOM, перейдите по ссылкам ниже.



Что такое HTML DOM
При загрузке веб-страницы браузер создает объектную модель документа страницы. Создана модель HTML DOM…www.w3schools.com





Введение в DOM — веб-API | MDN
Объектная модель документа (DOM) — это представление данных объектов, составляющих структуру и содержимое…developer.mozilla.org



Давайте рассмотрим некоторые упражнения по манипулированию DOM, которые улучшат ваши навыки манипулирования DOM.

Я бы порекомендовал вам попробовать эти упражнения, используя два разных подхода. Это расширит ваши знания о том же. Не беспокойтесь, если у вас есть только одно решение.

Шаги, которые нужно выполнить для каждого упражнения:
1. Откройте редактор Codepen.
2. В разделе Html скопируйте и вставьте Htmlкод для каждого упражнения.
3. Начните писать свой код в разделе JS codepen.

Упражнение 01

Подсчитайте количество элементов списка и добавьте тег para для отображения результатов.

HTML

<body>
<ul>
<li>Apple 🍎</li>
<li>Grapes 🍇</li>
<li>Pear 🍐</li>
<li>Orange 🍊</li>
</ul>
<input type="button" onclick="getCount()" value="Count all items in the list">
</body>

Упражнение 02

Когда пользователь наводит указатель мыши на текст, выделенный полужирным шрифтом, он должен быть выделен.
Примечание#. Вы можете создать свой собственный класс CSS.

HTML

<body>
<p>
  We have just <b>started</b> this <b>section</b> for the users (<b>beginner</b> to <b>intermediate</b>) who want to work with various <b>JavaScript</b> problems and write scripts online to test their <b>JavaScript</b> skill.
</p>
</body>

Упражнение 03

Показать ширину и высоту окна (должны изменяться при изменении размера окна)

HTML

<body>
  <p>Window Height: </p>
  <p>Window Width: </p>
</body>

Упражнение 04

Дайте всем изображениям в четной позиции одинаковый цвет и стиль границы, а всем изображениям в нечетной позиции одинаковый стиль границы, но другой, чем у четных.

HTML

<body>
  <img src='http://assets.stickpng.com/thumbs/580b585b2edbce24c47b2704.png' alt='photos' height='150px'/>
  <img src='https://static.vecteezy.com/system/resources/previews/001/193/929/non_2x/vintage-car-png.png' alt='photos' height='150px'/>
  <img src='https://www.kindpng.com/picc/m/381-3816942_indoor-plants-png-transparent-png.png' alt='photos' height='150px'/>
  <img src='https://www.freepnglogos.com/uploads/dog-png/bow-wow-gourmet-dog-treats-are-healthy-natural-low-4.png' alt='photos' height='150px'/>
  <img src='https://assets.webiconspng.com/uploads/2017/09/House-PNG-Image-45779.png' alt='photos' height='150px'/>
</body>

Итак, это были некоторые базовые упражнения по манипулированию DOM. В следующем посте я поделюсь некоторыми продвинутыми упражнениями. А пока жми на значок аплодисментов 👏 столько, сколько сможешь😻и следуй за мной здесь, чтобы узнать больше !!!

Увидимся позже, компьютерщики! 💎