Document Object Model (DOM)

Back in Data Structures you learned different ways to store data (Graph, List, etc…), well here is the question – how would you store an HTML document? Answer – the DOM. The DOM not only provides the ability to store documents, it also gives you methods to access and manipulate those objects in JavaScript and to style them with CSS.

var anElement = document.getElementById("ElementName"); 

You used this code a lot back in data structures, it was the typical method to get input from the user. If the element was a textbox you could get the value from that textbox by using;

var theText = document.getElementById("TextBoxName").value;

You may need to get parts of a document by some other method than by ID, and not all elements have an ID, remember you define these as an attribute, so there are lots of methods to manipulate the document.

See https://www.w3schools.com/jsref/dom_obj_document.asp for a full list. Now that you understand the basics – if you need more, it is just a Google search away.

You can learn much more about the DOM at the lecture page https://roneaglin.online/cop4813/home/lectures/the-document-object-model/