В чем разница между свойствами и атрибутами в HTML?

Опубликовано: 26 Декабря, 2021

HTML - это стандартный язык для создания документов, предназначенных для отображения в веб-браузерах. Очень часто можно запутаться с атрибутами и свойствами при выполнении манипуляций с объектом DOM в JavaScript. Прежде чем узнать о различиях, давайте сначала определим объектную модель документа.

DOM: это аббревиатура объектной модели документа. Когда браузер анализирует ваш HTML-код, он создает соответствующий узел DOM. Доступ к свойствам HTML осуществляется из этого объекта узла.

Проще говоря, DOM - это API для HTML, и мы используем такие языки, как JavaScript или фреймворки, такие как React, Vue.js, для доступа и управления HTML с помощью соответствующих объектов DOM.

Примечания:

Некоторые свойства DOM не имеют соответствующих атрибутов.
Некоторые атрибуты HTML не обладают соответствующими свойствами.
Некоторые атрибуты HTML, такие как «класс», имеют сопоставление свойствам 1: 1.

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

Пример. Рассмотрим следующий фрагмент кода HTML.

html

 <!DOCTYPE html>
 < html >
 < body >
    < input id = "input" type = "number"
            value = "Phone Number:" > 
    < p id = "display" ></ p > 
    < script >
        var element = document.getElementById("input");
        // Getting the property, returns "Phone Number:"
        window.alert(element.getAttribute("value"));
        element.value = 1234;
        var x = element.value;
        // Getting the attribute, returns "1234"
        document.getElementById("display").innerHTML
            = "Value Attribute: " + x;
    </ script >
 </ body >
 </ html > 

Выход:

Теперь давайте предположим, что пользователь вводит «1234», тогда element.getAttribute («value») вернет «Phone Number:», потому что мы предоставили это как начальное значение этого атрибута. Но element.value вернет «1234».

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

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

Атрибут: атрибуты определяются HTML и используются для настройки тега.

Результатом будет 2, потому что это два атрибута: id = "AttributeDemo" и onclick = "myFunction ()".

Примечание . Фрагмент кода document.getElementsById ('AttributeDemo'). Attributes возвращает коллекцию атрибутов указанного узла в виде объекта NamedNodeMap. Для доступа к узлам мы можем использовать общий метод индексации. Замените следующую строку в приведенном выше фрагменте кода.

javascript

 var Attrdemo = document.getElementById(
    'AtrributeDemo' ).attributes[1].name; 

Выход:

 по щелчку

Атрибуты имеют строковый тип данных. Таким образом, независимо от значения атрибута, он всегда будет возвращать строку.
Пример:

 document.getElementById ('AtrributeDemo'). getAttribute ('идентификатор')

Выход:

 AttributeDemo

Свойство: в отличие от атрибутов, которые определены в HTML, свойства принадлежат DOM. Поскольку DOM - это объект в JavaScript, мы можем получать и устанавливать свойства.

javascript

 <!DOCTYPE html>
 <html>
 <body>
    
<p>
        Click the "display" button for
        the number of attributes
        associated with it.
    </p>
    <button id= "AttributeDemo"
        onclick= "myFunction()" >
        Try it
    </button>
    <p id= "display" ></p> 
    <script>
        function myFunction() { 
            // Setting the property
            // 'geeksforgeeks' to a number
            document.getElementById( 'AttributeDemo' )
                    .geeksforgeeks = 777;
            // Getting the property, returns 1
            var x = document.getElementById(
                'AttributeDemo' ).geeksforgeeks; 
            document.getElementById(
                    "display" ).innerHTML = x;
        }
    </script>
 </body>
 </html>

Выход:

Атрибуты по умолчанию (не определенные пользователем) изменяются при изменении соответствующего свойства и наоборот.

html

 <!DOCTYPE html>
 < html >
 < body > 
    
< p >
        Click the button the display the
        current className & the edited
        className
    </ p > 
    
    < button id = "demo1" class = "button"
        onclick = "Function1()" >
        Click Me
    </ button >
    
    < p id = "displayCurrent" ></ p > 
    < p id = "diplayEdited" ></ p > 
    
    < script >
        function Function1() {
            var div = document.getElementById("demo1");
            // Returns "GeeksForGeeks"
            window.alert("Current Class : "
                + div.getAttribute("class"));
            div.setAttribute("class", "GeeksForGeeks");
            // Returns : "GeeksForGeeks"
            window.alert("Edited Class : "
                + div.getAttribute("class"));
        }
    </ script >
 </ body >
 </ html > 

Выход:

Примечание:

Нестандартные атрибуты (такие как id, class и т. Д.) Имеют сопоставление свойств 1: 1.
Мы используем className для доступа (получения или установки) свойства class, потому что class - зарезервированное ключевое слово в JavaScript.
Атрибуты, для которых задано значение по умолчанию, остаются постоянными при изменении соответствующего свойства.

Разница между атрибутами HTML и свойствами DOM:

Атрибут	Имущество
Атрибуты определяются HTML.	Свойства определяются DOM.
Значение атрибута постоянно.	Стоимость собственности переменная.
Они используются для инициализации свойств DOM. После инициализации работа завершена.	Такая работа не определена.

Разница между HTML HTML-Misc

В чем разница между свойствами и атрибутами в HTML?

html

javascript

javascript

html

РЕКОМЕНДУЕМЫЕ СТАТЬИ