Публикации по теме 'dom-manipulation'
Основы: селекторы DOM
Изучение JavaScript в первый раз может быть сложной задачей, особенно если это ваш первый опыт программирования в целом. В «Основах» моя цель состоит в том, чтобы попытаться рассмотреть концепции самым простым способом, чтобы вы могли выйти из чтения с поверхностным пониманием рассматриваемой концепции, которое затем вы можете взять и попробовать. чтобы расширить свои знания в другом месте.
В этой статье давайте рассмотрим основы селекторов DOM, которые необходимы, если вы хотите добавить..
Управление DOM: управление HTML-элементами с помощью Javascript
В нашей предыдущей главе: Управление DOM: введение в DOM мы узнали, как получить доступ к HTML-элементам с помощью Javascript. В этой главе мы получим доступ к этим элементам и будем манипулировать ими в соответствии с нашими потребностями.
Первым делом: знакомство с вашим объектом HTML-элемента
Каждый объект HTML-элемента имеет множество связанных с ним свойств и методов, которые поначалу могут показаться ошеломляющими. Мы можем изменить стиль, текстовое содержимое, узлы и т. д. В..
Манипуляции с DOM: получение ввода от пользователя и отображение на сайте
В нашей предыдущей главе: Управление DOM: простой счетчик кликов мы узнали, как обновить нашу HTML DOM с помощью Javascript. В этой главе мы будем принимать данные от пользователя и отображать их на нашем сайте.
Начиная
Сначала давайте начнем с наших файлов. Создайте папку и внутри этой папки создайте два файла.
index.html main.js
Щелкните папку правой кнопкой мыши и выберите Открыть с помощью кода. Внутри index.html создайте каркас, нажав ! и tab в VSCode. Мы получим..
Создание карусели с помощью HTML, CSS и JavaScript
Карусель — это популярный способ отображения серии изображений или контента на веб-сайте. В этой статье мы рассмотрим, как создать карусель с помощью HTML, CSS и JavaScript.
Для начала мы создадим структуру HTML для карусели. Мы будем использовать элемент div для обертывания карусели и серию элементов img для хранения изображений:
<div class="carousel">
<img src="image1.jpg" alt="image 1">
<img src="image2.jpg"..
Работа с домом
Объектная модель документа (DOM) служит мостом между JavaScript и веб-страницами, обеспечивая динамичный и интерактивный веб-интерфейс. В этом посте мы рассмотрим, как JavaScript взаимодействует с DOM, охватив такие темы, как выбор элементов, изменение их содержимого или стиля, обработка событий и создание привлекательных веб-приложений. Поняв эти концепции, вы откроете возможности JavaScript для управления и преобразования веб-страниц в режиме реального времени.
Выбор элементов..
Управление DOM: простой счетчик кликов
В нашей предыдущей главе: Управление DOM: управление элементами HTML с помощью Javascript мы узнали, как ориентироваться на элементы и обновлять их с помощью JS. В этой главе мы создадим счетчик кликов, используя эти навыки.
Начиная с нуля
Создайте новую папку, назовем ее click-counter. Щелкните правой кнопкой мыши эту папку и выберите Открыть с помощью кода. После того, как папка откроется в VSCode, мы создадим здесь два файла:
index.html main.js
мы создадим третий файл,..
Здорово!
Здорово!
Недавно я сделал этот фрагмент кода для веб-страницы, созданной с помощью Django CMS. Первая страница была сильно перегружена и зависела от jQuery, но с помощью этой единственной строки я смог удалить почти все фрагменты устаревшего кода jQuery:
const Q = ($query, $allNodes = false, $fromNode = document) => $allNodes ? $fromNode.querySelectorAll($query) : $fromNode.querySelector($query)
Помимо других функциональных частей, таких как добавление/удаление классов CSS,..
