JavaScript для «маленьких». DOM (часть 1)

10 Май
2012

Здравствуйте, Блогавчане! Я предлагаю вам небольшой курс статьей, для «маленьких» JavaScript-программистов, которые только начали изучать этот удивительный и динамический язык, но которым уже хочется сделать свое что-нибудь такое «эдакое». Итак, что же мы рассмотрим по ходу этой цепочки статей:

  • DOM;
  • EVENT;
  • STYLE;
  • AJAX;
  • Другие полезные функции.


Давайте наконец-то приступим к изучению теории по «захвату мира JavaScript» и рассмотрим часть первой темы – DOM-структура документа. Что же такое DOM(Document Object Model)?

Для начала я предлагаю вам отвлечься, закрыть глаза и представить себя в саду у бабушки в деревне. У нее там много всего: грядки с огурцами и помидорами, кусты смородины, может быть крыжовник и много-много еще всяких разных растений. Но вас больше всего привлекает большая яблоня, на которой висит «любимая Антоновка». Антоновка наша разрослась до небывалых размеров. У нее много веток, на которых в свою очередь растут другие ветки, а уже на них растут кисленькие яблочки. Теперь давайте откроем глаза и решим линейное уравнение с одной неизвестной – DOM.

Да DOM – это наша любимая Антоновка, где ветки – это узлы DOM, которые связаны между собой, а яблоки – это «дети» узлов, которые в свою очередь являются также узлами.

Вот пример структуры DOM:

<p><b>Антоновка</b> - любимый сорт.

image
Каждый узел нашего DOM имеет ряд свойств, которые помогают перемещаться с ветки на ветку:image
  • parentNode – свойство, указывающее на родительский узел;
  • firstChild и lastChild – свойства, помогающие перемещаться к первому и соответственно к последнему «яблоку» узла;
  • nextSibling и previousSibling – эти свойства служат для перемещения с «ветки на ветку».


Каждый узел DOM также имеет определенное значение свойства nodeType:
  • 1 – это значение имеет большинство элементов HTML таких как:
    <a>, <div>, <form>,<p>,<body>;
  • 3 – это значение имеют все текстовые узлы документа.


Есть еще много интересных свойств и методов, которые мы рассмотрим по ходу следующих статей касающихся DOM, но пока остановимся и закрепим материал про нашу Антоновку.

P.S.
Вот небольшая теория, касающаяся наших «яблок» и «веток», которая впоследствии ляжет в основу функции для работы с DOM.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх