В JavaScript: почему установка свойства DOM стандартного атрибута на пустую строку не удаляет атрибут, как это делает Element.removeAttribute ()?

Question

Я узнал, что обычно лучше использовать свойства DOM для установки, доступа и изменения атрибутов, что привело меня к тому, чтобы избегать использования setAttribute () и getAttribute ().Существует ли аналогичный способ удаления свойств атрибута DOM без использования removeAttribute ()?

С учетом этого HTML-кода:

<div id=el></div>

И этого кода JavaScript:

let el = document.getElementById('el');
console.log(el.outerHTML); //<div id='el'></div>
console.log(el.align === ''); //true
el.align = 'center';
console.log(el.outerHTML); //<div id="el" align="center"></div>
el.align = '';
log(el.outerHTML); //<div id="el" align=""></div>

Похоже, что по умолчанию для el.align задана пустая строка.Почему сброс el.align в пустую строку после присвоения значения el.align не удаляет атрибут align из презентации el.outerHTML?Является ли этот метод столь же эффективным, несмотря на это?Или это вызовет проблемы, которых не вызывает removeAttribute ()?

Answer 1

Отображение между IDL-атрибутом (свойствами) и соответствующим атрибутом содержимого (разметкой) зависит от определения этого языка определения интерфейса.

Если для некоторых атрибутов IDL задано значение false или null, они будут удалены.например, те, которые отображаются на логические атрибуты , чье простое присутствие означает истинное значение:

console.log(aud.loop);
console.log(aud.outerHTML);
aud.loop = false;
console.log(aud.outerHTML);

<audio id='aud' loop></audio>

Однако некоторые другие, такие как атрибуты ключевых слов , не будут удалены, поскольку значение, которое вы установили, даже если оно не является частью спискадопустимых ключевых слов будет отображаться в недопустимое значение по умолчанию , например, type IDL HTMLInputElement будет по умолчанию «text», если вы установите недопустимое значение, но разметка будет по-прежнему отображать это недопустимое значение.(Ваш атрибут align был частью этой категории до того, как он устарел).

console.log(inp.type); // "number"

inp.type = "foobar"; // invalid
console.log(inp.type); // => default to "text
console.log(inp.outerHTML); // markup: "foobar"

inp.type = null; // invalid
console.log(inp.type); // => default to "text
console.log(inp.outerHTML); // markup: "null"

<input id="inp" type="number">

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

Единственный способ удалить такие атрибуты - использовать метод Element.removeAttribute().

То же самое относится и к другим атрибутам, которые примут любую строку в качестве допустимого значения, например * 1034.* (то есть для HTML, в CSS действуют более строгие правила), здесь установка IDL для любого значения приведет к приведению его к строке, которая будет соответствовать действительному значению в IDL className.

console.log(el.className); // ""

el.className = null; // coerced to string
console.log(el.className); // "null"
console.log(el.outerHTML); // markup: "null"

el.className = false; // coerced to string
console.log(el.className); // "false"
console.log(el.outerHTML); // markup: "false"

el.className = ""; // ""
console.log(el.className); // ""
console.log(el.outerHTML); // markup: ""

<div id="el"></div>

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

// crossOrigin IDL when no set is `null`.
console.log(img.crossOrigin);// attribute unset => IDL `null`

img.crossOrigin = 'use-credentials' // only non default valid value.
console.log(img.crossOrigin);
console.log(img.outerHTML);

img.crossOrigin = false; // invalid 
console.log(img.crossOrigin); // IDL defaults to "anonymous"
console.log(img.outerHTML); // markup is `"false"`

img.crossOrigin = null; // remove
console.log(img.crossOrigin);
console.log(img.outerHTML);

<img id="img">

Наконец, некоторые атрибуты содержимого вообще не будут отражаться, например HTMLInputElement.value.

inp.value = "new value";
console.log(inp.outerHTML);

<input id="inp" value="initialValue">

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

Answer 2

Необходимо понимать разницу между атрибутами разметки и свойствами DOM.Атрибуты не всегда напрямую совпадают со свойством объекта JavaScript.