Introduction

Looking to get to the ThunderDOM, trying to get out of this wasteland, want to find the Silicon/Colton to fuel the rest of your "Mad" escapades. Too bad, I'm not letting you have any of my secrets, especially my most effective survival secrets that could help you become the ThunderDOM champion. If I were to give you some tips, and you did become the champion of the ThunderDOM, maybe, just maybe you could bring me to "Tomorrow-morrow Land." Well maybe I could tell you a few things that could make your trip a little smoother, but I'm coming with, and no waving that gun around, we work with computers in the wasteland. Here's a list of locations we will go through, each more treacherous than the last. Please follow this guide, I promise we will be safe NodeWarrior:

1. "Broken Hill, AU" - What is the DOM
2. "Pinnacles, AU" - JavaScript and the DOM
3. "Menindee Road on the Mundi Mundi Plains" - Accessing the DOM
4. "Outside the ThunderDOM" - DOM Interfaces
5. "ThunderDOM" - DOM Testing with console.log()

What is the DOM

Broken Hill, AU

Look, you must be mad if you believe we could take them all on with brute force, and firepower alone in the center of this abandoned gas station. We need to outwit these raiders, and with my wily yet cowardly tactic of using DOM to our advantage we might be able to figure a route outta here that doesn't involve bloodshed and road rash. Let me tell you a little about the DOM, before the great boom, we had a thing called the internet. On the internet were these beautiful interactive documents called webpages made of HTML, CSS, and a whole slew of other programming languages, if you want to know more, there are articles about webpages like this: https://techterms.com/definition/webpage. A road warrior like yourself should get familiar with paths, and the only way to do it is to see this ancient visual representation of a DOM tree.

That's a pretty neat picture, but it's not like any tree I've seen before. I can say one thing, those all look like objects, and I'm betting if you could call them somehow, such as selecting them for manipulation, you'd be able to develop some crazy awesome creations to really stick it to those raiders. The DOM is what we will work with primarily when developing with Javascript, and will it ever help. The DOM allows us to do the cool things that you would see on popular websites, mobile apps, and webpages such as Facebook, Instagram, Netflix, etc. This being said, modern DOMs are created with multiple API's that work together to create what we see and interact with today, but the core DOM itself defines the objects that primarily define the document you are working in itself. Good thing you learned this, because those raiders just left and will certainly be back, and in greater numbers. We should move and get you set up with a weapon that could prepare you for light bouts with other raiders.

JavaScript and the DOM

Pinnacles, AU

We made it to a town that doesn't seem too happy to see us, I think it's your rough demeanor, spinal dystrophy, and carpal tunnel riddled hands along with all the fun programmer tropes. But enough jabbing, these people seem they need our help, and they could really use JavaScript in their life. I mean look at them, they've probably only seen a basic webpage with no styling from the early 90's.

What a monstrosity, great in its day, but we can build something better to raise the moral of these town-folk to have the will to fight back against these raiders. JavaScript and the DOM go hand in hand, think of it like you and I, or more literally this:

API = DOM + JavaScript

Now talk about literal, this is how an API is essentially made, one part DOM, one part JavaScript. These two were together since the beginning and eventually separated throughout the years, but they still have a great relationship with each other even after separation. Even though the DOM still works well with JavaScript, it can be sought out by different partners, for example Python and the DOM work well with each other, talk about a promiscuous DOM, but I don't shame.

Accessing the DOM

Menindee Road on the Mundi Mundi Plains

Just like this road you're on, you don't need anything special to access the DOM. Though like the different modes of transportation out here in the wasteland, your vehicle, the Pursuit Special, is just one of many implementations of the DOM. The one thing all these modes of transportation have in common is they will all help one travel throughout the wasteland. The same thing can be said about the DOM, all DOMs are constructed of some sort of object oriented model, thus allowing them to make web pages accessible via JavaScript. Making a web page accessible via JavaScript means either through inline or a separate JavaScript file, you can start manipulating the DOM using document or window on your program.

DOM Interfaces

Outside the ThunderDOM

This is it Max ol' pal, we're outside of what the before boomers called, "Sydney," or what we know it as, the ThunderDOM. Before we move any further, you should learn a bit more about Fundamental DOM Data Types. These are tools that will help you not just survive in the ThunderDOM, but thrive in it as a king!

Let's talk about the actual things you can manipulate in the DOM hierarchy, try to keep up because this can be a bit confusing for first timers, and going back to that guide I linked is helpful in understanding these core concepts. Objects in Web Development borrow from several interfaces, and to learn and memorize all the information about HTML elements that belong to all these interfaces would take years. Luckily that's what I'm here for is to summarize it for you, you see, as far as the DOM is concerned, HTML elements are just a node in a tree of nodes, this is where elements derive. That is how we can reference objects using their class, id, etc. To learn more about nodes, check out this fellow Node Warrior's blog: Vaidehi Joshi

Here is a list of some of the most common APIs in web and XML page scripting using the DOM made by MDN Web Docs:

• document.querySelector(selector)
• document.querySelectorAll(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute()
• element.getAttribute()
• element.addEventListener()
• window.content
• window.onload
• window.scrollTo()

Now you're dangerous enough to enter the ThunderDOM and show those other NodeWarriors what they're facing.

DOM Testing with console.log()

ThunderDOM

Welp, we've done it, we've made it to the ThunderDOM, where two programmers go in, one comes out. That might be a little exaggerated, but one definitely passes out from exhaustion. I want to give you my most secret, and vital skill for being successful when manipulating items in the DOM, testing techniques. There are multiple ways of testing outputs and responses from objects and elements you might be grabbing and manipulating, but one tool I prefer using when programming with JavaScript is console.log(). The console.log() function allows the user to put in an argument between those parenthesis printing/logging that information to the web console (accessible in the web browser by pressing command + option + J).

The console.log() function is in my opinion an amazing way to confirm you are grabbing the correct elements from your HTML document. Whether you are starting the web development process working with JavaScript, just learning the intricacies of JavaScript, or are an expert NodeWarrior, this tool is required to reduce bugs in the future of your development process. You could also use JavaScript Debugger which is also a viable tool to check the returned value of an object or element, and if you're interested in learning more, fellow NodeWarrior Justin E. Samuels.

Think of these debugging tools as ways of checking if your vehicle works, or your traps are orderly and will properly do what they're meant to do. You don't want to be stranded in the wasteland, or have no defense during a raider attack. This is why checking and debugging at every step of the web development process is important, it will save you heartache in the future.

I hope this simple guide helps you in your efforts to become a NodeWarrior just like Mad Max. If you are interested in more articles please visit my CRUD and RESTful routes Ruby on Rails article Scooby Doo and the Ruby on Rails.

Happy trails and drive(code) safely!

If you're not trapped fighting a raider crew, check me out:
GitHub: https://github.com/jlonetree
LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/