code is art 

В новых браузерах для перемещения по DOM-дереву появилась возможность использовать интерфейс «Element Traversal», который позволяет искать элементы, исключая текстовые узлы так, как это происходит в Internet Explorer, при использовании стандартных firstChild, lastChild, nextSibling и previousSibling, что увеличивает скорость поиска элементов.

Читать полностью

Функция prepend добавляет новый или перемещает существующий узел в начало списка дочерних элементов текущего узла и возвращает копию объекта _$, содержащую ссылку на новый/перемещенный узел.

Входные параметры

В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.

• prepend('div') — функция создаст новый узел с именем тега DIV и поместит его в начало списка дочерних элементов текущего узла.
• prepend(node) — функция переместит узел, доступный по ссылке node, в начало списка дочерних элементов текущего узла.

Пример использования

$('test').prepend('div');

В начале списка дочерних элементов узла с идентификатором test будет добавлен новый узел с именем тега DIV.

Аналог без использования фреймворка

function prepend(id, tag) {
  var node = document.getElementById(id),
  first = node.firstChild,
  newNode = document.createElement(tag);
  node.insertBefore(newNode, first);
  return newNode;
}

prepend('test', 'div');

Функция append добавляет новый или перемещает существующий узел в конец списка дочерних элементов текущего узла и возвращает копию объекта _$, содержащую ссылку на новый/перемещенный узел.

Входные параметры

В качестве входного параметра функция может принимать строку с именем тега нового узла или ссылку на уже существующий узел.

• append('div') — функция создаст новый узел с именем тега DIV и поместит его в конец списка дочерних элементов текущего узла.
• append(node) — функция переместит узел, доступный по ссылке node, в конец списка дочерних элементов текущего узла.

Пример использования

$('test').append('div');

В конец списка дочерних элементов узла с идентификатором test будет добавлен новый узел с именем тега DIV.

Аналог без использования фреймворка

function append(id, tag) {
  var node = document.getElementById(id),
  newNode = document.createElement(tag);
  node.appendChild(newNode);
  return newNode;
}

append('test', 'div');

Функция parent возвращает копию объекта _$, содержащую родительский узел текущего узла.

Пример использования

var node = $('test').parent();

В переменную node будет помещен объект с ссылкой на родительский узел текущего узла с идентификатором test. Чтобы получить сам узел, необходимо обратиться к атрибуту node возвращаемого объекта или воспользоваться функцией el.

var node = $('test').parent().node;
//или
var node = $('test').parent().el();

Аналог без использования фреймворка

function parent(id) {
  return document.getElementById(id).parentNode;
}

var node = parent('test');

Функция child возвращает массив дочерних элементов текущего узла.

Входные параметры

1. Первый параметр используется для выбора элементов по имени тега. Необязательный.

   • child() — пустое значение, функция вернет массив всех дочерних узлов.
   • child('div') — cтрока с именем тега, функция вернет массив дочерних узлов с именем тега DIV.
   • child('div h1 p') — строка со списком имен тегов, разделенных пробелами, функция вернет массив дочерних элементов с именами тегов DIV, H1 и P.
   • child(['div', 'h1', 'p']) — массив строк с именами тегов, результат выполнения функции аналогичен предыдущему пункту.

2. Второй параметр логического типа так же необязателен и используется для переключения режима поиска дочерних элементов. Может принимать пустое значение или true. Если указано значение true, то будут выбраны все дочерние элементы, текущего узла, соответствующие критериям поиска, указанным в первом параметре, иначе — только непосредственно дочерние по отношению к текущему узлу. Допускается сочетание этого параметра со всеми вариантами первого параметра:

   • child(true)
   • child('div', true)
   • child('div h1 p', true)
   • child(['div', 'h1', 'p'], true)

Пример использования

var childArray = $('test').child('li');

В переменную childArray будет помещен массив элементов, с именем тега LI, являющихся непосредственно потомками текущего узла с идентификатором test.

Аналог без использования фреймворка

function child(id, tag) {
  var node = document.getElementById(id),
  children = node.childNodes,
  i, length = children.length, array = [];
  tag = tag.toUpperCase();
  for(i = 0; i < length; i++) {
    if(children[i].tagName == tag) {
      array.push(children[i]);
    }
  }
  return array;
}

var childArray = child('test', 'li');