Понравилась статья?Поделись с друзьями!

Рейтинг:   / 1
ПлохоОтлично 

                            JavaScript-Dom(Document Object Model)

Динамическое создание элементов средствами JavaScript-DOM

Динамическое создание JavaScript DOM элемента не такая сложная операция. Фактически, весь код может уместиться в одну строку.

document.getElementsByTagName('BODY')[0].appendChild(document.createElement('DIV'));

Выглядит не слишком читабельно... разделим на этапы:

1. Определение parent (от Англ. - "родитель", родительский DOM-элемент).
У каждого тега (DOM элемента) есть свой родитель - такой же тег, в котором располагается дочерний элемент. Чтобы создать новый элемент, нам необходимо получить родительский элемент для вставки дочернего.
Методов получения тегов всего 4:
- document.getElementsByTagName(tag_name) - получает все элементы (массив) с именем тега tag_name;
- document.getElementsByName(name) - получает все элементы (массив) с атрибутом name;
- document.getElementsByClassName(name) - получает все элементы (массив) с атрибутом name (этот метод работает не во всех браузерах);
- document.getElementById(id) - получает элемент (всего 1) с атрибутом id;

2. Создание элемента.
Ну, этот шаг довольно простой:
document.createElement('DIV') - нам нужно всего лишь указать имя тега.

3. Прикрепление (в прямом смысле этого слова) новоиспеченного элемента к родителю.
Еще одна элементарнейшая вещь:
parent.appendChild(tag) - parent - родитель, tag - только что созданный элемент.


Листинг кода:
var parent = document.getElementsByTagName('BODY')[0];
var tag = document.createElement('DIV');
parent.appendChild(tag);


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

Листинг кода функции:
function create_element(parent, tag_name, text, attrs)
{
    var new_tag = document.createElement(tag_name);
    for (id in attrs)
    {
        new_tag[id] = attrs[id];
    }
    if (text != '')
    {
        var text_node = document.createTextNode(text);
        new_tag.appendChild(text_node);
    }
    parent.appendChild(new_tag);
}

parent - здесь поиск родительского элемента остается за программистом. Функция принимает всего лишь ссылку на объект-родитель;
tag_name - имя нового тега;
text - текст, который будет находиться внутри тега (необязательный параметр);
attrs - объект с атрибутами (в формате {имя : значение, ...});

Листинг кода примера использования функции:
window.onload = function()
{
    var parent = document.getElementsByTagName('BODY')[0];            //    Получаем ссылку на элемент BODY
    create_element(parent, 'DIV', 'Какой-то текст', {                //    Задаем параметры parent, tag_name, text, attrs:
        'align' : 'right',                                            //    позиционирование справа
        'className' : 'class-name'                                    //    и имя класса class-name
    });
}

Очень важным условием является наличие строки window.onload = function() - анонимная функция подвешенная на событие window.onload, вызываемое при полной загрузки документа. Без использования этого события JavaScript завершит работу с ошибкой 'parent is undefined' на строке 'parent.appendChild(new_tag);', т.к. мы захотели получить элемент BODY еще до его создания.

Добавить комментарий


Защитный код
Обновить

Комментарии  

 
Robert_Anderson
+1 # Robert_Anderson 02.10.2012 09:21
DOM - один из вариантов применения javascript. Описанный скрипт позволяет создать вложенный в тэг BODY блок DIV, а также определить содержание атрибутов данного элемента и создать вложенный в него текст.
Ответить | Ответить с цитатой | Цитировать
 

Дополнительная информация