• Explain what the DOM is and how it is structured
• Select and target DOM elements using jQuery selectors
• Create, read, update, and delete DOM elements
• Change the attributes or content of a DOM element
• Explain the benefits of jQuery
• Explore jQuery methods for DOM manipulation and traversal

In the Objects & Functions lesson, you learned about objects as data structures and how we can use them to store data and methods. Today, we will learn about how Javascript uses objects to represent what you see in the browser.

The Document Object Model is a programming interface for HTML. When you load HTML into the browser, it gets converted into an object-based DOM structure. The visual representation of this is what you see when you open up Developer Tools in the browser.

An HTML document is available for us to manipulate as an object, and this object is structured and stored like an upside down tree, like this...

Or this...

html
└── head
│   ├──title
│   ├──meta
│   ├──link[rel="stylesheet"]
|   └──script[type="text/javascript"]
|
└── body
    ├── header
    │   ├── h1
    │   └── nav
    └── section.simplicity
    |   └── h2
    │   └── article
    ├── section.life
    |   └── h2
    │   └── article
    │       └── block_quote
    │       └── block_quote
    └── footer

Each web page loaded in the browser has its own document object. The document interface serves as an entry point to the web page's content. The document is an example of a host object--that is, an object provided to Javascript by the browser environment.

Everything in the DOM is a "node." Elements are called "element nodes," attributes are called "attribute nodes," the text inside elements are called "text nodes." There are comment nodes. The document itself is called a document node.

You also can refer to nodes by their relationships to each other. For example, in the graphic above, you would say that the body element is the parent to the two div elements contained inside it, which are called child nodes. The two divs are also siblings to one another because they are on the same level in the tree structure.

Let's look at another example...

Understanding the DOM is central to working in Javascript. Javascript uses the DOM to create dynamic HTML. This includes adding new HTML elements and attributes, changing CSS styles in a page and removing existing elements and attributes.

jQuery is a Javascript library that is intended to make it easier to use Javascript on your website. It's known as the "write less, do more" library. One of its main features is that it makes DOM traversal--that is, finding HTML elements based on their relationships with other elements--and DOM manipulation much more simple. Another major benefit is that it enables you to write code that behaves the same across different browsers and browser versions.

After working with CSS, you'll find jQuery to be a friendly way to dive into interactive development because it also emphasizes the use of selecting elements so you can do stuff to them.

It's important to note that jQuery is Javascript. Every jQuery method is, under-the-hood, executing Javascript code. You can see this by looking through the jQuery source code.

$ git clone https://github.com/ga-wdi-exercises/jquery-playground.git
$ cd jquery-playground
$ atom .
$ open index.html

You can add jQuery to your site by either downloading it from the jQuery website and hosting it locally or using what's called a Content Delivery Network (CDN). A CDN is a collection of global servers that caches and delivers content including Javascript files.

Today, we'll use a CDN...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

We're going to add the following code to the top of the script.js file when using jQuery...

$(document).ready(function(){
  console.log("hello world")
})

Everything placed inside the $(document).ready() method will not be processed until all the HTML has been loaded. In this case, that code is console.log("hello world").

jQuery selectors enable you to find and manipulate HTML elements.

$("#someId")

var red = $("#red")
console.log(red)

document.getElementById("red")

$("li")

This will return all the tags of that name.

var liTags = $("li")
console.log(liTags)

document.querySelectorAll("li")

$(".myClass")

This will return all elements with that class.

var liClass = $(".black")
console.log(liClass)

document.querySelectorAll(".black")

var lastBlackLi = $(".black:last-of-type")
console.log(lastBlackLi)

Once you've made an initial selection, you can dig deeper using traversal methods.

var ulChildren = $("ul").children()
console.log(ulChildren)

document.getElementById("red").children

var redParent = $("#red").parent()
console.log(redParent)

document.getElementById("red").parentNode

var redSiblings = $("#red").siblings()
console.log(redSiblings)

var getRed = $("li").eq(0)
console.log(getRed)

document.getElementById("myID").childNodes[2]

