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

This article complements a previous article in which I took an in-depth look at the Document Object Model (DOM) “Element Basic Properties.

Element type

Properties for

Each element in HTML has zero or more attributes, often used to add more information to the element.

There are three DOM manipulation methods related to attributes:

  • getAttribute()
  • setAttribute()
  • removeAttribute()

Property, you can see the effect of the operation below

Note: In the previous article, we said that we need to use className to get the corresponding attribute of the element, but here we use class. The fundamental reason is that className is obtained by an element’s attribute, while class is obtained by the encapsulated method getAttribute()

What makes getAttribute() even more powerful is that it can get our custom attributes!

On this element, add a custom attribute, then try using getAttribute() and get the corresponding value! Similarly, we try to fetch a value that does not exist and return NULL

The property name is case insensitive, and the third fetch operation is partially capitalized, but the corresponding data can still be retrieved! In addition, according to the H5 specification, when using custom attributes, it is recommended to add a data- prefix to distinguish them

Again, usegetAttribute()Gets the corresponding attribute, and returns its data as a string if it exists

Therefore, there are two special cases where using.style will return the corresponding CSS object, and we can continue through. To get or modify style effects

Another case is the interaction event of an element binding, for example onClick

Once again, we add an onclick attribute to the div element, calling showMsg(), which returns a value of type function via.onclick. Using typeof verifies this idea as well