HTML DOM & JQuery

“Less is more”

Compiled from Wikipedia.org, W3Schools.com & JQuery.com

by Abdul Hafeez

HTML DOM & JQuery : Agenda

• DOM – Document Object Model

• DOM History

• Node Document Tree

• Find & Access Nodes

• What is JQuery

• Why JQuery

• JQuery Philosophy

• How to assign events using JQuery

• Asynchronous Dynamic Fun

DOCUMENT OBJECT MODEL• Platform and language independent standard object model for representing HTML or

XML related formats• Level 1 DOM specification is published in 1998 by W3C, and it allowed to and

manipulation of every single element.• No cross browser incompatibility• DOM is the way JavaScript sees its containing HTML page• DOM supports navigation in any direction• SAX (Simple API for XML) is a popular alternative to the DOM• DOM is separated in different parts

– Core– XML– HTML

• And into different levels, Level 1/2/3

HTML DOM

• Defines a standard way for accessing and manipulating HTML documents

• Everything in an HTML document is a node.– Document Node : Entire Document– Element Node : HTML tags– Text Node : Texts in element node– Attribute Node : HTML attribute– Comment Nodes

• DOM presents an HTML document as a tree structure (a node tree) with elements, attributes and texts.

The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level.

• All the nodes in a node tree have relationships to each other (e.g. parent/child).

HTML DOMContd….

• With JavaScript we can restructure an entire HTML document. We can add, remove, change or reorder items on a page.

• To do so, JavaScript needs access to all elements in the HTML document, and this access to the elements is given through DOM.

HTML DOMContd….

Node/Document Tree• All nodes have relationships to each other• Except document node, every other node has a parent node• Most element nodes have child nodes• Nodes might share a parent and we call them siblings• Nodes can also have descendants, meaning all the nodes that are children of a node,

or children of those children and so on.• Nodes can also have ancestors. Ancestors are nodes that are parents of a node, or

parents of this parent and so on.

Find & Access Nodes• JavaScript provides methods and properties to find and access nodes• Using getElementById() and getElementByTagName() mothods

– It doesn’t follow document structure– Can find any HTML element in the entire document.– Gives us the HTML element(s) we need regardless of where they are in the document– getElementByTagName(‘p’) gives us all the <p> elements in the document– getElementById(‘RT’) returns the correct element whether it is hidden in the tree

• Using parentNode, firstChild and lastChild properties of an element node– Follows document structure and allow short-distance travel in the document

What is jQuery

• An open source JavaScript library that simplifies the interaction between HTML and JavaScript

• Is designed to change the way you write JavaScript

Why jQuery?

• Fully documented• Great community• Tons of plugins• Small size (15kb)• Everything works in IE 6+, Firefox, Safari 2+ and Opera

9+• Simplifies how you handle events, perform animations or

add Ajax interactions• And it is fast• Can learn in 30 minutes

jQuery Philosophy

• (Almost) every operation boils down to:– Find some stuff– Do something to it

jQuery

• Select all <div> tags from the document• document.getElementsByTagName(‘div’)• jQuery(‘div’)• $(‘div’)

• Select an element whose id is ‘DX’• document.getElementById(‘DX’)• $(‘#DX’)• $(‘#DX’).hide(‘slow’)

jQuery

• Add a class (css) to all links in a document• $(‘a’).addClass(‘cssURL’)

• Find all divs that do not have an id attribute• $(‘div’).not(‘[@id]’)

• Find the fifth paragraph on the page, then find the next element (its direct sibling)

• $(‘p’).eq(4).next()

Contd….

jQuery

• jQuery can take a snippet of HTML and it will turn into a DOM element

• var div = $(‘<div>Dexter is in lab</div>’);• div.addClass(‘cssDiv’);• div.attr(‘id’,’DX’);

• Chaining• var div = $(‘<div>text</div>’).addClass(‘cd’).attr(‘id’, ‘DX’);

• div.appendTo(‘div#FX’)

Contd….

jQuery

• Find this, do something

$(‘#DX’).show(‘medium’);$(‘#FX’).addClass(‘css’);

• Chainable events: find this, do several things in succession

$(‘#GX’).fadeIn(‘slow’).addClass(‘css’).html(‘Text’);

Contd….

How do you assign events?

• Don't add "onclick" to your markup: use jQuery to find and assign events

$(‘#control’).click(function() {$(‘#DX’).show().addClass(‘css’);

});

Asynchronous Dynamic Fun

• Asynchronous HTML and HTTP

$(‘#control’).click(function() {$(‘#DX’).load(‘service.php’);

});

Asynchronous Dynamic Fun

• JSON Style (JavaScript Object Notation)

$(‘#control’).click(function() {$.getJSON(‘service_json.php’, function(json)() {

alert(json);});

});

• $.get( url, params, callback )Load a remote page using an HTTP GET request.

• $.getScript( url, callback )Loads and executes, a remote JavaScript file using an HTTP GET request.

• $.post( url, params, callback )Load a remote page using an HTTP POST request.

Contd….

References• http://www.jquery.com• http://docs.jquery.com• http://jquery.bassistance.de/api-browser• http://www.learningjquery.com• http://15daysofjquery.com

Q&A

Contact

Abdul Hafeezhabdul@in.com

http://in.linkedin.com/in/habdul http://twitter.com/hafeez1216

http://drupal.coolpage.biz http://drupal.org/user/315349