-ben tryon
Back at the beginning of the browser wars, Netscape and Microsoft were battling for supremacy. The results were the DOM iterations. The Document Object Model gives users the ability to relate to and manipulate HTML elements and layers of webpages and scripts.
Part of programming is grabbing and changing the interior structure of computer memory. The DOM represents this memory structure in a Document, and includes style and content. Each element of the Document is a part of this structure and the overall DOM structure looks like a bar graph reaching to the sky. Each bar is a Node, each Node has parts –“parents” and “children” - that are attached to it and can be manipulated.
Both the “recent” DOM iteration and event manipulation are considered the keystone markers of longevity for Javascript. Javascript works exceedingly well with the DOM, even though the DOM is “language-neutral”. JS throws few errors when manipulating the DOM. Event listeners are methods of “Event Targets”. “Event Target” is a node that acts when a function targets it and changes the DOM (if applicable).
Event Listeners are powerful because they can add, subtract and otherwise influence the DOM “bar graph”. For example, one needs a button added to the page. This is a function button that did not exist in the HTML beforehand. It can be clicked, and, by user action, create a response:
`const button = document.createElement("btn");
document.getElementById("btn").addEventListener("click", displayDate);`
JavaScript moves through the DOM by creating an Element of the HTML, grabbing it by a handle (the Id) and adding the button and it’s action (a function, defined elsewhere, that displays the date).
When the browser wars were hot, a major question was why and how to capture interaction beyond submitting forms, prompt alerts and the like. DOM evolution, developer democratic criticism and the browser developers taking note, allowed the browsers to become open forums for change. In other words: we can now make CSS, HTML and the Document conform to our needs because early client-side devs wanted control, the Netscapes/Microsofts helped them and the DOM allowed it. Javascript was the best language for this new level.
Event Listeners change DOM interaction via Javascript to a further degree because the Target node of the DOM is accessible via JavaScript. This Target allows a processing interaction to occur with data-node access and the right data. Targets are the aim of Event Listeners.
Below, the Target demonstrates the ability of the developer to start with an idea (starting/stopping gas pump flow). They may then manipulate the DOM through Elements. The user, developer, and browser can make choices now via logic: They all decide whether conditionally stopping or starting the gas flow/the Target meets their purpose.
`function gasPump(event) {
const pump = document.getElementById("pump");
if(event.target.style.background-color == "red"){
event.target.style.background-color = "blue";
event.target.innerText = "Stop Pump Flow?";
pump.style.visibility = "visible";
} else {
event.target.style.background-color = "red";
event.target.innerText = "Continue Gas Flow";
pump.style.visibility = "hidden"
}
}
document.getElementById("myBtn").addEventListener("click", gasPump);`
Overall, computers are simple – they take information and display it. Javascript and the DOM allowed unparalleled access to the browser, the Document layer underlying it and the foundational structure. Users and developers benefited from this. This combination finds the ability to use conditional, actionable functions to make computers resources and tools of a previously quixotic future.
Top comments (0)