DOM Manipulation and Event Handling

I thought this was a very lengthy but interesting topic I had to dive into this week. At first the syntax of jQuery frighten me… So right off the bat I was at odds with the JavaScript library, indifferent on what I’d experience and gain from it. But it turned out I worried for nothing, in fact I enjoyed my time learning jQuery DOM(Documented Object Model) Manipulation and Event Handling. The code school course explained jQuery fantastically well, I had a fun time learning about traversing and filtering, event handling and more.

The DOM is a tree like structure created by browsers to find html content with JavaScript. So when we put in a request inside of a url the browser loads piece by piece of html into the DOM. All browsers use JavaScript, in order to interact with a browser, JavaScript gives developers a language to interact with the DOM.

Examples:

To access the DOM using jQuery = $(‘document’);

To search for tags = $(‘h1’)

To return the text of a tag = $(‘h1’).text();

To change it = $(‘h1’).text(‘This is changing the original text’)

To listen for they “I’m Ready” = $(document).ready(function() {

<code>

});

Write jQuery within application.js:

  1. download jQuery
  2. load it in HTML document = <script src=”jQuery.min.js”></script>
  3. Start using it = <script src=”application.js”></script>

Traversing the DOM:

Selecting descendant = $(‘#destinations li’); “li = descendant”, “destinations = parent” The space between destinations and li matters.

To find the direct children, use the child selector = $(‘#destinations > li’); The “>” says we’re we’re looking for the direct descendant.

To find elements with either a “promo” class or a “france” ID, use multiple selectors = $(‘.promo, #france’); The “,” matters.

To select the first item of the unordered list = $(‘#destinations li:first’); or (‘li:first’); “first” is a filter.

To select every other = $(‘#destinations li:odd’); The index of a list starts at zero keep that in mind.

To find the direct children elements and use the :even selector = $(‘#tours > li:even’);

Traversing:

To filter by traversing = $(‘.destinations’).find(‘li’); the “destinations” class is a selector and “find();” is a traversal.

To filter by traversing = $(‘li’).first(); or .last();

Walking the DOM:

$(‘li’).first();

$(‘li’).first().next();

$(‘li’).first().next().prev();

Walking up the DOM:

From child to parent

$(‘li’).first();

$(‘li’).first().parent();

Walking down the DOM:

From parent to child

$(‘#destinations’).children(‘li’);

Manipulating the DOM:

Appending to the DOM = $(document).ready(function() {

var price = $(‘<p> From $399.99</p>’);

$(‘vacations’).append(price);

$(‘button’).remove();

});

More Examples:

price.insertBefore(<element>); -Added before the class.

price.insertAfter(<element>); -Added after the class.

price.prependTo(<element>); -Added as the first child of a class.

price.appendTo($(‘.vacation’)); -Adds a node as the last child element of a class.

This Blog Post will be updated later…

Like what you read? Give Ahkeem Lang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.