1) Basic concepts

Propertye and attribute are both translated as "property", but are translated as "property" and "property" in "JS Advanced Programming".Copy the code

propertype

Propertype is a property in the JS DOM node, such as className and tagName

The variables in the blue box have inheritance relationships

attribute

For an attribute on an HTML tag, such as ID, class, custom attribute, and so on

Attribute is a property in properType

2) Modify the similarities and differences of attributes

Modify properties:

  • Propertype: input.value = XXXX. Use = directly
  • Attribute: setAttribute(‘value’, ‘XXX ‘), which uses the setAttribute API to assign values

First the conclusion:

  1. The effect of propertype and attribute on the default attributes of the tag isEach other 的
  2. Inupt’s value attribute is a special case, input.value = XXXonlyIf propertype, input.setattribute (‘value’, ‘XXX ‘)At the same timeimpact
  3. To modify the default properties, =onlyModify properType, setAttributeonlyModify the attribute

Modifies the default attribute of the label

If you modify the default attributes of the tag, such as class, ID, and name, the effects are mutual. Using = or setAttribute will affect both properType and attribute.

Changes the default [none] attribute of the label

The = sign can only be used through “.” To get the value

To use setAttribute, you need to use getAttribute

Special attributes

First, let’s look at HTMLElement and HTMLInputElement. HTMLInputElement has a value attribute, but HTMLElement does not.

To modify the value attribute, use = to change only propertype, and use setAttribute to change both

Properties like hidden

Take hidden as an example. It is similar to value. Using = can only change propertype, and using setAttribute can change both

But input.hidden = “XXX”, or the default conversion to true, causes hidden = “” on the input label.

While using input.setattribute (‘hidden’, true), hidden on the tag = “true”

Image path attribute

Img.src gets the relative path, and img.getAttribute(‘ SRC ‘) gets the relative path.

With img.scr or this img.setattribute (‘ SRC ‘), it’s still relative and absolute