โš–๏ธattributes vs. properties

HTML attributes vs. DOM properties

๐Ÿ”ธ HTML attributes โ”Š DOM propertiesโ”Š attr-prop sync โ”Š

For element nodes, most standard HTML attributes automatically become properties of DOM objects. ๐Ÿ“— JS.info โŸฉ Attributes and properties

<body id="page"> => body.id="page"

HTML attributes

  • attribute name is case-insensitive.

  • attribute values are always strings.

  • element.attributes collection is iterable and has all the attributes as objects with name and value properties.

DOM properties

  • DOM properties are NOT always strings. for example:

  • a.href is always a full URL. ( ๐Ÿ‘‰๐Ÿป See: ๐Ÿ’ˆ็ฏ„ไพ‹ )

property โ‡” attribute sync

  • standard attribute changes โ‡’ auto-update property, and vice versa.

  • โญ๏ธ with some exceptions ( ๐Ÿ‘‰๐Ÿป ๐Ÿ’ˆ็ฏ„ไพ‹ )

Last updated