Element.classlist

Содержание:

Как добавить класс при наведении мышки javascript
простое кросс-браузерное решение
Methods
More Examples
Стили элемента
- Удаление стилей
- Свойство cssText
Работа с классами через DOM-свойство className
Наследование
Генерация DOM-элемента
Что такое класс?
Что такое классы HTML-элементов?
Не просто синтаксический сахар
Toggle Class
Пример использования
Conclusion
JavaScript-фреймворки и библиотеки
- изменение классов с помощью jQuery:
Итого

Как добавить класс при наведении мышки javascript

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

<red id=»my_id»>Текст будет меняться с помощью добавления класса с помощью javascript при наведении мышки</red>
window.onloadmouseovermouseoutissisz

Сразу весь код вместе:

<red id=»my_id»>Текст будет меняться с помощью добавления класса с помощью javascript при наведении мышки</red>

window.onload = function()

{

my_id.addEventListener(«mouseover», function(iss)

{

iss.target.style.color = «orange»;

});

my_id.addEventListener(«mouseout», function(isz)

{

isz.target.removeAttribute(«style»);

});

}

</script>

простое кросс-браузерное решение

Javascript метод element.queryselectorall()

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

чтобы изменить все классы для элемента:

заменить все существующие классы с одним или несколькими новыми классами задайте атрибут className:

(вы можете использовать пробел, чтобы применить несколько классов.)

добавить дополнительный класс к элементу:

чтобы добавить класс к элементу, не удаляя / не влияя на существующие значения, добавьте пробел и новое имя класса, например:

чтобы удалить класс из элемента:

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

объяснение этого выражения выглядит следующим образом:

на флаг сообщает replace повторить, как требуется, в случае, если имя класса было добавлено несколько раз.

чтобы проверить, если класс уже применяется к элементу:

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

назначение этих действий событиям onclick:

в то время как можно писать JavaScript непосредственно внутри атрибутов событий HTML (например,) это не рекомендуется поведение. Особенно в больших приложениях более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

первым шагом к достижению этого является создание функции и вызов функция в атрибуте onclick, например:

_{(не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и включение JavaScript в отдельный файл может быть более уместным.)}

второй шаг-переместить событие onclick из HTML в JavaScript, например, с помощью addEventListener

(обратите внимание, что окно.выполнение части требуется, чтобы содержимое этой функции выполняются после HTML закончил загрузку-без этого MyElement может не существовать при вызове кода JavaScript, поэтому эта строка завершится ошибкой.)

Methods

Method	Description
add(class1, class2, …)	Adds one or more class names to an element.If the specified class already exist, the class will not be added
contains(class)	Returns a Boolean value, indicating whether an element has the specified class name. The toggle button on css Possible values: true — the element contains the specified class name false — the element does not contain the specified class name
item(index)	Returns the class name with a specified index number from an element. Index starts at 0.Returns null if the index is out of range
remove(class1, class2, …)	Removes one or more class names from an element.Note: Removing a class that does not exist, does NOT throw an error
toggle(class, true\|false)	Toggles between a class name for an element.The first parameter removes the specified class from an element, and returns false. If the class does not exist, it is added to the element, and the return value is true.The optional second parameter is a Boolean value that forces the class to be added or removed, regardless of whether or not it already existed. For example:Remove a class: element.classList.toggle(«classToRemove», false); Add a class: element.classList.toggle(«classToAdd», true);Note: The second parameter is not supported in Internet Explorer or Opera 12 and earlier.

More Examples

Example

Collapse

Add multiple classes to a <div> element:

document.getElementById(«myDIV»).classList.add(«mystyle», «anotherClass», «thirdClass»);

Example

Remove a class from a <div> element:

document.getElementById(«myDIV»).classList.remove(«mystyle»);

Example

Remove multiple classes from a <div> element:

document.getElementById(«myDIV»).classList.remove(«mystyle», «anotherClass», «thirdClass»);

Example

Toggle between two classes for a <div> element:

document.getElementById(«myDIV»).classList.toggle(«newClassName»);

Example

Get the class name(s) of a <div> element:

<div id=»myDIV» class=»mystyle anotherClass thirdClass»>I am a DIV element</div>var x = document.getElementById(«myDIV»).classList;

Example

Find out how many class names a <div> element has:

var x = document.getElementById(«myDIV»).classList.length;

Example

Get the first class name (index 0) of a <div> element:

var x = document.getElementById(«myDIV»).classList.item(0);

Example

Find out if an element has a «mystyle» class:

var x = document.getElementById(«myDIV»).classList.contains(«mystyle»);

Example

Find out if an element has a «mystyle» class. If so, remove another class
name:

var x = document.getElementById(«myDIV»);if (x.classList.contains(«mystyle»)) {
x.classList.remove(«anotherClass»);} else {
alert(«Could not find it.»);}

Example

Toggle between classes to create a dropdown button:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById(«myBtn»).onclick = function() {myFunction()};/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */function myFunction() { document.getElementById(«myDropdown»).classList.toggle(«show»);}

Fallback Example: add

A cross-browser solution when using the classList.add()
method, for IE9 and earlier:

var x, name, arr;x = document.getElementById(«myDIV»);if (x.classList)
{   x.classList.add(«mystyle»);} else {
name = «mystyle»; arr = x.className.split(» «);
if (arr.indexOf(name) == -1) {
x.className += » » + name;  }}

Fallback Example: remove

A cross-browser solution when using the classList.remove()
method, for IE9 and earlier:

var x = document.getElementById(«myDIV»);if (x.classList) {
x.classList.remove(«mystyle»);
} else { x.className = x.className.replace(/\bmystyle\b/g, «»); // For IE9 and earlier}

Fallback Example: contains

A cross-browser solution when using the classList.contains()
method, for IE9 and earlier:

var x = document.getElementById(«myDIV»);if (x.classList) { alert(x.classList.contains(«mystyle»));} else {
alert(/\bmystyle\b/g.test(x.className)); // For IE9 and earlier}

Fallback Example: toggle

A cross-browser solution when using the classList.toggle()
method, for IE9:

var x = document.getElementById(«myDIV»);if (x.classList) {   x.classList.toggle(«mystyle»);} else {
// For IE9 var classes = x.className.split(» «); var i = classes.indexOf(«mystyle»);
if (i >= 0)     classes.splice(i, 1); else     classes.push(«mystyle»);
    x.className = classes.join(» «); }

Example

Create a sticky navigation bar:

// Get the navbarvar navbar = document.getElementById(«navbar»);//
Get the offset position of the navbarvar sticky = navbar.offsetTop;// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.function myFunction() { if (window.pageYOffset
>= sticky) { navbar.classList.add(«sticky») }
else { navbar.classList.remove(«sticky»); }
}

Стили элемента

В DOM у каждого элемента есть свойство , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство :

<div class="square">Квадрат</div>

<script>
var square = document.querySelector('.square');
square.style.width = '170px';
square.style.height = '170px';
square.backgroundColor = 'green';
</script>

Имена свойств объекта обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство для объекта будет указывать как . А, например, CSS-свойство с браузерным префиксом — как .

Удаление стилей

Например, установим некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

document.body.style.backgroundColor = '';

Примеры использования DOM-свойства style для установки стилей элементам.

<p id="introtext" style="font-weigth: bold;">...</p>
<p>...</p>
<p>...</p>

<script>
// установим элементу с id = "introtext" с использованием style красный цвет текста 
document.querySelector('#introtext').style.color = 'red';

// установим всем элементам p на странице с использованием style зелёный цвет текста
var paragraphs = document.querySelectorAll("p");
for (var i = 0, length = paragraphs.length; i < length; i++) { 
  paragraphs.style.backgroundColor = 'green';
}

