dbgobar / jquery-dom

The DOM (Document Object Model) & JQuery Basics

Learning Objectives

• 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

Intro (5 minutes)

We learned some things about JS objects. We learned that we can give objects key value pairs to program logic from real life objects. Turns out, we can actually treat elements in our HTML as objects in our JS programs.

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

Read this to learn more about the DOM.

(3 minutes)

We're used to seeing our HTML displayed in the browser, but now we're going to think more about how it gets stored in memory.

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

Let's look at the structure of a page

The Document Object (5 min)

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.

Nodes (5 minutes)

Everything in the HTML DOM is called 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:

JQuery Basics (5 minutes)

Understanding the DOM is central to working in Javascript. Essentially, 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 its relationships to 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 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 also important to note that jQuery IS Javascript so it's not accurate to say, if you're so inclined, that 'jQuery is better than Javascript.' You can distinguish the traditional style by calling it vanilla Javascript.

Set up environment (5 minutes)

A one liner!

$ 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 the file from the jQuery website and hosting 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.

Here, 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")
})

$(document).ready() is a way we can make sure all of our HTML is loaded first, before we execute any jQuery/JS code. It's leveraging events and callbacks(we'll learn about these in the next lesson). We write the three lines above to ensure we've properly accessed the jQuery library as well as our script file in our HTML so long as we see the "hello world" show up in the console.

Note

• Load jquery before your own code
• Load both just before the closing body tag

Selectors (10 minutes)

jQuery selectors enable you to find and manipulate HTML elements.

Getting an element by its Id

$( "#someId" )

Example

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

Vanilla Javascript syntax

document.getElementById("red");

Getting elements by tag name.

Notice this will return all the tags of that name.

$( "li" )

Demo in console

Example

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

Vanilla Javascript syntax

document.querySelectorAll("li");

Getting elements by Class.

Again, this will return all elements with that class.

$( ".myClass" )

Example

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

Vanilla Javascript syntax

document.querySelectorAll(".black");

But also any valid CSS selector will work:

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

Traversal Methods (10 minutes)

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

.children()

Example

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

Vanilla Javascript syntax

 document.getElementById("red").children

.parent()

Example

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

Vanilla Javascript syntax

document.getElementById("red").parentNode

.siblings()

Example

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

This above example highlights a very cool feature from jQuery called method chaining. Essentially, this allows us to perform multiple methods on the same set of elements in a single line.

.eq()

Example

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

Vanilla Javascript syntax

Use []. ex: document.getElementById("myID").childNodes[2]

Break (10 minutes)

You Do: Selecting DOM elements (20 min)

Exercise Here

Get/Modify (15 minutes)

In programming, we'll come across patterns of retrieving information and assigning data relatively frequently. Throughout this course, we'll learn a lot of functionalities across both JS and Ruby that get and set data for us.

.html()

• get or set the HTML contents

• get: no argument, know that it returns the innerHTML of the first jQuery object

• set: one argument that you want the html content to be

  Get Example

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

  Set Example

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

  Vanilla Javascript syntax

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

.text()

• 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, and store it in the variable text

• set: removes all of the elements children and replaces with whatever newContent is

Get Example

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

Set Example

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

Vanilla Javascript syntax

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

.css() - You do

• How do you get/set CSS properties on a jQuery object?
• How do you set multiple CSS properties?

.attr()

• get: returns the value of an attribute for the first element in the set of matched elements

• set: set the value of an element attribute

  Get Example

  var language = $('html').attr('lang')
  console.log(language);

  Set Example

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

<details>
<summary>
Vanilla Javascript syntax
</summary>


```javascript
.setAttribute();

You Do: Document Dive and examples (10 minutes)

For the last method, find a partner, research, and provide an example of getting and setting. Be prepared to share your findings with the class. Create an input tag in your HTML for the .val() to work effectively.

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

• .val() documentation

`.val()` example:

`html` ```html ```

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

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

Vanilla Javascript syntax

.value

Adding content (5 minutes)

.append()

• adds newly created element to the end of a parent element, making it the last child

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

Vanilla Javascript syntax

.appendChild()

.prepend()

• adds newly created element to the start of a parent element, making it the first child

$( "ul" ).prepend( "<li>pink</li>" );

Vanilla Javascript syntax

.insertBefore()

You Do: Document Dive and examples (10 minutes)

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

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

Removing content (5 minutes)

.remove()

• removes element from DOM

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

Vanilla Javascript syntax

```javascript .removeChild() ```

.empty()

• removes all the child elements of the jquery object it is called on

$( "ul" ).empty();

Others (5 minutes)

.hide()

changes elements style to have display:none

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

.show()

changes a display:none to display:block or whatever it initially was

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

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

You Do: Document Dive and examples (10 minutes)

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

You do: Logo hijack (15 min)

1. Open up https://www.microsoft.com/en-us/ 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 Microsfot logo using JS and store it in a variable.
5. Modify the source of the logo IMG 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.

Bonus: Add a new element between the image and the search textbox, telling the world that "Microsoft is the new Apple".

.each

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

<p>paragraph1</p>
<p>paragraph2</p>
<p>paragraph3</p>
<p>paragraph4</p>
<p>paragraph5</p>

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

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

And this would go ahead and add the class of pizza to each of the paragraph tags. This is happening through something called implicit iteration in jQuery. Under the hood its 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 tags html. Whelp, we need a way to iterate over each of the paragraph tags. Enter .each:

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

You do TTMAR

Try out click events!

https://github.com/ga-wdi-exercises/ttmar