В этом руководстве вы узнаете, как использовать в JavaScript методыhasAttribute(), getAttribute(), removeAttribute().
Метод hasAttribute()
Чтобы проверить, имеет ли элемент указанный атрибут или нет, используйте метод hasAttribute() :
let result = element.hasAttribute(name);
Параметры
Метод hasAttribute() принимает аргумент, указывающий имя атрибута, который вы хотите проверить.
Возвращаемое значение
hasAttribute() возвращает логическое значение, указывающее, имеет ли элемент указанный атрибут.
Если элемент содержит атрибут, hasAttribute() возвращает значение true, в противном случае возвращается false.
Пример
См. следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS hasAttribute() Demo</title>
</head>
<body>
<button id="btnSend" disabled>Send</button>
<script>
let btn = document.querySelector('#btnSend');
if (btn) {
let disabled = btn.hasAttribute('disabled');
console.log(disabled);
}
</script>
</body>
</html>Выход:
true
Как это работает:
- Выберите кнопку с идентификатором btnSend с помощью метода querySelector
querySelector(). - Проверьте, имеет ли кнопка отключенный атрибут, вызвав метод
hasAttribute()для элемента кнопки.
Метод getAttribute()
Чтобы получить значение атрибута указанного элемента, вы вызываете метод getAttribute() элемента:
let value = element.getAttribute(name);
getAttribute() принимает аргумент, который является именем атрибута, из которого вы хотите вернуть значение.
Если атрибут существует в элементе, функция возвращает строку, представляющую значение атрибута. Если атрибут не существует, getAttribute() возвращает null.
Обратите внимание, что вы можете использовать метод hasAttribute(), чтобы проверить, существует ли атрибут в элементе, прежде чем получить его значение.
Пример
Рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS getAttribute() Demo</title>
</head>
<body>
<a href="https://www.javascripttutorial.net"
target="_blank"
id="js">JavaScript Tutorial
</a>
<script>
let link = document.querySelector('#js');
if (link) {
let target = link.getAttribute('target');
console.log(target);
}
</script>
</body>
</html>Выход
_blank
Как это работает:
- Сначала выберите элемент ссылки с идентификатором
jsс помощью методаquerySelector(). - Во-вторых, получите целевой атрибут ссылки, вызвав
getAttribute()выбранного элемента ссылки. - В-третьих, покажите значение цели в окне консоли.
В следующем примере метод getAttribute() используется для получения значения атрибута title элемента ссылки с идентификатором js :
let link = document.querySelector('#js');
if(link) {
let title = link.getAttribute('title');
console.log(title);
}
Выход:
null
Метод removeAttribute()
removeAttribute() удаляет атрибут с указанным именем из элемента:
element.removeAttribute(name);
Параметры и возвращаемое значение
removeAttribute() принимает аргумент, который является именем атрибута, который вы хотите удалить. Если атрибут не существует, функция не вызовет ошибку.
removeAttribute() возвращает значение undefined.
Примечания по использованию
Элементы HTML имеют некоторые атрибуты, которые являются логическими атрибутами. Чтобы установить значение false для логических атрибутов, вы не можете просто использовать метод setAttribute(), но вы должны полностью удалить атрибут с помощью метода removeAttribute().
Например, значения disabled атрибутов true в следующих случаях:
<button disabled>Save Draft</button> <button disabled="">Save</button> <button disabled="disabled">Cancel</button>
Точно так же значения следующих атрибутов только для readonly равны true :
<input type="text" readonly> <textarea type="text" readonly=""> <textarea type="text" readonly="readonly">
Пример
В следующем примере используется removeAttribute() для удаления target атрибута из элемента ссылки с идентификатором js :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS removeAttribute() Demo</title>
</head>
<body>
<a href="https://www.javascripttutorial.net"
target="_blank"
id="js">JavaScript Tutorial</a>
<script>
let link = document.querySelector('#js');
if (link) {
link.removeAttribute('target');
}
</script>
</body>
</html>Как это работает:
- Выберите элемент ссылки с идентификатором
jsс помощью методаquerySelector(). - Удалите
targetатрибут, вызвавremoveAttribute()для выбранного элемента ссылки.
Заключение
- Используйте метод
hasAttribute(), чтобы проверить, содержит ли элемент указанный атрибут. - Получите значение атрибута указанного элемента, вызвав метод
getAttribute()для элемента. getAttribute()возвращает null, если атрибут не существует.- Используйте
removeAttribute()для удаления атрибута из указанного элемента. - Установка значения логического атрибута в
falseне будет работать; вместо этого используйтеremoveAttribute().