// выведем в консоль все CSS свойства элемента с идентификатором "introtext"
var styleElem = document.querySelector('#introtext').style;
for (var i = 0, length = styleElem.length; i < length; i++) { 
  console.log(styleElem);
}
</script>

Свойство cssText

Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте .

Пример, в котором установим стили элементам с классом :

<p class="intro">...</p>

<script>
//получим элементы с классом intro
var intro = document.querySelectorAll("intro");

//установим "font-size:40px; color:blue;" всем элементам в коллекции, содержащейся в intro
for (var i = 0, length = intro.length; i < length; i++) {
  intro.style.cssText = "font-size:40px; color:blue;";
}
</script>

При установке стилей с помощью свойства нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута и в соответствующем ему DOM-свойстве.

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

Например:

<p class="info">...</p>

<script>
//получим первый элемент с классом intro
var info = document.querySelector("info");

//установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;"
info.setAttribute('style', 'margin: 10px; padding: 10px; border: 1px solid green;');
</script>

Работа с классами через DOM-свойство className

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут и соответствующее ему DOM-свойство нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

В jQuery для работы с DOM-свойствами используется .

Рассмотрим применения данного метода для управления классами элемента.

<img id="logo" class="img-responsive" src="..." alt= "">

<script>
// получим элемент #logo
var logo = $('#logo');
// получим значение DOM-свойства className
console.log(logo.prop('className'));
// кстати в jQuery к нему можно ещё обращаться, используя class
console.log(logo.prop('class'));
// изменим значение DOM-свойства className
logo.prop('className', 'img-fluid');
// удалим классы у элемента
logo.prop('class','');
// добавим классы "img-logo img-circle" к элементу
logo.prop('className', 'img-logo img-circle');
</script>

Наследование

Синтаксис:

Посмотрим как это выглядит на практике. В примере ниже объявлено два класса: и наследующий от него :

Как видим, в доступны как свои методы, так и (через ) методы родителя.

Это потому, что при наследовании через формируется стандартная цепочка прототипов: методы находятся в , методы – в , и они связаны через :

Как видно из примера выше, методы родителя () можно переопределить в наследнике. При этом для обращения к родительскому методу используют .

С конструктором – немного особая история.

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

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

Например, вызовем конструктор в :

Для такого вызова есть небольшие ограничения:

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

Второе ограничение выглядит несколько странно, поэтому проиллюстрируем его примером:

Генерация DOM-элемента

До этого момента меню «оживляло» уже существующий HTML.

Но далеко не всегда в HTML уже есть готовая разметка. В сложных интерфейсах намного чаще её нет, а есть данные, на основе которых компонент генерирует разметку.

В случае меню, данные – это набор пунктов меню, которые передаются конструктору.

Для генерации DOM добавим меню три метода:

– генерирует корневой DOM-элемент и заголовок меню.
– генерирует DOM для списка опций .
– возвращает DOM-элемент меню, при необходимости запуская генерацию, публичный метод.

Функция генерации корневого элемента с заголовком отделена от генерации списка . Почему – будет видно чуть далее.

Новый способ использования меню:

Код с новыми методами:

Отметим некоторые особенности этого кода.

Обработчики отделяются от реальных действий.

В обработчике мы «ловим» событие и выясняем, что именно произошло. Возможно, нужно проверить , координаты, клавиши-модификаторы, и т.п. Это всё можно делать здесь же.

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

Здесь есть ряд важных плюсов:

Обработчик не «распухает» чрезмерно.
Код гораздо лучше читается.
Метод можно повторно использовать, в том числе и сделать публичным, как в коде выше.

Генерация DOM, по возможности, должна быть «ленивой».

Мы стараемся откладывать работу до момента, когда она реально нужна. Например, когда создаётся, то переменная лишь объявляется. DOM-дерево будет сгенерировано только при вызове функцией .

