Continuing from my previous blog post, more javascript 101 questions!:

What's the difference between an "attribute" and a "property"?

Attributes are apart of HTML markup while properties are defined in your DOM*.

The easiest answer I found was by subtleseeker user on Stack overflow. Paraphrased:

Attributes initialize DOM properties. Property values can change; attribute values can't.

Attributes in html represent the initial value and the DOM property can be called and will be the current value.

For example, when the browser renders

<input type="text" value="Bob">

, it creates a corresponding DOM node with a value property initialized to "Bob".

When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged:

 input.getAttribute('value') // "Bob".

Difference between document load event and document DOMContentLoaded event?

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Stylesheets can slow your DOM parsing down which is why DOMContentLoaded is preferred over load for user request satisfaction.

A different event, load, should be used only to detect a fully-loaded page. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

That's all for today, please leave any comments/questions/corrections in the comments. Thanks!

Sources:

Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quote from his github. Find his tech interview handbook here and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

The **DOM* stands for document object model. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." W3Schools

Other sources:

https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html