против прибудете имя класса/SetAttribute метод

Question

Я пришел через 2 способов получения значения атрибута: Первый:

document.getElementById("id").getAttribute("class"); 
document.getElementById("id").setAttribute("class", "newClass"); 

другой:

document.getElementById("id").className; 

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

Answer 1

Они делают разные вещи. .getAttribute('name') получает атрибут, в то время как .name получить собственность.

Атрибут - это начальное значение, заданное атрибутом в HTML-коде при создании элемента. Свойство - это текущее значение, которое может измениться с момента создания элемента.

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

window.onload = function(){ 
 
    
 
    var el = document.getElementById("id"); 
 

 
    console.log("Attribute: " + el.getAttribute("value")); 
 
    console.log("Property: " + el.value); 
 

 
    console.log('Changing property'); 
 
    el.value = 'b'; 
 

 
    console.log("Attribute: " + el.getAttribute("value")); 
 
    console.log("Property: " + el.value); 
 
    
 
};

<input type="text" id="id" value="a"></div>

Answer 2

Если ваш код может изменять различные атрибуты, то вы будете использовать document.getElementById("id").getAttribute(myVar); //myVar can be "class" document.getElementById("id").setAttribute(myVar, myValue); //myValue can be "newClass"

, если вы знаете, что вы собираетесь изменить класс, который вы можете использовать document.getElementById("id").className;

EDIT: Как указано в ответе выше атрибута устанавливается в HTML, при изменении атрибута свойство обычно изменяется.

Answer 3

Задавать 4 вопроса в одном не является хорошей идеей ,

Есть ли особые ситуации, когда предпочтительнее?

Как правило, настройка собственности предпочтительнее, поскольку она проще и исторически более надежна.

Быстрее, чем другой?

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

Как они отличаются?

setAttribute устанавливает значение атрибута. Атрибуты отражаются в свойствах. Исторически установка атрибута не всегда меняла свойство и наоборот.

Почему у этого даже есть 2 способа сделать это?

Атрибуты существуют в HTML перед javascript, вы можете думать о них как о том, что находится в разметке. Свойства DOM были главным образом отражениями атрибутов. Например. когда-то время атрибут значения элемента управления формы отражал значение по умолчанию, тогда как свойство value отражало его фактическое значение. Но многие из этих различий уходят.

Установка свойства, которое не является отражением стандартного атрибута с одинаковым именем, не создает атрибут этого имени (кроме нескольких исключений, свойство имеет другое имя для связанного атрибута, такого как class/className и для/htmlFor).

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

Answer 4

Один быстрее, чем другой?

Я просто наткнулся на веб-странице (https://jsperf.com/style-vs-classname/4) тестирование скорости 3 различных способов для достижения этой

// css: .hide { display: none } 
document.getElementById("id").style.display = "none"; 
document.getElementById("id").setAttribute("class", "hide"); 
document.getElementById("id").className("hide"); 

Назад в 2010 году первая альтернатива была быстро для IE 6-7 и Opera.

В моем браузере (Chrome 47.0.2526.73 на Ubuntu Chromium 64-bit), первый вариант в 2,7 раза быстрее второго и в 4 раза быстрее, чем третий вариант.

Попробуйте сами!