JavaScript technologies


Horváth, Győző
senior lecturer

Financed from the financial support ELTE won from the Higher Education Restructuring Fund of the Hungarian Government


DOM abstraction

Basic conceptions

  • DOM abstractions (browser-independence)
  • Convenient API
  • Further services

Main concept

  • Selecting elements
  • Operations on the selected elements

Selecting elements

  • CSS 1,2,3 selectors
    • additional jQuery selectors
$("#profilkep, #adatok");
$("ul li.adat b");
$("ul li:first");


  • DOM traversal (selecting elements with relative paths)
  • Manipulating attributes
  • Manipulating elements
    • creating
    • modifying
    • deleting
  • Event handling
  • Style manipulations
  • AJAX abstraction (later in this course)
  • Other helper functions

DOM traversal

  • children (children()), descendants (find())
  • parent(s) (parent(), parents(), parentsUntil()), closest ancestor (closest())
  • siblings (siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil())
// selecting the parent element
// selecting the next element
// selecting the previous element
// selecting the previous element, but only if its classname is 'data
// the first ancestor of the element which is div
// the descendants of the element which are of class 'data'
// the first of the selected items
// the last of the selected items
// the third of the selected items
// the siblings of the element which are h1

Changing the scope of the selected items

  • filtering (is(), has(), filter(), first(), last())
  • adding (add())
// Filtering
// adding all the li elements to the jQuery object of the already selected element
// removing all the li elements from the selected elements
$("#dataDiv, li").not("li");  
// only the images remain among the selected elements

//Back-step selection
$("#dataDiv")                                        // scope: div#dataDiv
    .find("li")                                      // scope: div#dataDiv
        .css({ padding: "5px" })                     // scope: div#dataDiv li
        .find("b")                                   // scope: div#dataDiv li
            .html('Modifying texts!!!')              // scope: div#dataDiv li b
            .end()                                   // scope: div#dataDiv li b
        .end()                                       // scope: div#dataDiv li
    .animate({ paddingTop: '+=100' }, 200); 

Iterating the selected items

var labels = [];
$("b").each(function() {
    labels.push( $(this).text().replace(':','') );
labels.join(', ');

Changing the HTML structure

  • creating element(s) (jQuery(HTMLString))
  • copying elements (clone())
  • adding and moving element (append(), prepend(), after(), before(), appendTo(), prependTo(), insertAfter(), insertBefore(), replace())
  • deleting element (remove(), detach())
  • content management (html(), text())
  • attribute management (attr())

Changing the HTML structure

// Creating new jQuery objects
var $a = $("<a class='12a' href='index.html'><b>Hello</b></div>");

// Similar element definition
var $a = $("<a />", {
               className: '12a',
               href: 'index.html',
               html: '<b>Hello</b>'

// Changing content and attribute value
$("<a />")
    .attr('href', 'index.html')

$("body").find('.12a').attr('href'); // => 'index.html'
$("body").find('.12a').html();       // => '<b>Hello</b>', HTML content
$("body").find('.12a').text();       // => 'Hello', content without tags

//inserting and deleting jQuery objects
$a.appendTo($("body"));        // inserting $a to the end of the body
$a.prependTo($("body"));       // inserting $a to the top of the body
$a.insertAfter($("#dataDiv")); // inserting $a after dataDiv
$a.insertBefore($("#dataDiv"));// inserting $a before dataDiv
$a.remove();                   // deleting $a

//The same from another point of view

Style management

  • css()
  • addClass(), removeClass(), toggleClass(), hasClass()
  • animate()
  • show(), hide(), toggle()
  • fadeIn(), fadeOut(), fadeToggle()
  • slideDown(), slideUp(), slideToggle()
  • height(): computed height
  • innerHeight(): height + padding
  • outerHeight(): height + padding + border (+margin with true parameter)
  • width(), innerWidth(), outerWidth(): see height
  • position(): location relative to the parent object (top, left)
  • offset(): location relative to the document (top, left)
  • scrollTop(), scrollLeft()

Event handling

  • $obj.on('type', fn): direct assignment
  • $obj.on('type', 'selector', fn): event delegation
$('table').on('click', 'td', function (e) {

$('table').on('click.myGame', 'td', function () {});
$('table').off('click.myGame', 'td', function () {});

//Even better
$('table').off('click.myGame').on('click.myGame', 'td', function () {});


Rewrite the previous application using jQuery!

jQuery CDN

UI elements

class ListView {
    constructor(props) {
        props = props || {};
        this.list = props.snippets;
        $('#text-filter').on('keyup', this.onKeyUp.bind(this));
    makeListItemsFromArray(arr) {
        /* ... */
    onKeyUp(e) {
        var filterText = e.currentTarget.value;
        var filteredTitles = this.list.getTitles(filterText);
        $('#code-list').html( this.makeListItemsFromArray(filteredTitles) );