DIV’ная верстка странички с помощью JavaScript
27 ноября 2012 года, Размещено в категории: Интересное
Удивительно полезен JavaScript. Он прекрасно подходит для создания динамического содержимого сайта. И хотя этот язык программирования считают объектно-ориентированным, однако можно сказать, что он еще не совсем «готов» как объектно-ориентированный. В нем есть объектный тип, возможность создания объекта и даже есть наследование, однако классов как таковых в нем еще нет. Несмотря на определенные сложности этого языка, а также на сложности в понимании браузерами разных конструкций JavaScript, этот язык остается весьма популярным среди разработчиков, позволяя получать доступ к разного рода элементам веб-страницы.
Как известно, представление данных в сети интернет осуществляется при использовании языка гипертекстовой разметки или HTML. На сегодняшний момент уже появилась пятая версия этого продукта. Наиболее популярной версткой веб-страниц остается так называемая «резиновая» верстка или верстка с использованием тега <div>. JavaScript в свою очередь позволяет создавать объекты документа страницы разного уровня вложенности, в том числе и элемент <div>. Т.е. страничку можно сверстать, пользуясь исключительно средствами языка JavaScript. В этом случае необходимо понимать, что существует так называемая объектная модель документа или DOM, несколько по-разному понимаемая различными браузерами.
Чтобы сверстать «резиновую» веб-страницу нам необходимо будет в родительском элементе, которым станет тег <body>, создать элемент <div>. В этом случае воспользуемся методом createElement объекта document. Это будет выглядеть примерно так:
var contain = document.createElement(‘div’);
Таким образом, мы создадим элемент странички – тег <div>. Далее, мы сможем определить для него стиль в css-файле, к примеру. Чтобы стиль смог работать для данного элемента, необходимо будет записать id созданного элемента, что будет выглядеть примерно так:
contain.id = “название стиля элемента, определенного в css-файле”;
Практически элемент страницы создан. Для него можно прописать событие и обработчик, который определить чуть ниже или же в другом файле с расширением .js. Однако следует понимать, что хотя мы и создали данный элемент, но его на страничке еще не будет видно. Этот элемент необходимо еще вставить в страничку в требуемое место. В этом случае есть возможность воспользоваться методами appenChild() или же insertBefore(). Первый метод получает в качестве аргумента тот объект, что мы создали, и добавляет его последним в ряду других узлов. Второй метод принимает созданный нами узел, а также тот узел, перед которым мы хотим вставить новый элемент. Если второй аргумент метода insertBefore() окажется равен null, то этот метод не будет отличаться от appenChild().
Таким образом, можно сверстать самые разные элементы страницы. Но следует помнить, что главнейшую роль в этой верстке отыгрывает объектная модель документа DOM, с помощью которой производится доступ к элементам веб-страницы. Ведь только зная к какому элементу необходимо обратиться есть возможность работать с ним – добавить другой элемент перед ним, удалить узел или же модифицировать его, применив к нему результат работы обработчика того или иного события.
