Управление DOM в WordPress с помощью JQuery

Опубликовано: 2023-02-12

Благодаря платформе WordPress с открытым исходным кодом и активному сообществу разработчиков создание тем для платформы имеет довольно широкую привлекательность. Однако навигация по всем элементам и контенту, необходимым для создания сайта WordPress, может быть сложной задачей, в зависимости от ваших знаний и опыта в области программирования.

К счастью, объектная модель документа (DOM) может упростить манипулирование HTML-кодом сайта или перемещение по нему. DOM работает, позволяя вам создавать дерево, состоящее из различных узлов или объектов. Это открывает возможность изменить внешний вид, структуру или функции сайта с помощью библиотек JavaScript, таких как jQuery.

В этой статье мы объясним, что такое DOM и почему вы можете захотеть его использовать. Затем мы предоставим некоторые стандартные методы манипулирования jQuery для использования DOM с WordPress. Давайте погрузимся прямо в!

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

Проще говоря, DOM — это интерфейс прикладного программирования (API) для HTML. Он создает дерево объектов, которое представляет содержимое и структуру веб-страницы. Это также скрипт, не зависящий от платформы и языка, что делает его весьма универсальным. Когда модель DOM представляет исходный код HTML таким образом, она делает его доступным, чтобы к нему могли подключаться различные языки программирования.

Зачем использовать DOM?

Как пользователь WordPress, вы, вероятно, видите DOM в действии каждый раз, когда сталкиваетесь с динамической интерактивностью. Это может включать в себя возврат ошибки, если форма отправлена с отсутствующей информацией. Ползунки контента — еще один пример использования DOM:

Разработчики могут использовать DOM для обновления и изменения почти всех элементов веб-страницы. Вы можете использовать его для создания документов и навигации по их структуре. DOM также можно использовать для добавления, изменения или удаления элементов и объектов.

Управление DOM с помощью JQuery

Чтобы было ясно, DOM и HTML — это не одно и то же, хотя они должны содержать одни и те же элементы. DOM представляет собой смоделированное представление исходного кода HTML и может быть изменено клиентским JavaScript.

Ниже мы рассмотрим методы в библиотеке jQuery для тестирования некоторых приемов манипулирования DOM. Имейте в виду, что разные браузеры обрабатывают DOM по-своему, но вам не нужно делать ничего особенного, чтобы начать его использовать. Все браузеры используют ту или иную форму модели DOM, чтобы сделать страницы доступными для JavaScript.

Методы манипулирования DOM

DOM можно использовать по-разному. Чтобы проиллюстрировать его гибкость, давайте рассмотрим шесть методов, которые помогут вам начать работу с этим полезным API.

1. Метод До()

Как следует из названия, метод before() используется, когда вы хотите вставить какой-либо элемент перед другим целевым элементом, как указано в коде.

В этом примере этот метод можно использовать для добавления квадратного элемента с текстом над назначенным элементом, например кнопкой, после нажатия на нее:

 $(this).before( "<div class='square'>Еще один квадрат</div>" );

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

2. Метод After()

Точно так же, как метод before() позволяет вставлять элементы перед другим указанным элементом, метод after() допускает обратное. Например, его можно использовать для добавления элемента прямо под кнопкой после выбора кнопки:

 $(this).after( "<div class='square'>Еще один квадрат</div>" );

Добавление интерактивного контента путем манипулирования DOM с помощью jQuery — надежный способ повысить интерактивность без потери скорости процесса.

3. Метод Append()

Вместо того, чтобы создавать отдельные новые элементы, вы можете добавить новый элемент к существующему. Например, может быть, вы хотите добавить текст «С днем рождения!» в цветной области всякий раз, когда нажимается определенная кнопка.

Чтобы добавить новый элемент к существующему содержимому целевого элемента, вы должны вставить команду jQuery append() в исходный код HTML:

 $( ".box" ).append( "<p>С днем рождения!</p>" );

