Атрибуты и DOM-свойства
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.
При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Например, если тег выглядит как <body >, то у объекта будет свойство body.id = "page" .
Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.
Свои DOM-свойства
Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.
Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.
Например, создадим в document.body новое свойство и запишем в него объект:
Можно добавить и новую функцию:
Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.
Обратим внимание, пользовательские DOM-свойства:
- Могут иметь любое значение.
- Названия свойств чувствительны к регистру.
- Работают за счёт того, что DOM-узлы являются объектами JavaScript.
Атрибуты
Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.
Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.
Доступ к атрибутам осуществляется при помощи стандартных методов:
- elem.hasAttribute(name) – проверяет наличие атрибута
- elem.getAttribute(name) – получает значение атрибута
- elem.setAttribute(name, value) – устанавливает атрибут
- elem.removeAttribute(name) – удаляет атрибут
Эти методы работают со значением, которое находится в HTML.
Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr.
В отличие от свойств, атрибуты:
- Всегда являются строками.
- Их имя нечувствительно к регистру (ведь это HTML)
- Видны в innerHTML (за исключением старых IE)
Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:
Пример ниже устанавливает атрибуты и демонстрирует их особенности.
При запуске кода выше обратите внимание:
- getAttribute(‘About’) – первая буква имени атрибута About написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.
- Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.
- После добавления атрибута его можно увидеть в innerHTML элемента.
- Коллекция attributes содержит все атрибуты в виде объектов со свойствами name и value .
Когда полезен доступ к атрибутам?
Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.
Например, свойства тега ‘A’ описаны в спецификации DOM: HTMLAnchorElement.
Например, у него есть свойство "href" . Кроме того, он имеет "id" и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement.
Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.
Рассмотрим несколько примеров.
Ссылка «как есть» из атрибута href
Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.
Для примера, посмотрим, что произойдёт с атрибутом "href" при изменении свойства:
Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C, должно быть полной ссылкой.
Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.
Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.
Работа с checked через атрибут и свойство:
Исходное значение value
Изменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.
Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.
Например, при изменении свойства input.value атрибут input.getAttribute(‘value’) не меняется:
То есть, изменение DOM-свойства value на атрибут не влияет, он остаётся таким же.
А вот изменение атрибута обновляет свойство:
Эту особенность можно красиво использовать.
Получается, что атрибут input.getAttribute(‘value’) хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.
Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.
Классы в виде строки: className
Атрибуту "class" соответствует свойство className .
Так как слово "class" является зарезервированным словом в JavaScript, то при проектировании DOM решили, что соответствующее свойство будет называться className .
Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( <label for=". "> ) соответствует свойство с названием htmlFor .
Классы в виде объекта: classList
Атрибут class – уникален. Ему соответствует аж целых два свойства!
Работать с классами как со строкой неудобно. Поэтому, кроме className , в современных браузерах есть свойство classList .
Свойство classList – это объект для работы с классами.
Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку classList.js.
- elem.classList.contains("class") – возвращает true/false , в зависимости от того, есть ли у элемента класс class .
- elem.classList.add/remove("class") – добавляет/удаляет класс class
- elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.
Кроме того, можно перебрать классы через for , так как classList – это псевдо-массив.
Нестандартные атрибуты
У каждого элемента есть некоторый набор стандартных свойств, например для <a> это будут href , name , а для <img> это будут src , alt , и так далее.
Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие – нет.
Для нестандартных атрибутов DOM-свойство не создаётся.
Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.
То есть, если назначить элементу <img> атрибут href , то свойство img.href от этого не появится. Как, впрочем, и если назначить ссылке <a> атрибут alt :
Нестандартные атрибуты иногда используют для CSS.
В примере ниже для показа «состояния заказа» используется атрибут order-state :
Почему именно атрибут? Разве нельзя было сделать классы .order-state-new , .order-state-pending , order-state-canceled ?
Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.
Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:
Для классов – нужно знать, какой класс у заказа сейчас. И тогда мы можем снять старый класс, и поставить новый:
…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.
Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.
Свойство dataset, data-атрибуты
С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.
Как правило, это делается при помощи атрибутов с названиями, начинающимися на data- , например:
Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.
При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset :
Обратим внимание – название data-user-location трансформировалось в dataset.userLocation . Дефис превращается в большую букву.
Полифил для атрибута hidden
Для старых браузеров современные атрибуты иногда нуждаются в полифиле. Как правило, такой полифил включает в себя не только JavaScript, но и CSS.
Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
Если запустить в IE11- пример выше, то <div hidden> будет скрыт, а вот последний div , которому поставили свойство hidden в JavaScript – по-прежнему виден.
Это потому что CSS «не видит» присвоенное свойство, нужно синхронизировать его в атрибут.
Вот так – уже работает:
«Особенности» IE8
Если вам нужна поддержка этих версий IE – есть пара нюансов.
Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
При этом даже тип данных не меняется. Атрибут не становится строкой, как ему положено.
Ещё одна некорректность IE8-: для изменения класса нужно использовать именно свойство className , вызов setAttribute(‘class’, . ) не сработает.
Вывод из этого довольно прост – чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
Итого
- Атрибуты – это то, что написано в HTML.
- Свойство – это то, что находится внутри DOM-объекта.
Таблица сравнений для атрибутов и свойств:
| Свойства | Атрибуты |
|---|---|
| Любое значение | Строка |
| Названия регистрозависимы | Не чувствительны к регистру |
| Не видны в innerHTML | Видны в innerHTML |
Синхронизация между атрибутами и свойствами:
- Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
- Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде checked , selected всегда имеют значение true/false , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например href .
- Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать getAttribute .
- Атрибуты, название которых начинается с data- , можно прочитать через dataset . Эта возможность не поддерживается IE10-.
Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.
А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:
- Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
- Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, <input value=". "> .
- Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция attributes .
Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на data- валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство dataset .
Element: getAttribute() method
The getAttribute() method of the Element interface returns the value of a specified attribute on the element.
If the given attribute does not exist, the value returned will either be null or «» (the empty string); see Non-existing attributes for details.
Syntax
Parameters
- attributeName is the name of the attribute whose value you want to get.
Return value
A string containing the value of attributeName .
Examples
Description
Lower casing
When called on an HTML element in a DOM flagged as an HTML document, getAttribute() lower-cases its argument before proceeding.
Non-existing attributes
All modern web browsers return null when the specified attribute does not exist on the specified element.
Retrieving nonce values
For security reasons, CSP nonces from non-script sources, such as CSS selectors, and .getAttribute(«nonce») calls are hidden.
Instead of retrieving the nonce from the content attribute, use the nonce property:
Работа с атрибутами и свойствами элементов в JavaScript
Атрибуты — это HTML-сущности, с помощью которых мы можем добавить определённые данные к элементам в HTML-коде.
Когда браузер запрашивает некоторую страницу, он получает её исходный HTML-код. После этого он парсит этот код и строит на его основании DOM. Во время этого процесса HTML-атрибуты элементов переводятся в соответствующие DOM-свойства .
Например, браузер, при чтении следующей HTML-строчки кода, создаст для этого элемента следующие DOM-свойства: id , className , src и alt .
Обращение к этим свойствам в коде JavaScript выполняется как к свойствам объекта. Объектом здесь выступает узел (элемент) DOM.
Пример, в котором получим значения DOM-свойств для элемента, приведённого выше, и выведем их значения в консоль:
Некоторые названия DOM-свойств не соответствуют именам атрибутов. Одним из таких является атрибут class . Данному атрибуту соответствует DOM-свойство className . Данное отличие связано с тем, что class является ключевым словом в JavaScript, оно зарезервировано и не может использоваться. Из-за этого разработчики стандарта решили использовать для соответствия какое-то другое название, в качестве которого было выбрано className .
Ещё один нюанс связан с тем, что перевод HTML-атрибутов, заданных в исходном коде документа, в DOM-свойства не всегда осуществляется один к одному.
Если элемент имеет нестандартный HTML-атрибут, то свойство, соответствующее ему в DOM, не создаётся .
Другое отличие связано с тем, что значения определённых HTML-атрибутов и соответствующих им DOM-свойств могут быть различными. Т.е. атрибут может иметь одно значение, а DOM-свойство, созданное на его основе – другое .
Одним из таких атрибутов является checked .
Значение HTML-атрибута checked в данном случае – это пустая строка. Но, свойство, соответствующее данному атрибуту в DOM, будет иметь значение true . Т.к. по правилам стандарта для установления true достаточно лишь упоминание этого атрибута в HTML-коде и при этом не важно какое он будет иметь значение.
При этом даже если мы в HTML-коде не укажем атрибут checked для элемента input с типом checkbox , то для него в DOM всё равно будет создано свойство checked , но оно будет равно false .
Кроме этого, JavaScript позволяет также работать с атрибутами. Для этого в DOM API имеются специальные методы. Но их желательно использовать только тогда, когда вам действительно нужно работать с данными именно так.
При этом нужно знать, что, когда мы изменяем DOM-свойство элемента, изменяется и соответствующий ему атрибут, и наоборот. Но это процесс в браузерах выполнятся не всегда один к одному.
Основные отличия между DOM-свойствами и атрибутами:
- значение атрибута – это всегда строка, а значение DOM-свойства – определённый тип данных (не обязательно строка);
- имя атрибута – регистронезависимо, а DOM-свойства — регистрозависимо. Т.е. в HTML-коде мы можем, например, HTML-атрибут id написать, как Id , ID и т.д. То же касается и имени атрибута, которые мы указываем в специальных методах JavaScript для работы с ним. Но к соответствующему DOM-свойству мы можем обратиться только по id и никак по-другому.
Работа с DOM-свойствами элемента
Работа со свойствами элементов в JavaScript как уже было отмечено выше осуществляется как со свойствами объектов.
Но для того, чтобы обратиться к свойству некоторого элемента, его необходимо сначала получить. Получить DOM-элемент в JavaScript можно, например, с помощью универсального метода querySelector , а коллекцию DOM элементов, например, посредством querySelectorAll .
В качестве первого примера рассмотрим следующий HTML-элемент:
На базе него разберём как осуществляется получение DOM-свойств, их изменение и добавление новых.
Чтение значений DOM-свойств:
Изменение значений DOM-свойств:
Пример, в котором выведем в консоль все значения классов, которые есть у элементов p на странице:
Пример, в котором установим всем элементам с классом content свойство lang со значением «ru»:
Атрибуты элементов и методы для работы с ними
Атрибуты изначально задаются в HTML-коде. Они хоть и связаны, некоторым образом, со свойствами, но это не одно и тоже. В большинстве случаев следует работать именно со свойствами, а к атрибутам обращаться только тогда, когда это действительно нужно.
Значения атрибутов, в отличие от DOM-свойств, как это уже было отмечено выше всегда является строкой.
В JavaScript для выполнения операций, связанных с атрибутами, имеется четыре метода:
- .hasAttribute(‘имя_атрибута’) – проверяет наличие указанного атрибута у элемента. Если проверяемый атрибут есть у элемента, то данный метод возвращает true , в противном случае — false .
- .getAttribute(‘имя_атрибута’) – получает значение атрибута. Если указанного атрибута нет у элемента, то данный метод возвращает пустую строку («») или null .
- .setAttribute(‘имя_атрибута’, ‘значение_атрибута’) – устанавливает указанный атрибут с указанным значением элементу. Если указанный атрибут есть у элемента, то данный метод тогда просто изменит ему значение.
- .removeAttribute(‘имя_атрибута’) — удаляет указанный атрибут у элемента.
Очень интересный пример с атрибутом value .
Пример с атрибутом value
Получим значение атрибута value и DOM-свойства value :
Из этого примера видно, что, при измении атрибута value , браузер автоматически изменяет в соответствии с ним DOM-свойство value .
Теперь давайте проделаем действия, наоборот, а именно изменим значение DOM-свойства и проверим изменится ли значение атрибута:
Из этого примера видно, что не всегда изменение DOM-свойства приводит к соответствующему изменению атрибута. Т.е. в этом случае изменение DOM-свойства value не изменяет соответствующий ему атрибут .
Тоже самое произойдёт, когда пользователь будет вводить текст в это поле. В DOM-свойстве value будет находится действительное значение, а в соответствующем ему атрибуте изначальное или то, которое мы установили, например, с помощью метода setAttribute .
Этот пример показывает, что более корректно работать всегда с DOM-свойствами, а обращаться к атрибуту нужно только тогда, когда это действительно необходимо.
Даже в случае, когда вам нужно получить начальное значение value , которое мы установили в HTML, можно воспользоваться свойством. Свойство, содержащее начальное значение атрибута value называется defaultValue .
Ещё один очень интересный пример, но теперь с атрибутом href.
Пример с атрибутом href
Пример, в котором нам нужно получить значение ссылки так, как оно было установлено в HTML.
В этом примере атрибут href и DOM-свойство href содержат разные значения. В атрибуте href — то, что мы установили в коде, а в DOM-свойстве — полный URL. Это различие продиктовано стандартом, в соответствии с которым браузер должен привести значение href к полному URL.
Поэтому если нам нужно получить то, что находится в атрибуте, то без метода getAttribute в этом случае не обойтись.
В завершении разберём ещё атрибут selected .
Пример с атрибутом selected
Пример, в котором показано как можно получить значение выбранной опции select :
Пример, в котором показано как можно получить выбранные значения опций в элементе select :
Ещё один способ работы с атрибутами (свойство attributes)
В JavaScript у каждого элемента имеется свойство attributes , с помощью которого можно получить все его атрибуты в виде объекта NamedNodeMap .
Данный способ может находить применение, когда вам нужно, например перебрать все атрибуты элемента.
Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item . Отсчёт атрибутов в этой коллекции ведётся с 0.
Например, выведем в консоль все атрибуты некоторого элемента:
Кроме этого, работать с этой коллекцией можно также посредством следующих методов :
- .getNamedItem(‘имя_aтpибyтa’) – получает значение указанного атрибута (если указанный атрибут отсутствует у элемента, то в качестве результата получим null ).
- .setNamedItem(‘aтpибyт_yзeл’) – добавляет новый атрибут к элементу или обновляет значение у существующего. Для создания атрибута необходимо использовать метод document.createAttribute() , которому в качестве параметра необходимо передать имя атрибута. После этого созданному атрибуту необходимо присвоить значение с помощью свойства value .
- .removeNamedItem(‘имя_атрибута’) – удаляет указанный атрибут у элемента (в качестве результата возвращает удалённый атрибут).
Пример, работы с атрибутами через методы getNamedItem, setNamedItem и removeNamedItem:
15 важных JavaScript методов для веб-разработчиков
Как веб-разработчику, вам часто приходится манипулировать DOM’ом — объектной моделью, которая используется браузерами для указания логической структуры веб-страницы и уже основываясь на этой структуре, браузер рендерит HTML элементы на вашем экране.
HTML представляет собой основу DOM структуры. Однако, во многих случаях, вам надо манипулировать ей с помощью JavaScript, обычно это нужно для добавления дополнительного функционала на сайт или других интерактивных плюшек.
В этом посте вы узнаете 15 основных JavaScript методов, которые помогут вам с манипуляцией DOM. Вы вероятно будете часто использовать эти методы в вашем коде и также столкнетесь с ними во многих JavaScript руководствах.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
1. querySelector()
Метод querySelector() возвращает первый элемент, который соответствует одному или более CSS селекторам. Если совпадения не будет, то он вернет null .
Перед тем как был представлен querySelector() , разработчики широко использовали getElementById() метод, который подтягивал элемент с указанным значением id .
Хоть сам по себе getElementById() до сих пор и полезный метод, но с новым querySelector() и querySelectorAll() методами, мы можем спокойно брать любые элементы, основываясь на любом CSS селекторе. Следовательно — у нас появляется больше гибкости.
Синтаксис:
ele — сначала ищет совпадения элементов и если нет, то он выдает null .
selector — один или больше селекторов, такие как “ #fooId ”, “ .fooClassName ”, “ .class1.class2 ” или “ .class1 , .class2 ”
Пример кода:
В этом примере, первый <div> выбирается querySelector() методом и его цвет меняется на красный.
2. querySelectorAll()
В отличие от querySelector() , который возвращает только первый пример всех совпадающих элементов, querySelectorAll() возвращает все элементы, которые подходят под указанный CSS селектор.
Подходящие элементы возвращаются в виде NodeList объекта, который будет пустым в случае того, если не будет найдено совпадений.
Синтаксис
eles — NodeList объект со всеми совпадающими элементами, как свойствами значений. Объект само собой будет пустым, если не будет найдено совпадений.
selector — один или два CSS селектора, такие как “ #fooId ”, “ .fooClassName ”, “ .class1.class2 ” или “ .class1 , .class2 ”
Пример кода:
Пример ниже использует тот же HTML, что и до этого. Однако в этом примере, все параграфы выделены querySelectorAll() и разукрашены в синий цвет.
3. addEventListener()
События отображают то, что случается с HTML элементом, например клик, фокусировка или загрузка — то на что можно реагировать с JavaScript. Мы можем назначить JS функции, чтобы слушать эти события в элементах и соответственно делать какие-либо действия когда это событие происходит.
Есть три способа, с помощью которых вы можете назначить функцию к определенному событию.
Если foo() это кастомная функция, вы можете поставить её, как слушатель события клика, то есть вызвать её тогда, когда кто-то кликнул по кнопке. Вот три способа, как это сделать:
Метод addEventListener() имеет некоторые плюсы. Это последний стандарт, позволяющий назначение более одной функции, как слушателей событий — к тому же он идет вместе с набором довольно полезных опций.
Синтаксис
ele — HTML элемент, который мы будем отслеживать.
evt — целевое событие.
listener — обычно это JavaScript функция.
options — объект с набором булевых значений, перечисленных ниже.
Что если выставить эти значения на true?
capture — останавливает событие, то есть препятствует вызову любого слушателя событий для того же типа события у предков элементов. Чтобы этим воспользоваться, рассмотрите два синтаксиса:
once — слушатель вызывается в первый раз при совершении события, далее он автоматически отделяется от события и больше не будет срабатывать.
passive — дефлотное действие события не может быть остановлено preventDefault() методом.
Пример кода:
В этом примере, мы добавляем слушатель события по клику для <button> .
4. removeEventListener()
Метод removeEventListener() отделяет слушатель события, предварительно добавленного с addEventListener() методом из события, которое он слушает.
Синтаксис
Использует тот же синтаксис, что и вышеупомянутый addEventListener() метод, кроме опции once , которая тут исключена. Эти опции используются, чтобы быть очень точным в идентификации слушателя, который будет устранен.
Пример кода
На примере кода для addEventListener() , мы удалим слушатель события по клику по имени foo из элемента <button> .
5. createElement()
Метод createElement() создаёт HTML элемент, используя имя HTML тега, такое как ‘ p ’ или ‘ div ’.
Вы позже можете добавить этот элемент на веб-страницу, используя разные методы вставки в DOM, такие как AppendChild() и т.п, про них вы узнаете дальше в статье.
Синтаксис
tagName — имя HTML тега, который вы хотите создать.
Пример кода:
В следующем примере, вы можете создать новый параграф:
6. appendChild()
Метод appendChild() добавляет элемент, как последний потомок HTML элементу, который включен в этот метод.
Потомок может быть вставлен как заново созданный элемент или как уже существующий. В последнем случае, он будет перемещен со своей предыдущей позиции на позицию последнего потомка.
Синтаксис
ele — HTML элемент которому будет добавлен childEle как последний потомок.
childEle — HTML элемент который будет добавлен как последний потомок ele .
Пример кода:
В этом примере, мы вставим <strong> элемент, как потомка <div> элемента, используя appendChild() и вышеупомянутый createElement() .
7. removeChild()
Метод removeChild() удаляет указанный элемент потомок из HTML элемента, который вызывает этот метод.
Синтаксис
ele — родительский элемент childEle .
childEle — потомок ele .
Пример кода:
В этом примере, мы удалим <strong> элемент, который мы добавили как потомка тегу <div> в предыдущем примере.
8. replaceChild()
Метод replaceChild() заменяет элемент потомок другим элементом, принадлежащим родительскому элементу, который вызывает этот метод.
Синтаксис
ele — родительский элемент, потомки которого будут поменяны местами.
newChildEle — элемент потомок ele , который заменит oldChildEle .
oldChildEle — элемент потомок ele , которым будет заменен newChildEle .
Пример кода:
В этом примере, элемент потомок <strong> принадлежит родителю <div> и заменяется заново созданным тегом <em> .
9. cloneNode()
Когда вы создаете новый элемент, которому нужно быть таким же, как и уже созданному элементу на странице, вы можете просто создать его копию используя метод cloneNode() .
Синтаксис
var dupeEle = ele.cloneNode([deep])
dupeEle — копия ele элемента.
ele — HTML элемент, который скопируют.
deep — Булево значение. Если оно выставлено на true , то dupeEle будет с теми же потомками, что и ele , а если же стоит false , то оно будет клонировано без потомков.
Пример кода:
В этом примере мы создадим копию элемента <strong> с cloneNode() , а затем мы добавим его тегу <div> , как элемент потомок с помощью упомянутого выше метода appendChild() .
Как результат, <div> будет состоять из двух <strong> элементов, оба из которых будут с текстом hello .
10. insertBefore()
Метод insertBefore() добавляет указанный элемент потомок перед другим элементом потомком. Этот метод вызывается родительским элементом.
Если упомянутого потомка не существует или вы передали null , потомок, который должен быть добавлен, будет добавлен, как последний потомок родителя, схоже с appendChild() .
Синтаксис
ele — родительский элемент.
newEle — новый HTML элемент, который вставится.
refEle — элемент потомок ele, перед которым будет вставлен newEle .
Пример кода:
В этом примере, мы создали новый <em> элемент с новым текстом внутри и добавили его перед элементом <strong> внутри родительского элемента <div> .
11. createDocumentFragment()
Метод createDocumentFragment() может быть и не хорошо известен другим, как все из этого списка, однако он не менее важен, особенно если вам надо вставить несколько элементов разом, как например добавить несколько строк в таблицу.
Метод создает объект DocumentFragment , который по сути является узлом DOM, который не является частью DOM древа. Это будто бы буфер, в который мы можем класть другие элементы, перед тем как добавлять их в желаемый узел DOM’а.
Но почему бы нам просто не добавить элементы напрямую? Потому что вставка в DOM влечет за собой изменение шаблона и это сам по себе тяжелый процесс для браузера, так как вставка нескольких последовательных элементов повлечет за собой еще больше изменений в шаблоне.
С другой стороны, добавление элементов в DocumentFragment объект не вызывает каких-либо изменений в шаблоне, так что вы можете добавлять в него столько элементов, сколько захотите перед тем как передать их DOM древу, вызывая смену шаблона только в нужный момент.
Синтаксис
Пример кода:
В этом примере мы создадим несколько строк таблиц и ячеек с помощью createElement() , затем добавим их объекту DocumentFragment и под конец добавим этот элемент HTML таблице, используя метод appendChild() .
Как результат, пять строк для каждой из них будут содержать одну ячейку с числом от одного до 5, в виде контента.
12. getComputedStyle()
Иногда вам надо проверить значения CSS свойств каждого элемента перед внесением изменений. Вы можете использовать свойство ele.style для этого, однако getComputedStyle() метод был сделан конкретно для этой цели, он возвращает read-only вычисленные значения всех CSS свойств указанного HTML элемента.
Синтаксис
style — CSSStyleDeclaration объект возвращаемый этим методом. Он содержит все CSS свойства и их значения для элемента ele .
ele — это HTML элемент, CSS значения которого будут подтянуты.
pseudoEle — (опциональный параметр) это строка, которая представляет собой псевдоэлемент. Если он упомянут, то CSS свойства указанного псеводоэлемента ассоциированные с ele будут возвращены.
Пример кода:
В этом примере, мы получаем и показываем вычисленное свойство width элемента <div> , используя метод getComputedStyle() .
13. setAttribute()
Метод setAttribute() добавляет новый атрибут HTML элементу, так и меняет его значение для уже существующих.
Синтаксис
ele — это HTML элемент, к которому будет добавлен атрибут или чей атрибут будет изменен.
name — имя атрибута
value — значение атрибута
Пример кода:
В этом примере мы добавим атрибут contenteditable для <div> , используя setAttribute() , который сделает этот контент редактируемым.
14. getAttribute()
Метод getAttribute() возвращает значение указанного атрибута, принадлежащего к определенному HTML элементу.
Синтаксис
ele — HTML элемент, чей атрибут запрашивается.
name — имя атрибута.
Пример кода:
В этом примере, мы показываем значение атрибута contenteditable , принадлежащего элементу <div> с помощью метода getAttribute()
15. removeAttribute()
Метод removeAttribute() удаляет заданное значение конкретного элемента HTML.
Синтаксис
ele — HTML элемент чей атрибут будет удален.
name — имя атрибута.
Пример кода:
В этом примере мы удаляем contenteditable атрибут из элемента <div> . Как результат, <div> больше не будет редактируемым.