В Joomla используется js фрейморк mootools, и поэтому было бы неплохо ориентироваться в основных моментах. А основные моменты начинаются с селекторов $, $$, $E и $ES.
Само собой читаем описание Element.
Но чтобы покороче) можно посмотреть, например, следующую статью
Вот перевод в общих словах:
$ (dollar) функция
Большинство людей думает, что это только сокращенное для document.getElementById (), но фактически это не так. $ () берет один аргумент. Этот аргумент называют смешанным (mixed) в терминах php, потому что он может быть строкой, или элементом DOM. Всякий раз, когда аргумент - строка, возвращается элемент с указанным id со всеми применимыми методами Element. Когда аргумент - элемент DOM, просто возвращается переданный элемент с примененными к нему всеми методами Element. Вот, как это работает:
var w3cEl = document.getElementById('myDiv'); // w3cEl => W3C dom element
var mooEl = $('myDiv'); // mooEl => Mootools Element
var mooEl2 = $(w3cRef); // mooEl2 => Mootools Element
var mooEl3 = $(mooEl2); // mooEl3 => mooEl2
Таким образом функция $ применяет Element методы к своему аргументу. Когда передается элемент Mootools, $ это обнаруживает и никакие методы не применяет, потому что аргумент уже имеет эти методы (см. пример выше mooEl3).
$$ (double dollar) функция
Двойная долларовая функция больше походит на document.getElementsByTagName (), оба возвращают массив элементов.
var w3cArr = document.getElementsByTagName('div'); // w3cArr => Array of W3C dom elements
var mooArr = $$('div'); // mooArr => Array of Mootools Elements
Но $$ может сделать больше. Она принимает один или более css селекторов (или элементов) и возвращает множество элементов, соответствующих этим селекторам:
$$('a.external'); // => Array of links with class 'external'
$$('a[href=#]'); // => Array of links with href="#"
$$('form input[disabled]'); // Array of input elements inside a form with a disabled attribute
$$('form input[disabled=disabled]'); // Array of disabled input elements inside a form (valid XHTML)
$$('div[class^=foo]'); // => Array of divs with classname starting with 'foo'
$$('[class$=bar]'); // => Array of elements with classname ending with 'bar'
$$('*[class$=bar]'); // => Returns the same as the previous selector
$E функция
Эта функция - весьма аналогична функции $. Первый аргумент $E - строка css селектора, и возвращается, первый найденный селектором элемент. Второй элемент - фильтр (id строка или элемент DOM). Фильтр играет роль области видимости. Так вместо того, чтобы передавать id долларовой функции, Вы можете передать css селектор к $E.
$E('div#foo'); // => Same as $('foo')
$E('ul#bar li'); // => The first list item of the unordered list with id 'bar'
$E('form input[type=checkbox]'); // => First checkbox of the first form
$E('input[type=checkbox]', 'myForm'); // => First checkbox of the element with id 'myForm'
$ES (Element.getElements) функция
$ES функция является почти такой же как $$ и $E функции. Первый аргумент - css селектор, и второй аргумент - фильтр. $ES возвращает, множество элементов соответствующих css селектору, который выбирает в элементе фильтра.
$ES('a.external'); // => Same as $$('a.external')
$ES('a.external', document); // => Same as $ES('a.external')
$ES('input', 'myForm'); // => Array of input elements within the element with id 'myForm'
$ES('input[type=text]', 'myForm'); // => Array of textbox elements within the element with id 'myForm'