Изменения в DOM
Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы createElement() и createTextNode() , а также node.textContent и node.innerHTML .
Создание новых узлов
В этом разделе работаем со следующим HTML:
Открываем вкладку Console в панели разработчика.
Воспользуемся методом createElement() в объекте document для создания нового элемента p .
Успешно! Переменная paragraph выдает p элемент.
Теперь можно добавить текст к нашему элементу со свойством textContent :
Таким образом, комбинируя createElement() и textContent , можно создавать узлы-элементы.
Также можно использовать свойство innerHTML , чтобы добавлять содержимое внутрь элемента:
Из двух рассмотренных методов textContent лучше — он немного быстрее, чем innerHTML .
Текстовый узел можно создать также с помощью метода createTextNode() :
Все эти методы создают новые элементы и текстовые узлы, однако они не видны на интерфейсе веб-сайта, пока не вставлены в document !
Вставка узлов в DOM
Чтобы увидеть созданные нами текстовые узлы и элементы на интерфейсе, нужно вставить их в document . Методы appendChild() и insertBefore() используются для добавления элементов в начало, середину или конец родительского элемента, а replaceChild() используется для замены старого узла на новый.
Продемонстрируем это, добавив список к нашему HTML:
Вот наша страница:
Скажем, мы хотим добавить новый пункт в конец списка. Сперва нам нужно создать элемент и добавить к нему текст, как мы делали раньше:
Теперь у нас есть элемент для нового списка! Добавляем его в конец списка, используя appendChild() :
И новый элемент li добавлен в конец ul :
Чтобы добавить пункт в начало списка, создадим другой элемент (мы должны создать новый элемент, потому что createElement() нельзя использовать повторно):
Используем метод insertBefore() , чтобы добавить элемент в начало списка. В нем будет два аргумента: первый будет новым добавленным дочерним узлом, а второй — соседним узлом, следующим сразу за дочерним.
Так мы добавим новый элемент anotherNewItem в начало списка:
Теперь новый узел добавлен в начало списка!
Давайте теперь посмотрим, как можно заменить существующий узел новым, используя replaceChild() . Во-первых, создаем новый элемент:
Метод replaceChild() также содержит два аргумента: новый узел и узел, который нужно заменить:
В нашем примере заменяем третий дочерний элемент списка:
Используя комбинацию методов appendChild() , insertBefore() и replaceChild() узлы и элементы можно вставлять в DOM где угодно!
Удаление узлов из DOM
Для удаления узлов из DOM используем removeChild() (чтобы удалить дочерние узлы), или remove() , чтобы удалить сам узел.
Возвращаясь к нашему примеру, давайте удалим последний пункт списка:
В качестве альтернативы можно использовать remove() , чтобы удалить сам узел:
Используя removeChild() и remove() , можно удалить любые узлы из DOM.
Изменение атрибутов
Атрибуты часто используются в HTML для предоставления дополнительной информации об элементе. Некоторые распространенные примеры: атрибут src тега img , href тега a , а также class , id и style . Встречаются атрибуты, начинающиеся с data- — это пользовательские атрибуты, которые тоже можно изменять.
Вот методы, которые используются в JavaScript для изменения атрибутов:
hasAttribute() — возвращает булев тип.
getAttribute() — возвращает значение определенного атрибута.
setAttribute() — добавляет или обновляет значение определенного атрибута.
removeAttribute() — удаляет атрибут из элемента.
В качестве примера используем данный HTML:
Откроем console и протестируем методы атрибутов:
Давайте используем setAttribute() , чтобы назначить новое изображение src :
Методы hasAttribute() and getAttribute() часто используются с условными операторами, в то время как setAttribute() и removeAttribute() чаще используются для изменения DOM напрямую.
Изменение классов
В работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как можно работать с атрибутом класса в JavaScript, используя className и classList .
className — получает или задает значение класса.
classList.add() —добавляет значения классов.
classList.toggle() — отобразить/скрыть класс.
classList.contains() — проверяет, существует ли определенное значение.
classList.replace() — заменяет старое значение на новое.
classList.remove() — удаляет значение.
В следующем примере поработаем с каждым из этих методов:
Начальный выводимый результат:
Используем className , чтобы применить значение к классам:
Теперь класс alert , определенный в HTML, назначен первому div :
Это изменит любые существующие классы элемента. Можно добавлять несколько классов, используя className , если разделять имена классов пробелами.
Другой способ изменять классы — использование свойства classList , у которого есть несколько полезных методов:
После запуска всех этих методов, наш HTML отобразится так:
Пометка: classList.add() добавит новый класс к списку существующих (помните, что className изменяет любые существующие классы). Также можно добавлять несколько классов строками, разделенными запятыми.
Изменение стилей
Обычно стили добавляются при помощи отдельных CSS таблиц, однако бывают случаи, когда может понадобиться использовать встроенный стиль. Полезно будет знать, как изменять его непосредственно с помощью JavaScript! Продемонстрируем с помощью следующего HTML:
При работе со свойствами CSS в DOM мы используем camelCase (верблюжий регистр). Таким образом, вместо использования тире, как в CSS, например, border-radius , мы используем camelCase borderRadius , где первое слово начинается со строчной буквы, а второе с заглавной.
Пометка: можно использовать setAttribute() для изменения стилей, например, div.setAttribute('style', 'border-radius: 50%'); , но это удалит все существующие встроенные стили, поэтому лучше использовать непосредственно атрибут style .
Вывод после добавления этих стилей:
Конечно, если нужно применить несколько изменений стиля элемента, лучше применить их к классу в CSS и просто добавить этот новый класс к элементу, используя JavaScript ��.
Заключение
Вот и все!! ������ Мы поработали с деревом DOM и узлами, чтобы изучить все о доступе, прохождении и изменении элементов. Если вы прочитали все части — прекрасно! Теперь вы на пути к улучшению знаний о DOM!
Как удалить элемент из списка js
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
Как удалить элементы из списка?
Коллеги, а поделитесь кто как предпочитает реализовать удаление из списка? Поясню на примере:
Требуется, чтобы по нажатию кнопки «удалить» на сервер уходил POST-запрос с необходимыми параметрами: соответствующий action для формы, ID удаляемой записи (той, напротив которой кнопка) и т. п. Варианты решения:
- Делать форму вокруг каждой кнопки
- Дать имя и значение каждой кнопке «удалить»
- Сделать скрытую форму где-нибудь вне списка, заполнять атрибуты через JS и вызывать submit()
- Формировать POST аяксом
- Вопрос задан более трёх лет назад
- 5443 просмотра
- Вконтакте
- Вконтакте
- Вконтакте
Мой вариант (jquery для читабельности):
Я не яваскпритист — понимаю что джедаи все сделали бы сильно круче, но если бы мне в своем бложике приспичило бы — как-нибудь так и сделал бы (хотя над аяксом лучше бы сделать обертку, чтобы руками каждый раз ошибки не обрабатывать и т.д.). Еще наверное бы сделал вместо button ссылку (вид кнопки ей можно стилями придать), в href которой был бы урл на страницу удаления для юзеров без яваскрипта.
Списки
Удалить count элементов, начиная с i-того можно вызовом lst.splice(i, count). Эта же функция при вызове lst.splice(i, 0, it) вставляет элемент it на место индекса i (после lst[i-1]). Функция lst.reverse() обращает последовательность элементов списка. Ниже, справа от кода скрипта приведен результат вызова document.write(res); и тег <br> в html означает переход к следующей строке:
Класс List
Перейдём теперь к созданию класса List, который будет оперировать со списками. Зададим список при помощи набора структур вида , где nm — имя узла (может хранить любые данные), prv — указатель на предыдущий и nxt — на следующий узел. Если узлы не имеют указателя prv — то это односторонний (правосторонний) список List, иначе список двухсторонний и он реализован классом List2. Односторонний список чуть быстрее двухстороннего, однако, он заметно медленнее при удалении из конца (pop). Если используется эта функция, необходим List2.
Класс списка так же хранит указатели на первый — beg и последний — end его узел. Существует несколько способов интерпретации этих указателей. Мы подробнее рассмотрим более быстрый вариант, когда beg и end — это фиктивные узлы, а реальные находятся между ними.
Определим функцию, которая будет конструктором класса List: Функция List будет вызвана при объявлении объекта (экземпляра класса List) при помощи оператора new когда мы напишем: var lst = new List(); Теперь объект lst будет хранить данные списка, доступ к которым производится через точку: (lst.length и т.д.). Такие данные будет помнить каждый экземпляр класса (и у каждого они будут иметь свои значения). Выше подобным образом объявлены 3 переменные-свойства класса (end, beg и length).
В конструкторе класса List введен фиктивный указатель end, следующий за последним элементом списка. Фиктивный указатель beg через свойство beg.nxt ссылается на первый элемент списка. Так как список пока пустой, beg.nxt ссылается на end. Функцию (метод класса) push мы определим ниже.
Отметим, что поля nm и nxt инициализированы нулевым указателем null (напомним, что между undefined и null существует заметная разница). Фиктивный указатель end, при вставке в конец списка, будет превращаться в реальный последний узел. Поэтому, таким объявлением, мы предлагаем движку JavaScript сразу выделить память под объект с соответствующими полями, чтобы не пересоздавать его потом (при вставке). Это ускоряет работу с объектами (иногда в разы).
Методы класса
Кроме хранения данных, список должен выполнять определённые действия (иметь методы). Напишем, например, функцию, которая выводит список как строку в круглых скобках: Конструкция (условие? значение_если_истина : значение_если_ложь), являющаяся компактной записью условного оператора if, служит для «ликвидации» запятой после последнего узла в списке.
Функция с именем toString может быть в любом классе. Если она определена, то экземпляр класса, когда этого требует соответствующий контекст, преобразуется в строку. Например, следующий скрипт: так как список пока пустой, выведет строку: . Функция toString есть и у массивов, поэтому их элементы можно выводить аналогичным образом.
Вставка элементов
Напишем теперь функцию, вставляющую элемент с именем nm в начало списка: Так как мы хотим, чтобы список был похож на массив, при добавлении увеличивается переменная length (число элементов в списке). Затем (читая справа-налево) создаётся новый элемент-узел, который по указателю nxt ссылается на прежний первый элемент списка beg.nxt, а фиктивный узел beg по beg.nxt начинает ссылается на вновь добавленный узел. Аналогично выглядит функция, вставляющая элемент в конец списка: Последнюю строку также необходимо читать справа-налево: сначала создаётся новый фиктивный последний узел, на который по указателю end.nxt ссылается реальный последний узел (которым становится «старый» фиктивный). Затем указатель на новый фиктивный сохраняется в this.end.
Графически, последовательная вставка 0, 1, 2 в начало и конец списка выглядит следующим образом: (первые картинки в каждой строке изображают пустые списки):
Удаление элементов
Обсудим алгоритмы удаления элементов из списка. Удаление в правосторонних списках (есть только ссылки nxt) из начала не представляет труда: Отметим одну тонкость. Возвращаемый функцией указатель на имя первого узла nm остаётся в фиктивном узле nm, даже, если вызывающей функцию shift программе он уже не нужен. При необходимости (если данные, хранимые в списке занимают много памяти) его можно освободить, написав lst.beg.nm=null.
Удаление из конца одностороннего списка, существенно более затратная операция, так как необходимо получить последний элемент (реальный) о котором указатель end ничего не знает: При частом выполнении этой операции, лучше использовать класс двунаправленного списка List2, в котором фиктивный финальный узел end (как и остальные узлы) хранит указатель на предыдущий элемент end.prv.
Ещё немного функций
Приведём несколько функций класса List, эффективность которых не столь высока, по сравнению с вставкой в начало или конец списка. Так, получение узла под номером pos (начиная с нуля) выглядит следующим образом:
Упорядоченная вставка
Добавим ещё функцию, которая вставляет элемент в начало списка, но при этом следит за упорядоченностью элементов: Предполагается, что в общем случае имя узла nm не является числом или строкой, поэтому в цикле используется функция сравнения lt(a, b), которая должна возвращать true, если a < b, иначе (больше или равны) — false. Она задаётся извне (хотя по умолчанию она определена так, как в закомментированной строке):
Нефиктивные указатели
Рассмотрим кратко ещё один способ работы со списком, когда указатели beg и end реально ссылаются на первый и последний элементы списка (напрямую, а не через поле nxt). Оформим его в виде класса List1 Для удобства рядом с функциями-методами этого класса повторим аналогичные функции класса List. Добавление в начало списка имеет вид:
Двухсторонние списки
Элементы (узлы) двухcторонних списков хранят в себе указатели, как на следующий элемент (nxt), так и на предыдущий (prv): Они реализованы классом List2, конструктор которого выглядит так: Функции добавления в начало и конец реализованы следующим образом:
Тестирование быстродействия
Ниже тестируется вставка в начало и конец списка, реализованного массивом (медленный unshift) и правосторонними (List, List1) и двухсторонним списком (List2). Как организовать процесс тестирования описано в документе Speed.
добавлений раз: (ms) ( цикл: )
| push | unshift | |||
|---|---|---|---|---|
| Array | 13 | 9088 | Обычный массив JavaScript | |
| List | 25 | 15 | Односторонний список List | |
| List2 | 30 | 25 | Двухсторонний список List2 | |
| List0 | 47 | 34 | Односторонний список List без инициализаций null | |
| List1 | 49 | 33 | Односторонний список List с «нефиктивными» beg и end |
Ещё один тест связан с последовательной вставкой всех элементов в конец, а затем их удалением из конца и начала списка:
добавлений раз: (ms) ( цикл: )
| push,pop | push,shift | |||
|---|---|---|---|---|
| Array | 19 | 147 | Обычный массив JavaScript | |
| List | 10693 | 13 | Односторонний список List | |
| List2 | 22 | 30 | Двухсторонний список List2 |
Общий вывод такой: для операций push, unshift и shift, которые активно используются в алгоритмах поиска в ширину или глубину, стоит использовать класс List. Однако, если необходимо часто удалять элементы из конца списка pop, то List лучше не использовать.
Работа со списками
Подытожим. Методы работы со списками полностью аналогичны методам работы с массивами: