“This is the 23rd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

HTMLElement is a subtype of the Element type. HTMLElement is a built-in basic attribute. GetAttribute () is used to obtain basic attributes and custom attributes of HTML elements. This post is about the rest

setAttribute()

The companion method to getAttribute() is setAttribute(), which takes two parameters: the attribute to be set, and the corresponding value

If the attribute exists, setAttribute updates the value of the attribute. If the attribute does not exist, setAttribute creates a new attribute with the specified value

As shown, we can use setAttribute to modify the value of an existing attribute or to append new attributes, but there is one detail: even if we use setAttribute to set the uppercase attribute, when we update the DOM, the attribute is always replaced with lowercase

If you try to update a property in uppercase, the property will be converted to lowercase by setAttribute and the corresponding value will be updated, indicating that property operations in the DOM are case-insensitive.


Similarly, update operations can be performed using base properties

We updated the style of the element with mydiv. className, but when we tried to update the newly defined attribute, neither.newattr nor.new-attr could be updated. The value of the existing custom attribute new-atRR is also not changed

removeAttribute()

Similar to getAttribute, we pass in the attribute we need to operate on, and then the attribute is deleted

As shown, we removed the custom attributes

Likewise, removing the base class attribute is no problem

If it is a base attribute, we can set null to the base attribute to clear the corresponding attribute value

This clears the value of the attribute but leaves the attribute name on the HTML element, but it doesn’t have much impact