Более того! Пока меню закрыто – достаточно заголовка. Кроме того, возможно, посетитель вообще никогда не раскроет это меню, так зачем генерировать список раньше времени? А при первом открытии вызовет функцию , которая специально для этого выделена отдельно от .

Фаза инициализации очень чувствительна к производительности, так как обычно в сложном интерфейсе создаётся много всего.

Если изначально подходить к оптимизации на этой фазе «спустя рукава», то потом поправить долгий старт может быть сложно. Тем более, что инициализация – это фундамент, начало работы виджета, её оптимизация в будущем может потребовать сильных изменений кода.

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

В действии:

Результат
menu.js
style.css
index.html

Что такое класс?

Итак, что же такое ? Это не полностью новая языковая сущность, как может показаться на первый взгляд.

Давайте развеем всю магию и посмотрим, что такое класс на самом деле. Это поможет в понимании многих сложных аспектов.

В JavaScript класс – это разновидность функции.

Взгляните:

Вот что на самом деле делает конструкция :

Создаёт функцию с именем , которая становится результатом объявления класса. Код функции берётся из метода (она будет пустой, если такого метода нет).
Сохраняет все методы, такие как , в .

При вызове метода объекта он будет взят из прототипа, как описано в главе F.prototype. Таким образом, объекты имеют доступ к методам класса.

На картинке показан результат объявления :

Можно проверить вышесказанное и при помощи кода:

Что такое классы HTML-элементов?

Класс – это некоторая сущность, которую можно добавить к элементам, а затем использовать её в CSS или JavaScript, например, для выбора этих элементов.

В HTML коде добавление одного или нескольких классов к элементу осуществляется через атрибут .

Пример, в котором HTML-элемент имеет класс :

<div class="container">...</div>

Но добавить к элементу можно не только один, а любое количество классов. Отделение классов друг от друга осуществляется с помощью пробела.

Пример, в котором HTML элемент имеет классы , и :

<a class="btn btn-red btn-large" href="...">...</a>

Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис («-«) и подчеркивание («_»).

<!-- Корректное имя класса -->
<p class="alert-info">...</p>
<!-- Неправильное имя класса, т.к. он не должен начинаться с цифры -->
<p class="9alert">...</p>
<!-- Ошибочное имя класса, т.к. он содержит недопустимый символ -->
<p class="alert?">...</p>

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

<!-- Элемент p, имеющий класс alert -->
<p class="alert">...</p>
<!-- Элемент p, имеющий класс Alert. Но Alert - это не одно и то же, что alert -->
<p class="Alert">...</p>

Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.

Пример использования классов:

<!-- CSS -->
<style>
  .bg__theme {
    background-color: #dcedc8;
  }
  .bg__theme_hover {
    background-color: #ffecb3;
  }
</style>

<!-- HTML -->
<p class="bg__theme">...</p>
<p class="bg__theme">...</p>
<p class="bg__theme">...</p>

<!-- JavaScript -->
<script>
// Сценарий JavaScript с использованием библиотеки jQuery
// при поднесении курсора к элементу .bg__theme к нему добавляется класс bg__theme_hover, а при покидания курсора данный класс удаляется (bg__theme_hover)
$('.bg__theme').hover(
  function () {
    $(this).addClass('bg__theme_hover');
  },
  function () {
    $(this).removeClass('bg__theme_hover');
  }
);
</script>

Не просто синтаксический сахар

Иногда говорят, что – это просто «синтаксический сахар» в JavaScript (синтаксис для улучшения читаемости кода, но не делающий ничего принципиально нового), потому что мы можем сделать всё то же самое без конструкции :

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

Однако есть важные отличия:

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

В отличие от обычных функций, конструктор класса не может быть вызван без :

Кроме того, строковое представление конструктора класса в большинстве движков JavaScript начинается с «class …»
Методы класса являются неперечислимыми.
Определение класса устанавливает флаг в для всех методов в .

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

