Как удалить атрибут js
Перейти к содержимому

Как удалить атрибут js

  • автор:

Метод removeAttribute

Метод removeAttribute удаляет заданный атрибут у какого-либо тега.

Синтаксис

элемент.removeAttribute(имя атрибута);

Пример

Давайте для элемента удалим атрибут value :

let elem = document.querySelector(‘#elem’); elem.removeAttribute(‘value’);

HTML код станет выглядеть так (исчезнет атрибут value):

Смотрите также

  • метод getAttribute ,
    который получает атрибуты
  • метод setAttribute ,
    который записывает атрибуты
  • метод hasAttribute ,
    который проверяет атрибуты

Element.setAttribute()

Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.

Синтаксис

element.setAttribute(name, value);
  • name — имя атрибута (строка).
  • value — значение атрибута.

Пример

В следующем примере, setAttribute() используется, чтобы установить атрибут disabled кнопки , делая её отключённой.

button>Hello Worldbutton> 
var b = document.querySelector("button"); b.setAttribute("disabled", "disabled"); 

Примечания

При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.

Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.

Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() (en-US) вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой «null» , которая, вероятно, не то, что вы хотите.

Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure(‘value’, val).

Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента , используйте null или пустое значение. Например: elt.setAttribute(‘autoplay’, »)

Методы DOM имеют дело с атрибутами элементов:

Не знают пространства имён, наиболее часто используемые методы Вариант, знающий пространство имён (Уровень DOM 2) Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко) Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко)
setAttribute (DOM 1) setAttributeNS (en-US) setAttributeNode (en-US) setAttributeNodeNS (en-US)
getAttribute (DOM 1) getAttributeNS (en-US) getAttributeNode (en-US) getAttributeNodeNS (en-US)
hasAttribute (DOM 2) hasAttributeNS (en-US)
removeAttribute (DOM 1) removeAttributeNS (en-US) removeAttributeNode (en-US)

Спецификации

Specification
DOM Standard
# ref-for-dom-element-setattribute①

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Удаление атрибута из JSON объекта в JavaScript: метод delete

Для того чтобы удалить излишний атрибут из JSON-объекта, примените оператор delete :

Скопировать код

let jsonObj = ; delete jsonObj.age; // Пока, атрибут "age"! console.log(jsonObj); // Результат:

Атрибут был удален быстро и эффективно.

Удаление атрибутов с динамическими именами

Если имя атрибута неизвестно заранее или хранится в переменной, используйте скобочную нотацию:

Скопировать код

let dynamicKey = "age"; delete jsonObj[dynamicKey]; // Атрибут "age" уничтожен! console.log(jsonObj); // Результат:

Такой подход применяется, когда имена атрибутов не статичны.

Работа с вложенными атрибутами

Чтобы удалить атрибут из вложенного JSON-объекта, также применяйте delete , но на более глубоком уровне:

Скопировать код

let nestedObj = < "user": < "name": "Джейн", "details": < "age": 25, "hobby": "чтение" >> >; delete nestedObj.user.details.age; // Проваливай, "age"! console.log(nestedObj); // Результат: < "user": < "name": "Джейн", "details": < "hobby": "чтение" >> >

Таким образом, мы «подчищаем» структуру данных.

Визуализация

Рассматривайте процесс удаления атрибута из JSON как обрезку дерева:

Скопировать код

Перед обрезкой: �� < "яблоки": 5, "груши": 3, "апельсины": "много" >Процесс обрезки: ✂️ (удалить "груши") После обрезки: ��

Речь идет об удалении избыточных атрибутов в JavaScript:

Скопировать код

delete jsonObject.pears; // "груши" исчезли, как это бывает в реальной жизни.

Убеждайтесь в том, что ваше JSON-дерево преобразовано. ��

Неизменяемые данные и исключения

Несмотря на кажущуюся простоту оператора delete , он может вызывать проблемы при работе с неизменяемыми структурами, например с Object.freeze() :

Скопировать код

const immutableObj = Object.freeze(< "name": "Джейн", "age": 25 >); delete immutableObj.age; // Оу, "age" устойчив. console.log(immutableObj); // Результат:

В таких случаях delete не срабатывает, и неизменяемый объект остается неизменным. Проверяйте изменчивость объектов перед манипулированием с ними.

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

Delete может влиять на производительность в движках JavaScript из-за изменяющихся структур объекта. Для улучшения производительности стоит рассмотреть альтернативы, такие как присвоение атрибутам значения undefined или создание нового объекта без ненужных атрибутов:

Скопировать код

let jsonObj = < "name": "Джейн", "age": 25, "hobby": "чтение" >; // Первый вариант: присвоение "undefined" ненужному атрибуту. jsonObj.age = undefined; // Второй вариант: создание нового объекта без ненужного атрибута. jsonObj = < "name": jsonObj.name, "hobby": jsonObj.hobby >; console.log(jsonObj); // Результат:

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

Полезные материалы

  1. delete – JavaScript | MDN — Официальная документация MDN по оператору delete в JavaScript.
  2. Как удалить свойство из объекта JavaScript? – Stack Overflow — Практическое руководство с примерами удаления свойств.
  3. JavaScript Objects – W3Schools — Информационный учебник по объектам JavaScript, включая методы удаления свойств.
  4. JSON Online Validator and Formatter – JSON Lint — Полезный инструмент для валидации и форматирования JSON.
  5. Описание спецификации ECMAScript® 2019 — Описание спецификации JSON объекта в ECMAScript 2019.
  6. Наиболее эффективный способ выполнения глубокого копирования объекта в JavaScript – Stack Overflow — Статья о клонировании объектов. Полезно при работе со свойствами без их изменения.
  7. Методы примитивов – JavaScript.info — Отличная статья о методах работы с примитивами в JavaScript. Полезна при работе с данными в JSON.

Удалить атрибут class из элемента :

Метод removeAttribute() удаляет указанный атрибут из элемента.

Разница между этим методом и методом removeAttributeNode() заключается в том, что метод removeAttributeNode() удаляет указанный объект Attr, в то время как этот метод удаляет атрибут с указанным именем. Результат будет тот же самый. Также этот метод не имеет возвращаемого значения, в то время как метод removeAttributeNode() возвращает удаленный атрибут в виде объекта Attr.

Совет: Используйте метод getAttribute() для возврата значения атрибута элемента.

Совет: Используйте метод setAttribute() для добавления атрибута к элементу.

Поддержка браузера

Метод
removeAttribute() Да Да Да Да Да

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *