DOM API

Познакомьтесь с некоторыми манипуляциями DOM, которые можно выполнить без большой и тяжёлой библиотеки jQuery. Во многих случаях jQuery совершенно ненужно подключать к веб-странице, для получения доступа к содержимому достаточно DOM API.

Оглавление:
  1. Создать элемент
  2. Вставить элемент
  3. Вставить дочерний элемент
  4. Переместить элемент
  5. Удалить элемент
  6. Добавить класс CSS
  7. Удалить класс CSS
  8. Добавить атрибут
  9. Удалить атрибут
  10. Заменить текст
  11. Добавить стиль
Получить доступ к содержимому документа
Что нам стоит дом построить

Создать элемент

jQuery спасает нас от написания больше строк кода, но не спасает от лишних байтов и запроса HTTP на библиотеку.

jQuery:

$('<div></div>');

DOM API:

// IE 5.5+
document.createElement('div');

Вставить элемент

JavaScript позволяет вставлять элементы до и или после указанного селектора. Для примера создайте несколько элементов один за другим.

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Что нужно сделать, чтобы создать новый элемент с идентификатором point и вставить его между первыми двумя тегами div.

<div id="one"></div>
<div id="point"></div> <!--вставить элемент-->
<div id="two"></div>
<div id="three"></div>

jQuery:

$('#one').after('<div id="point"></div>');

DOM API:

// IE 4+
document.getElementById('one').insertAdjacentHTML(
'afterend', '<div id="point"></div>'
);

Вставить новый элемент перед первым div.

<div id="zero"></div>  <!--вставить элемент-->
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

jQuery:

$('#one').before('<div id="zero"></div>');

DOM API:

// IE 4+
document.getElementById('one').insertAdjacentHTML(
'beforebegin', '<div id="zero"></div>'
);
К началу

Вставить дочерний элемент

Допустим, у нас есть список:

<ul id="parent">
    <li id="google"></li>
</ul>

… и мы хотим создать новый элемент и сделать его первым дочерним.

<ul id="parent">
    <li id="facebook"></li> <!--новый элемент-->
    <li id="google"></li>
</ul>

jQuery:

$('#parent').prepend('<li id="facebook"></li>');

DOM API:

// IE 4+
document.getElementById('parent').insertAdjacentHTML(
'afterbegin', '<li id="facebook"></li>'
);

Сделать последним дочерним элементом.

<ul id="parent">
    <li id="google"></li>
    <li id="facebook"></li> <!--новый элемент-->
</ul>

jQuery:

$('#parent').append('<li id="facebook"></li>');

DOM API:

// IE 4+
document.getElementById('parent').insertAdjacentHTML(
'beforeend', '<li id="facebook"></li>'
);

Не много усложним применение DOM. Нам нужно чтобы дочерний элемент появлялся после наведения курсора на блок, и исчезал если курсор убрать с блока.

jQuery:

$(document).ready(function() {
  $('#parent').hover(
    function() {
      $(this).prepend('<li id="facebook"></li>');
    },
    function() {
      $('#parent li#facebook').remove();
    }
  );
});

DOM API:

<ul id="parent" onmouseover="mOver(this)" onmouseout="mOut(this)">
    <li id="google"></li>
</ul>
<script>
function mOver(obj)
{
obj.insertAdjacentHTML('afterbegin', '<li id="facebook"></li>');
}

function mOut(obj)
{
obj.removeChild(obj.childNodes[0]);
}
</script>
К началу

Переместить элемент

Переместить элемент который находится не в блоке parent, и сделать его последним дочерним.

<div id="parent">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>
<div id="orphan"></div>  <!--переместить этот элемент-->

jQuery:

$('#parent').append($('#orphan'));

DOM API:

// IE 5.5+
document.getElementById('parent').appendChild(
document.getElementById('orphan')
);

Результат:

<div id="parent">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="orphan"></div> <!--переместили-->
</div>

Сделать первым дочерним элемнтом.

jQuery:

$('#parent').prepend($('#orphan'));

DOM API:

// IE 5.5+
document.getElementById('parent').insertBefore(
document.getElementById('orphan'), 
document.getElementById('c1'));
);

Результат:

<div id="parent">
    <div id="orphan"></div>
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>
К началу

Удалить элемент

Чтобы удалить элемент из DOM, достаточно знать его идентификатор.

jQuery:

$('#foobar').remove();

DOM API:

// IE 5.5+
document.getElementById('foobar').parentNode.removeChild(
document.getElementById('foobar')
);

Добавить класс CSS

Добавить класс CSS для элемента div.

<div id="foo"></div>

Чтобы получить такой код.

<div id="foo" class="bold"></div>

jQuery:

$('#foo').addClass('bold');

DOM API:

document.getElementById('foo').classList.add('bold');
document.getElementById('foo').className += 'bold';

Подробнее об этом API на странице classList.

Удалить класс CSS

Уберем класс у элемента div c идентификатором foo.

jQuery:

$('#foo').removeClass('bold');

DOM API:

document.getElementById('foo').classList.remove('bold');
document.getElementById('foo').className = 
document.getElementById('foo').className.replace(/^bold$/, '');

Добавить атрибут

Добавим атрибут для элемента div.

<div id="foo"></div>

Допустим элемент div на самом деле работает как кнопка. Мы должны добавить подходящий атрибут role, чтобы сделать этот элемент более доступным.

jQuery:

$('#foo').attr('role', 'button');

DOM API:

// IE 5.5+
document.getElementById('foo').setAttribute('role', 'button');

Удалить атрибут

Удалить атрибут у элемента.

jQuery:

$('#foo').removeAttr('role');

DOM API:

// IE 5.5+
document.getElementById('foo').removeAttribute('role');

Заменить текст

Разметка в которой нужно заменить текст.

<div id="foo">Привет Мир!</div>

… нам нужно заменить текст Привет Мир! на Сам с приветом! :).

jQuery:

$('#foo').text('Сам с приветом!');

DOM API:

// IE 5.5+
document.getElementById('foo').innerHTML = 'Сам с приветом!';

// если нужно только добавить текст
document.getElementById('foo').innerHTML += '<b>Сам с приветом!</b>';

// IE 5.5+ !Firefox
document.getElementById('foo').innerText = 'Сам с приветом!';

// IE 9+
document.getElementById('foo').textContent = 'Сам с приветом!';
К началу

Добавить стиль

Добавить стиль содержанию может понадобится для некоторых уникальных экземпляров.

<span id="note">Примечание!</span>

Сделаем его полужирным.

jQuery:

$('#note').css('fontWeight', 'bold');

DOM API:

// IE 5.5+
document.getElementById('note').style.fontWeight = 'bold';

В DOM API появилось много нового, которое без DOM-shim не работает в < IE8.

автор JavaScript , 358
htmlhook.ru | Скрипты для веб-приложений