Introduction to JavaScript III - Intro to DOM Manipulation

Learning Goals

• Continue to learn how to access and use the Chrome Developer Tools
• Continue to develop a basic understanding for JavaScript syntax
• Understand how to query and update a page after its been loaded

Vocab

• HTML Element A building block that makes up the structure of a web page.
• CSS Selector A way to identify a set elements, typically using a tag, class or id.
• Interface a shared boundary across which two separate components exchange information.
• DOM Document Object Model, the JS interface used to interact with HTML
• Event Any event which takes place in the DOM, these can be generated by users or the browser.
• EventHandler A function that will run when a specific event occurs

The Document Object Model (DOM)

DOM Documentation

The browser gives us some useful global objects for free. The window object is the global object and it holds a lot of information about the browser window including it’s current location (URL), size, etc. document contains a representation of the current web page.

document contains a bunch of methods that allow us to query the DOM. Let’s talk about two commonly used methods.

document.querySelector();
document.querySelectorAll();

Both methods take a query selector—like you would use in CSS. document.querySelector() returns the first element that matches the query. document.querySelectorAll() returns a collection of all the elements that match the query.

Let’s say we have a page with the following markup:

See the Pen Simple HTML Page by Turing School of Software and Design (@turing) on CodePen.

Let’s try out some queries:

• document.querySelectorAll('p') will return a collection containing all of the paragraphs.
• document.querySelector('p') will return just the first paragraph.
• document.querySelector('#third') will return the paragraph with the id third.
• document.querySelectorAll('.awesome') will return a collection containing the two paragraphs with the class awesome.

Updating our HTML

Elements have a number of useful properties and methods.

Let’s say we wanted to change the contents of our <h1> element. We could modify it’s contents with the following JavaScript.

var h1Element = document.querySelector('h1');

h1Element.innerText = 'JavaScript is amazing!';

See the Pen Simple HTML Page (Now with JavaScript!) by Turing School of Software and Design (@turing) on CodePen.

The DOM has been updated to the following:

<h1>JavaScript is amazing!</h1>

<p>The is the first paragraph.</p>
<p class="awesome">The is the second paragraph.</p>
<p id="third" class="awesome">The is the third paragraph.</p>

.innerText vs .innerHTML vs .textContent

<!-- The following line of HTML will be used in the next side track example -->
<!-- Note the extra spaces after hello - that is intentional -->
<p id="inner-text-example">Hello    <span>1906</span></p>

Side Track: You may have heard about a few different ways to target/manipulate the text of an HTML page. The two most common are innerText and innerHTML, with a third being textContent. The first answer in this convo gives you a quick answer, but if you’re curious run the following few lines of code in your console:

var para = document.querySelector('#inner-text-example');
console.log(para.innerText);
console.log(para.innerHTML);
console.log(para.textContent);

MDN has a great description of the differences between innerHTML, innerText, and textContent

To sum up:

• innerText will collapse all of the extra spaces and give you back JUST THE TEXT.
• innerHTML will give you back the text, with any nested HTML elements printed out as well
• textContent will give you back an exact copy of JUST THE TEXT, leaving any spacing or formatting as is.

Pair Practice

Visit this page and fork the CodePen.

See the Pen HTML Report Card by eric weissman (@eric_turing) on CodePen.

Adding Event Listeners

Changing stuff on the page with JavaScript is all well and good, but if you might as well have just written it in the markup to begin with. The real power of JavaScript comes into play when we write code that responds to user input.

The real power of using JavaScript to change pages emerges when we start listening for user events.

This is the crux of front-end engineering. We present a user interface and then as the user interacts with the UI, we change and update what they see.

Let’s take a look at the syntax and then we’ll talk about what’s happening.

See the Pen A First Event Listener by Turing School of Software and Design (@turing) on CodePen.

1. We’re querying for all of the elements we need and we’re storing them in variables.
2. We’re adding an event listener to the <button> with the class of .change-text.
3. We’re passing addEventListener() two arguments:
   • The type of event we’re interested in listening for.
   • A function that should be called whenever that event happens.

Extensions

Here is MDN’s master list of DOM events. Most of them are rare birds. Can you add additional events to the page?

If that list overwhelms you, here is a artisanal, hand-crafted list:

• mouseenter
• mouseleave
• dblclick
• keydown
• keyup

Changing Styles Programmatically

We can also modify the CSS styling of any element on the page using JavaScript.

There are three approaches:

1. We can directly manipulate the style of the element through inline styles.
2. We can add or remove classes from the element (the preferred way).
3. You can modify the stylesheet itself with JavaScript.

We’re only going to talk about the first two today.

Consider the following:

See the Pen CSS Manipulation with JavaScript by Turing School of Software and Design (@turing) on CodePen.

Getting User Input from Forms

To access the value from an input element we can do the following

See the Pen Color Box - Get Color by Nathaniel Foster (@nfosterky) on CodePen.

Let’s use this pen for practice

See the Pen Color Box by eric weissman (@eric_turing) on CodePen.