在JavaScript中：为什么不将标准属性的DOM属性设置为空字符串，则像Element.removeAttribute（）一样删除属性？

Question

I've learned that it's generally best to use DOM properties to set, access, and modify attributes which has lead me to avoid using setAttribute() and getAttribute(). Is there a similar way to remove DOM attribute properties without using removeAttribute()?

Given this HTML code:

<div id=el></div>

And this JavaScript code:

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>

It appears that el.align is set to an empty string by default. Why does resetting el.align to an empty string after assigning a value to el.align not remove the align attribute from the el.outerHTML presentation? Is this method just as effective even so? Or will this cause issues that removeAttribute() won't?

Answer 1

You need to understand the difference between markup attributes and DOM properties. Attributes don't always directly align with with a property on the JavaScript object.

Answer 2

The mapping between IDL attribute (properties) and the corresponding content attribute (markup) depends on the definition of this Interface Definition Language.

Setting some IDL attributes to false or null will remove them, for instance the ones mapping to boolean attributes , whose simple presence signifies a truthy value:

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

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

However, some others like keywords attributes won't get removed, because the value you did set even if not part of the list of valid keywords will map to an invalid default value , for instance HTMLInputElement's type IDL will default to "text", if you set an invalid value, but the markup will still show this invalid value. (Your align attribute was part of this category, before it's been deprecated).

 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"> 

This makes sense since even though the browser doesn't recognize the set value as being one they support, it could very well be one that will be supported in the future.

The only way to remove such attributes is then to use Element.removeAttribute() method.

Same goes for other attributes which will accept any string as a valid value, for instance class (that is for HTML, CSS have stricter rules), here setting the IDL to any value will coerce it to a string, which will map to a valid in value in the 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> 

And some will have different default values whether the attribute is missing , or in an invalid state, making their relation with the IDL even more obscure.

 // 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"> 

Finally some won't get reflected at all in the content attribute, like the HTMLInputElement.value .

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

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

So you'd need to search for the definition of any IDL attribute to be sure how it should behave.