Атрибут и свойство элемента DOM легко смешиваться вместе и нельзя различить. Эти две вещи, но они тесно связаны. Многие новые друзья, включая меня в прошлом, часто этого не понимают.
Атрибут переведен в китайский термин «характеристики», а свойство переводится в китайский термин «атрибут». Из буквального значения китайца действительно есть небольшая разница. Давайте сначала поговорим об атрибуте.
Атрибут является узлом функции. Каждый элемент DOM имеет соответствующий атрибут атрибута атрибутов для хранения всех узлов атрибутов. Атрибуты - это контейнер из класса массива. Чтобы быть точным, это Namenodemap. Короче говоря, это контейнер, похожий на массив, но не совсем такой же, как массив. Каждый числовой индекс атрибутов хранит узел атрибута в форме пары значений имен (name = ”value»).
Скопируйте код следующим образом: <div id = "box" gameid = "880"> Привет </div>
HTML -код приведенного выше элемента DIV включает в себя класс, ID и пользовательский GameID. Эти функции хранятся в атрибутах, аналогично следующей форме:
Скопируйте код следующим образом: [, id = "box", gameid = "880"]
Вы можете получить доступ к узлу атрибута так:
Кода -копия выглядит следующим образом:
var elem = document.getElementbyId ('box');
console.log (elem.attributes [0] .name); // сорт
console.log (elem.attributes [0] .value); // коробка
Тем не менее, IE6-7 хранит много вещей в атрибутах, и приведенный выше метод доступа отличается от результатов возврата стандартного браузера. Обычно вам нужно получить узел атрибута и напрямую использовать метод getAttribute:
Скопировать код следующим образом: console.log (elem.getattribute ('gameid')); // 880
Чтобы установить узел атрибута для использования метода SetAtTribute, используйте RemoeAttribute для удаления:
Кода -код следующим образом: elem.setattribute ('testattr', 'testval');
console.log (elem.removeattribute ('gameid')); // неопределенный
Атрибуты будут динамически обновлены при добавлении или удалении атрибутов.
Собственность - это недвижимость. Если элемент DOM рассматривается как обычный объект объекта, свойство является свойством, хранящимся в объекте в форме пары имен-значения (name = ”value»). Это намного проще добавлять и удалять свойства, и это ничем не отличается от обычных объектов:
Кода -копия выглядит следующим образом:
elem.gameid = 880; // Добавлять
Console.log (elem.gameid) // get
Удалить elem.gameid // delete
Причина, по которой атрибут и свойства легко смешиваются вместе, заключается в том, что многие узлы атрибутов имеют соответствующий атрибут свойства, такие как идентификатор и класс элемента Div, выше, являются как атрибутами, так и соответствующими свойствами, которые можно получить и изменить, независимо от того, какой метод используется.
Кода -копия выглядит следующим образом:
console.log (elem.getattribute ('id')); // коробка
console.log (elem.id); // коробка
elem.id = 'hello';
console.log (elem.getattribute ('id')); // привет
Но для пользовательских узлов атрибутов или пользовательских свойств оба не имеют ничего общего друг с другом.
Кода -копия выглядит следующим образом:
console.log (elem.getattribute ('gameid')); // 880
console.log (elem.gameid); // неопределенный
elem.areaid = '900';
console.log (elem.getattribute ('areaid')) // null
Для IE6-7 нет различий между атрибутом и свойством:
Кода -копия выглядит следующим образом:
console.log (elem.getattribute ('gameid')); // 880
console.log (elem.gameid); // 880
elem.areaid = '900';
console.log (elem.getattribute ('areaid')) // 900
Многие новички, вероятно, легко попадают в эту яму.
Некоторые общие узлы атрибутов элементов DOM имеют соответствующие атрибуты свойства. Что более особенное, так это некоторые свойства со значением логического типа, например, некоторые элементы формы:
Кода -копия выглядит следующим образом:
<input type = "radio" проверено = "проверено" id = "raido">
var radio = document.getElementbyid ('radio');
console.log (radio.getattribute ('cherced')); // проверено
console.log (radio.cecked); // истинный
Для этих специальных узлов атрибутов, только если этот узел существует, соответствующее значение свойства верно, например:
Кода -копия выглядит следующим образом:
<input type = "radio" проверено = "что угодно" id = "raido">
var radio = document.getElementbyid ('radio');
console.log (radio.getattribute ('cherced')); // что-либо
console.log (radio.cecked); // истинный
Наконец, чтобы лучше различать атрибут и свойства, можно в основном суммировать, что узлы атрибутов видны в HTML-коде, а свойство является просто обычным атрибутом пары имен.
Кода -копия выглядит следующим образом:
// как GameID, так и ID являются узлами атрибутов
// ID также можно получить доступ и модифицировать через свойство
<div GameId = "880" id = "box"> hello </div>
// reainid - это просто собственность
elem.reaid = 900;