DOM Attributes and Properties
This is an area that I find is not well explained.
An example of this is the [attribute*=value] Selector. I came across this when I was analysing the code for my Responsive Design. In this case the attribute that I am "matching" (  - square brackets) is a class with a Universal Selector
A DOM Element can have attributes and properties, class and id seem to be both. Element (Tags) also have names, these tags have attributes and properties.
When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
For instance, if the tag is <body id="page">, then the DOM object has body.id="page".
There are many places where I have used this and not really realised it.
document.getElementById("htext").innerHTML = "Experiments with the Document Object Model";
- CSS Selectors
- CSS [attribute*=value] Selector - in my example the attribute is a class
- CSS Layout - Float and Clear - this is an example where W3C talk about properties
Attributes and Properties - January 2021