Этот метод добавляет манипуляцию в конец элемента, который вы указываете в строке, а не ставите его перед или после. В контексте полного HTML-документа вы можете увидеть, как происходит манипуляция:

 <!doctype HTML>
 <title>Пример</title>
 <стиль>
 .коробка {
 фон: оранжевый;
 белый цвет;
 белый цвет;
 ширина: 150 пикселей;
 отступ: 20 пикселей;
 поле: 10 пикселей;
 }
 </стиль>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <скрипт>
 $(функция() {
 $("кнопка").click(функция() {
 $(this).after( "<div class='box'>С днем рождения!</div>" );
 });
 });
 </скрипт>
 <button>Создать ящик</button>

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

4. Метод Prepend()

В качестве баланса метода append() prepend() добавит элемент в конец любого целевого элемента, который вы укажете в команде jQuery:

 $( ".banner" ).prepend( "<p>С днем рождения!</p>" );

В этом примере текст «С днем рождения!» появится в начале баннера, указанного в строке кода.

Стоит отметить, что все эти методы (включая before() , after() и append() ) являются приемлемыми подходами для простых применений. Однако мы рекомендуем другие методы для более сложных вставок.

5. Метод Clone()

Далее, метод clone() — довольно мощный вариант с точки зрения манипулирования DOM с помощью jQuery. В то время как предыдущие четыре метода позволяют вставлять элементы и перемещать их, метод clone() позволяет копировать элемент, удалять его с исходного места и повторно вставлять или добавлять в другом месте.

Например, эта строка означает, что исходный элемент box останется на месте, а его клон будет добавлен к элементу треугольника:

 $( ".box" ).clone().appendTo( ".triangle" );

Недостатком этого метода является то, что он может привести к дублированию атрибута id элемента. Эти атрибуты должны быть уникальными. Вы можете избежать этой проблемы, используя атрибуты класса в качестве идентификаторов и экономно применяя метод клонирования.

6. Метод Wrap()

Наконец, метод wrap() полезен, если вы хотите обернуть элемент вокруг существующей строки. Например, вы можете обернуть несколько абзацев новой структурой HTML, указав класс и указав, какая структура реализуется:

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

С помощью этого метода вы создаете <div> вокруг любого элемента, который соответствует целевому классу в строке wrap() . Хотя вы можете создать обтекание глубиной в несколько уровней, вы должны убедиться, что есть только один самый внутренний элемент.

Устранение неполадок с DOM

Когда дело доходит до работы с DOM, мы хотим выделить один ключевой аспект, на который стоит обратить внимание. Чтобы обеспечить быструю загрузку страниц и избежать ненужного кода (особенно если вы разрабатываете тему), вы должны помнить, что не должны использовать какие-либо элементы, которые не являются частью дерева DOM.

Если вы не уверены, является ли элемент частью модели DOM или нет, вы можете проверить каждый из них через браузер в интерфейсе вашего сайта. Вы можете проверять элементы на странице и определять, где они находятся в дереве DOM.

Это особенно полезно, когда другой скрипт изменил исходный HTML-код вашего сайта. В противном случае ваш HTML и DOM могут иногда выглядеть совершенно одинаково.

Изучите другие ресурсы и инструменты WP Engine

Если вы думаете о DOM как об органической части вашего сайта, о живом ресурсе, который реагирует на исходный код HTML, сила его доступности просто поразительна. Вот почему понимание DOM и того, как его можно использовать для улучшения ваших проектов, может помочь вывести ваш сайт на новый уровень.

Управление DOM с помощью jQuery подчеркивает красоту платформы WordPress с открытым исходным кодом. Здесь, в WP Engine, мы понимаем, как высококачественные ресурсы разработчиков могут иметь решающее значение. Вот почему мы предлагаем много помощи пользователям WordPres, а также первоклассные планы хостинга!