What are the properties of an HTML element?

Difficulty: 5/10

DOM properties, attributes vs properties, content manipulation

Properties of an HTML Element

In HTML, every element is represented as an object in the Document Object Model (DOM). These objects have properties, which are values that define the state and behavior of the element. Properties are different from attributes: attributes are defined in the HTML markup, while properties are the current values that JavaScript sees when working with the DOM.

Example: Accessing Properties with JavaScript

Common Properties of HTML Elements

1
id – reflects the element's id attribute
2
className – reflects the element's class attribute
3
innerHTML – represents the HTML content inside the element
4
textContent – represents only the text content
5
value – for form elements (input, textarea, select)
6
checked – for checkboxes and radio buttons
7

Scenario Questions

0-2 years experience

1You need to update the label of a <button> when a user clicks it. Which HTML element property would you modify, and how would you do it in JavaScript?
2If you have an <img> tag and you want to change its source dynamically, which property would you set, and what effect does it have on the page?
3What happens if you set element.innerHTML to a string containing a <script> tag?

Follow-up Questions

Can you give an example where using a property instead of an attribute caused a subtle bug?
How do browsers handle property reflection for boolean attributes like disabled?
What are the performance implications of frequently reading or writing certain element properties?