20 minutes exercise. 10 minutes review.

Spend 20 minutes completing this exercise.

.html() can both retrieve ("get") and change ("set") the HTML contents of a DOM node

• Get: if no argument is passed into the method, it retrieves the HTML content of the first DOM node in the selected collection
• Set: if an argument is passed into the method, it will replace the HTML content of all selected DOM nodes with that argument

// Get
var getInner = $("#red").html();
console.log(getInner);

// Set
$("ul").html("<li id='blue'>blue</li>");

document.querySelector("ul").innerHTML = "<li>Blue</li>"

Similar to .html() except that it will not turn markup into elements and will keep strings intact

• Get: returns the content of the selected element as a string
• Set: removes all of the elements children and replaces with whatever newContent is

// Get
var getText = $("ul").text();
console.log(getText);

// Set
$("ul").text("<li>blue</li>");

document.querySelector("ul").textContent = "<li>Blue</li>"

10 minutes exercise. 5 minutes review.

Find a partner, research, and provide an example of getting and setting using the below methods. Be prepared to share your findings with the class.

• .css() (documentation)
• .attr() (documentation)
• .val() (documentation)

// Get
var bodyBackgroundColor = $("body").css("background-color")
console.log(bodyBackgroundColor)

// Set
$("body").css("background-color", "lemonchiffon")

// Get
var language = $("html").attr("lang")
console.log(language);

// Set
$('img').attr('src','http://www.clipartlord.com/wp-content/uploads/2014/05/unicorn4.png')

<input type="text" value="name">

// Get
var myName = $("input").val();
console.log(myName)

// Set
$("input").val("Nayana Davis");

.style()

.setAttribute();

.value

Adds an element to the end of a parent element, making it the last child.

var blue = $("<li>blue</li>");
$("ul").append(blue);

.appendChild()

Adds element to the start of a parent element, making it the first child.

$("ul").prepend("<li id='blue'>blue</li>");

.insertBefore()

5 minutes exercise. 5 minutes review.

Find a partner, research and provide an example for each of the below methods. Be prepared to share your answer.

• .prependTo() (documentation)
• .appendTo() (documentation)

Removes element from DOM.

$("#red").remove();

.removeChild()

Removes all the child elements of the jQuery object it is called on.

$("ul").empty();

Changes elements style to have display: none

$("#red").hide();

Changes a display: none to display: block or whatever it was initially.

<li id="red" style="display: none;">red</li>

$("#red").show();

5 minutes exercise. 5 minutes review.

For the remaining three methods, find a partner, research and provide an example for each. Be prepared to share your answer.

• .addClass() (documentation)
• .removeClass() (documentation)
• .toggleClass() (documentation)

10 minutes exercise. 5 minutes review.

1. Open up the Microsoft website in Chrome or Firefox, and open up the console
2. Find an image url for the apple logo
3. Store the url to the apple logo in a variable
4. Find the Microsoft logo using Javascript and store it in a variable
5. Modify the source of the logo image so that it's an Apple logo instead
6. Find the Microsoft search input and store it in a variable
7. Modify the placeholder of the input so that it says "Search Apple" instead

Add a new item to the navigation between the image and the search box. It should contain the text "Apple is the new Microsoft".

With jQuery we might want to do something to each element. Say we have 5 paragraph tags in our html...

<p>Paragraph #1</p>
<p>Paragraph #2</p>
<p>Paragraph #3</p>
<p>Paragraph #4</p>
<p>Paragraph #5</p>

Say we wanted to add a class to each paragraph. We can do something like this...

$("p").addClass("pizza")

This add the class of pizza to each of the paragraph tags. This is happening through something called "implicit iteration" in jQuery. Under the hood Javascript is looping through each paragraph tag and adding a class. What if we wanted to log the HTML to the console? We might try this...

console.log($("p").html())

Hmm, that only gives us the first paragraph's HTML. We need a way to iterate over each of the paragraph tags. Enter .each...

$("p").each(function(){
  console.log($(this).html())
})