Также в дополнение к основной, описанной выше, функциональности, синтаксис даёт ряд других интересных возможностей, с которыми мы познакомимся чуть позже.

Toggle Class

Step 1) Add HTML:

Toggle between adding a class name to the div element with id=»myDIV» (in this example we use a button to toggle the class name).

<button onclick=»myFunction()»>Try it</button><div id=»myDIV»>
This is a DIV element.</div>

Step 2) Add CSS:

Add a class name to toggle:

.mystyle { width: 100%; padding:
25px; background-color: coral;
color: white; font-size: 25px;}

Step 3) Add JavaScript:

Get the <div> element with id=»myDIV» and toggle between the «mystyle» class:

function myFunction() { var element = document.getElementById(«myDIV»);
element.classList.toggle(«mystyle»);}

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Добавление класса к элементу (jQuery метод .addClass())</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("p").click(function(){ // задаем функцию при нажатиии на элемент <p>
	   $(this).addClass('transition redColor'); // добавляем элементу <p> по которому произведен клик два класса
	  });
	});
		</script>
	</head>
	<body>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу <p> (абзац) по которому произведён клик.

Результат нашего примера:

Пример добавления класса к элементу (jQuery метод .addClass())

Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Получение индекса и имени класса элемента в наборе.</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){	  
	  $("p").addClass(function(index, currentClass){ // задаем функцию в качестве параметра метода .addClass()
	    var addedClass; // создаем переменную	
	    if (currentClass === "redColor") { // если класс элемента идентичен redColor
             addedClass = "greenColor"; // присваиваем значение переменной (соответствует значению класса)	
             $( "div" ).append("<p>нашёлся с индексом - " + index + "</p>"); // добавляем в элемент <div> информацию о индексе элементов, которые были выбраны
            }
            return addedClass; // возвращаем значение (значение переменной устанавливается в качестве класса элемента)
	  });
	});
		</script>
	</head>
	<body>
		<p>Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p>Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .addClass() мы нашли все элементы <p> (абзац), которые имеют класс «redColor», добавили для этих элементов класс «greenColor» и с использованием метода .append() добавили в элемент <div> информацию о индексе элементов, которые были выбраны.

Результат нашего примера:

Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass().jQuery DOM методы

Conclusion

That’s all folks! In this article, we looked at two important properties ( & ) to manipulate CSS classes in JavaScript.

The property presents the attribute of the element and is supported by all browsers including Internet Explorer. It can be used to add a new class or replace existing classes.

On the other hand, the property returns a live collection of all the classes applied to a DOM element. It can be used to easily add, remove, toggle, and iterate through all the classes.

Read Next: Hide and show DOM elements using a CSS class in JavaScript

️ Like this article? Follow me on

and LinkedIn.
You can also Subscribe to
RSS
Feed.

JavaScript-фреймворки и библиотеки

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

хотя некоторые люди считают излишним добавлять фреймворк ~50 КБ для простого изменения класса, если вы делаете какой-либо значительный объем работы JavaScript или что-либо, что может иметь необычное поведение в кросс-браузере, это стоит рассмотреть.

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

приведенные выше примеры были воспроизведены ниже, используя в jQuery, вероятно, наиболее часто используемая библиотека JavaScript (хотя есть и другие, которые стоит исследовать).

(обратите внимание, что вот объект jQuery.)

изменение классов с помощью jQuery:

кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

Итого

Атрибуты – это то, что написано в HTML.
Свойство – это то, что находится внутри DOM-объекта.

Таблица сравнений для атрибутов и свойств:

Свойства	Атрибуты
Любое значение	Строка
Названия регистрозависимы	Не чувствительны к регистру
Не видны в	Видны в

Синхронизация между атрибутами и свойствами:

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

Нестандартные атрибуты:

Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать .
Атрибуты, название которых начинается с , можно прочитать через . Эта возможность не поддерживается IE10-.

Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.

А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:

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

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