Day 13: HTML Forms and DOM Traversing

Dylan Thorwaldson
Aug 24, 2017 · 3 min read
I definitely have not made a HTML form this cool, not YET at least

Forms

Today we actually went through a slideshow, which is not the typical style of our instructor. When I say we went through a slideshow though, I mean that there were slides up on the projector for our reference while Zubair was helping us do a deep dive into HTML forms and how to create them, etc.

I think forms got its own lecture because it is an HTML elements that is so versatile and can have so many different elements nested in it. Also, forms are literally everywhere on the internet. Ever signed up for anything online? You filled out a form. Ever paid for anything on your computer or phone? Form. Ever done a google search??? Yeah, form.

They’re everywhere.

We had a good exercise after the lecture that helped us practice creating our own forms, adding text areas for name, date, phone number, email, comments, and even a submit button at the end. I enjoyed going through the exercise, but I don’t think HTML forms really lights my fire like other things we’ve learned so far.

Traversing the DOM

No, Dom, not you

After lunch we went into a new topic, traversing the DOM. The DOM stands for Document Object Model, and it’s a really important topic in web development. The DOM is essentially the finished structure of a web page’s HTML/style/script pages, and it is most commonly visualized as a tree with a ton of branches. We discovered how to traverse the DOM by listening to a lecture about it and then working as a class to create a checkerboard using purely Javascript. The beauty of this whole thing is that Javascript has access to the DOM, and it can even change and create elements in the HTML file itself, and implement those changes immediately. All the DOM elements are sitting on top of essentially a Global Object in the browser called document. So, if we were to type in our Javascript file:

let freshDiv = document.createElement('div);
document.body.appendChild(freshDiv);
freshDiv.style.width = '50%';
freshDiv.style.backgroundColor = 'lime';
freshDiv.innerHTML = "<h1>I'm a fresh lime!</h1>"

what would we have? Answer = A brand new div element, appended to the body of our site, that takes up half the width of the page, has a lime green background, and contains the string “I’m a fresh lime!” for some reason! And that will render in the page as soon as it’s refreshed. All Javascript, with no need to add it into the HTML file.

So, traversing and adding/creating/changing elements within the DOM is a really powerful tool when it comes to front end web development, and I’m excited to learn more about the implications and use cases involved going forward.

The Road to Code

A place for people taking their first steps into the wonderful world of software development

)

Dylan Thorwaldson

Written by

Software Engineer

The Road to Code

A place for people taking their first steps into the wonderful world of software development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade