Document Object Model

The DOM Tree

The Document Object Model is an API for HTML and XML documents
- Provides a structural representation of the document
- Developers can modify the content and UI of a web page

The DOM Tree

The DOM consists of objects to manipulate a web page
- All the properties, methods and events are organized into objects
- Those objects are accessible through programming languages and scripts
How to use the DOM of an HTML page?
- Write JavaScript to interact with the DOM
  - JavaScript uses the DOM API (native implementation for each browser)

The DOM API

The DOM API consists of objects and methods to interact with the HTML page
- Can add or remove HTML elements
- Can apply styles dynamically
- Can add and remove HTML attributes
DOM introduces objects that represent HTML elements and their properties
- document.documentElement is <html>
- document.body is the body of the page, where the content of the page is

DOM Objects

Each of the HTML elements has corresponding DOM object type
- HTMLLIElement represents <li>
- HTMLAudioElement represents <audio>
Each of these objects has the appropriate properties
- HTMLAnchorElement has href property
- HTMLImageElement has src property
The document object is a special object
It represents the entry point for the DOM API

Selecting DOM Elements

HTML elements can be found and cached into variables using the DOM API

var header = document.getElementById('header');
var nav = document.querySelector('#main-nav');

Select single element

Select a collection of elements

var inputs = document.getElementsByTagName('li');
var radiosGroup = document.getElementsByName('genders');
var header = document.querySelectorAll('#main-nav li');

Select a collection of elements

var links = document.links;
var forms = document.forms;

NodeLists

A NodeList is a collection returned by the DOM selector methods:
- getElementsByTagName(tagName)
- getElementsByName(name)
- getElementsByClassName(className)
- querySelectorAll(selector)

var divs = document.getElementsByTagName('div'),
    queryDivs = document.querySelectorAll('div');
for(var i = 0, length = divs.length; i < length; i += 1){
   // do stuff with divs[i]…
}

NodeLists

NodeList looks like an array, but is not
- It's an object with properties similar to array
  - Has length and indexer
Traversing an array with for-in loop works unexpected:

console.log(Array.isArray(divs)); // false

for (var i in divs) {
   console.log('divs[' + i + '] = ' + divs[i]);
}

jQuery

What is jQuery?

jQuery is a cross-browser JavaScript library
- Designed to simplify the client-side scripting of HTML
- The most popular JavaScript library in use today
- Free, open source software
jQuery's syntax is designed to make it easier to
- Navigate a document and select DOM elements
- Create animations
- Handle events

Why use jQuery?

Easy to learn
- Fluent programming style
Easy to extend
- You create new jQuery plugins by creating newJavaScript functions
Powerful DOM Selection
- Powered by CSS 3.0
Lightweight
Community Support
- Large community of developers and geeks

Installing jQuery

Download jQuery files from jquery.com
- Self hosted
  - You can choose to self host the .js file
  - E.g. jquery-3.1.0.js or .min.js file
- Use it from CDN (content delivery network)
  - Microsoft, jQuery, Google CDNs
  - e.g. code.jquery.com/jquery-3.1.0.min.js
  - ajax.microsoft.com/ajax/jquery/jquery-3.1.0.min.js

Selectors

Selection of DOM elements in jQuery is much like as in pure JavaScript
- Selection of elements using CSS selectors
- Like querySelectorAll

//by tag
$("div") //document.querySelectorAll("div");

//by class
$(".menu-item"); //document.querySelectorAll(".menu-item");

//by id
$("#navigation");

//by combination of selectors
$("ul.menu li");

Selectors

Selecting items with jQuery
- Almost always returns a collection of the items
  - Even if there is only one item
- Can be stored in a variable or used right away
- The usage of the elements is always the same, nomatter whether a single or many elements

$(".widgets").fade(1);

let something = $("#something");
something.hide();

DOM Traversal

$.next(), $.prev(), $.parent(), $.parents(selector)
- Returns the next/prev sibling
- Returns an HTML element
  - Not a [text] node

var $firstLi = $("li").first();
log($firstLi); //logs "Item 1"
log($firstLi.next()); //logs "Item 2"

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

jQuery Objects

Selected with jQuery DOM elements are NOT pure DOM elements
- They are extended
- Have additional properties and methods
  - addClass(), removeClass(), toggleClass()
  - on(event, callback) for attaching events
  - animate(), fade(), etc…

//Parsing a regular DOM element to jQuery Element
var content = document.createElement("div");
var $content = $(content);

jQuery Object Properties

jQuery elements extend regular DOM elements
Methods for altering the elements
- $.css("color", "#f3f")
- $.html() returns the innerHTML
  - $.html(content) sets the innerHTML
- $.text(content) sets the innerHTML, by escaping the content

jQuery Object Properties

$(document).ready(callback) calls the passed function once the DOM tree is fully loaded

// A $(document).ready() block.
$(document).ready(function() {
    console.log("ready!"); // Code to run when the document is ready.
});

Shorthands:

function readyFn( jQuery ) {    
    console.log("ready!");
}

$(document).ready(readyFn);
$(window).on("load", readyFn);
$(readyFn);

jQuery Events

jQuery has a convenient way for attaching and detaching events
- Works cross-browser
- Using methods on() and off()

function onButtonClick(){
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
}

$("a.button").on("click", onButtonClick);

AJAX

What is AJAX?

AJAX is acronym of Asynchronous JavaScript and XML
- Technique for background loading of dynamic content and data from the server side
- Allows dynamic client-side changes
Two types of AJAX
- Partial page rendering - loading of HTML fragment and showing it in a <div>
- JSON service - loading JSON object and client-side processing it with JavaScript / jQuery

What is AJAX?

Technically, AJAX is a group of technologies working together
- HTML & CSS for presentation
- The DOM for data display & interaction
- XML (or JSON) for data interchange
- XMLHttpRequest for async communication
- JavaScript to use the above

AJAX Requests

AJAX uses HTTP
- Requests have headers - GET, POST, HEAD, etc.
- Requests have bodies - XML, JSON or plain text
- The request must target a resource with a URI
- The resource must understand the request
  - Server-side logic
- Requests get a HTTP Response
  - Header with a body

AJAX jQuery

jQuery provides some methods for AJAX
- $.ajax(options) – HTTP request with full control (headers, data, method, etc…)
- $.get(url) – HTTP GET request
- $.post(url) – HTTP POST request
- $(selector).load(url) – loads the contents from the url inside the selected node

jQuery AJAX

$.get('users.all')
  .then(function(usersString) {
    return JSON.parse(usersString);
  })
  .then(function(users) {
    myController.users = users;
  })
  .catch(fucntion(error) {
    console.log(error)
  }

Promises

A promise is an object which represents an eventual (future) value
- Methods "promise" they will return a value
- Correct or representing an error
A Promises can be in one of three states:
- Fulfilled (resolved, succeeded)
- Rejected (an error happened)
- Pending (unfulfilled yet, still being computed)

Promises

Promise objects can be used in code as if their value is known
- Actually we attach code which executes
- When the promise is fulfilled
- When the promise is rejected
- When the promise reports progress (optionally)
Promises are a pattern
- No defined implementation, but strict requirements
- Initially described in CommonJS Promises/A

Promises

More specifically:
- Each promise has a .then() method accepting 3 params:
  - Success, Error and Progress functions
- All parameters are optional
So we can write:

promiseMeSomething()
  .then(function (value) {
      //handle success here
  }, function (reason) {
      //handle error here
  });

// Note: Provided promiseMeSomething returns a promise

Promises

Each .then() method returns a promise in turn
- Meaning promises can be chained
Promises enable us to:
- Remove the callback functions from the parameters and attach them to the "result"
- Make a sequence of operations happen
- Catch errors when we can process them

asyncComputeTheAnswerToEverything()
  .then(addTwo)
  .then(printResult, onError);

Promises

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1000);
    }, 1500)
} )

promise
    .then((value) => {
        console.log("Success " + value);
    })
    .catch((error) => {
        console.log("Error " + error);
    })

Promise Methods

Promise.all(iterable)
- Wait until all settled
Promise.race(iterable)
- Wait until 1 settles
Promise.reject(reason)
- Create a Promise that is already rejected
- Useful to not do async operation in some condition
Promise.resolve(value)
- Create a promise that is already resolved

Promise Methods - Example

let usersPromise = get('users.all');
let postsPromise = get('posts.everyone');

// Wait until BOTH are settled
Promise.all([usersPromise, postsPromise])
  .then((results) => {
  // results is an array of the responses
    myController.users = results[0];
    myController.posts = results[1];
  })
  .catch(() => {
    delete myController.users;
    delete myController.posts;
  })

JS DOM / AJAX
Telerik Academy Alpha

Front-End

Table of contents

Document Object Model

The DOM Tree

The DOM Tree

The DOM API

DOM Objects

Selecting DOM Elements

NodeLists

NodeLists

jQuery

What is jQuery?

Why use jQuery?

Installing jQuery

Selectors

Selectors

DOM Traversal

jQuery Objects

jQuery Object Properties

jQuery Object Properties

jQuery Events

AJAX

What is AJAX?

What is AJAX?

AJAX Requests

AJAX jQuery

jQuery AJAX

Promises

Promises

Promises

Promises

Promises

Promise Methods

Promise Methods - Example

Questions?

JS DOM / AJAX Telerik Academy Alpha

Front-End

Table of contents

Document Object Model

The DOM Tree

The DOM Tree

The DOM API

DOM Objects

Selecting DOM Elements

NodeLists

NodeLists

jQuery

What is jQuery?

Why use jQuery?

Installing jQuery

Selectors

Selectors

DOM Traversal

jQuery Objects

jQuery Object Properties

jQuery Object Properties

jQuery Events

AJAX

What is AJAX?

What is AJAX?

AJAX Requests

AJAX jQuery

jQuery AJAX

Promises

Promises

Promises

Promises

Promises

Promise Methods

Promise Methods - Example

Questions?

JS DOM / AJAX
Telerik Academy Alpha