Уроки Mootools – Урок 6 – Манипуляции с HTML


Управление HTML элементами DOMа с помощью Mootools 1.2

В предыдущих уроках мы рассмотрели возможности выбора элементов DOMа страницы, как создавать массивы, функции, как создавать прослушку событий для определенных элементов DOMа, ну а в этом уроке мы заглянем еще глубже в то, какие возмоности манипулирования элементами HTML скрывает в себе Mootools библиотека 1.2. Я уже, наверное, не раз говорил, насколько мощные возможности скрывает в себе легкая библиотека Mootools 1.2, но хочу еще раз напомнить о том, что с ее помощью можно добавлять новые элементы в вашу страницу, удалять ненужные и изменять их стиль или параметры, и все это «налету».

Основы

.get()

Этот метод позволяет получать доступ к атрибутам элементов. Ипользование метода довольно просто:

//этот код вернет название тега элемента с id "id_name"
$('id_name').get('tag');
<div id="body_wrap">
    <span>Element</span><!-- код, указанный выше, вернул бы "span" -->
</div>

С помощью .get() можно получить не только название HTML тегов, но и такие аттрибуты, как id, name, value, href, src, class (вернет все классы, если элементу присвоенны несколько), с помощью ключевого слова text можно получить текстовое
содержимое элемента, а также многое другое.

.set()

.set() работает также, как и .get(), тоько этот метод устанавливает различные значения, а не получает их, а это очень пригодится при комбинировании с событиями, что позволяет изменять всякие значение уже после того, как загрузится страница.

//этот код установит атрибут href элемента с id #id_name на "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');
<div id="body_wrap">
    <!-- код, указанный выше изменить атрибут href на "http://www.google.com  -->
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>

</div>

.erase()

Метод .erase() позволяет удалить значение атрибута. Он работает также, как и предыдущие два: выбираете элемент, потом выбираете какой атрибут нужно удалить.

//этот код удалит значение атрибута href элемента с ID #id_name
$('id_name').erase('href');
<div id="body_wrap">
    <!-- код, указанный выше удалит значение атрибута href -->
    <a href="http://www.yahoo.com">Search Engine</a>

</div>

Передвижение

.inject();

Чтобы передвигать элемент по стрнице, можно использовать метод .inject();. Как и все остальные методы, которые мы уже рассмотрели, этот метод очень прост в использовании и предоставляет большие воможности управления пользовательским интерфейсом. Для того, чтоб ыиспользовать .inject();, давайте вначале создадим несколько элементов в переменной:

var elementA = $('elemA');

var elementB = $('elemB');
var elementC = $('elemC');

Этот код вставляет html код в переменные, что делает более легким их использование в Mootools.

<div id="body_wrap">
    <div id="elemA">A</div>

    <div id="elemB">B</div>
    <div id="elemC">C</div>

</div>

А теперь, чтобы изменить порядок сортировки элементов, можно использовать метод .inject() одним из четырех способов. Можно вставить элемент в:

  • в конец (bottom) (по умолчанию)
  • в начало (top)
  • до элемента (before)
  • после элемента (after)

Атрибуты bottom и top установят элемент в верхнюю или нижнюю часть выбранного элемента-контейнера. Атрибуты before и after, с другой стороны, установят необходимый элемент до или после другого элемента.

Итак, давайте изменим порядок элементов на A-C-B. Так как нам не нужно вставлять один элемент во внутрь другого, мы будем использовать атрибуты before и after.

//на человеческом языке звучит так:  вставить элемент C перед элементом B
elementC.inject(elementB, 'before');
//На русском:  вставить элемент B после элемента C
elementB.inject(elementC, 'after');

Создание новых элементов

new Element

Конструктор «new Element» можно использовать для того, чтобы создать новый элемент на вашей HTML странице. Процесс очень напоминает написание обычного HTML кода, с тем отличием, что мы исправим синтаксис, чтобы он был совместим с Mootools:

//вначале, вы присваиваете новой переменной значение "new Element"
//в которой и будет содержаться информация о новом элементе (div, a, span и т.д.)
var newElementVar = new Element('div', {

    //тут обозначаются все атрибуты элемента
    'id': 'id_name',
    'text': 'Я новый блок div',

    'styles': {
        //тут можно указать все параметры стиля элемента
        'width': '200px',
        'height': '200px',

        'background-color': '#eee',
        'float': 'left'
    }
});

Смотрите, у нас получился элемент, который можно вставить в какое-либо место, с помощью методов, которые мы рассмотрели чуть чуть ранее. Давайте начнем с такого простого примера HTML:

<div id="body_wrap">
    <div id="content_id">Тут у нас какое-нибудь содержимое</div>

</div>

Теперь конвертируем элемент #content_id в переменную:

var bodyWrapVar = $('body_wrap');

Аналогично тому, что мы рассмотрели немного ранее, мы можем вставлять созданные элементы в код страницы:

//на человеческом языке, звучит так: "вставить сверху bodyWrapVar элемент newElementVar"
newElementVar.inject(bodyWrapVar, 'top');

Таким образом, конечный результат выглядел бы так:

<div id="body_wrap">
    <!-- этот элемент был добавлен в верхнюю внутреннюю часть элемента-контейнера -->
    <div id="id_name">Новый блок</div>

    <div id="content_id">Какая-то муть</div>
</div>

Пример

Например, давайте создадим форму, которая бы позволяла добавлять новый элемент на страницу. Для начала, сделаем несколько полей input и кнопку button.

<div id="body_wrap">
        ID:  <input id="id_input" name="id" />

        text:  <input id="text_input" name="text" />
        <button id="new_div">create a new div</button>

</div>

А теперь напишем и код JavaScript Mootools, который позволит нам вставлять новые элементы в нашу страницу. Для начала добавим прослушку кнопки на предмет клика и создадим функцию с этим кодом:

var newDiv = function() {

    //в этой функции мы разместим код вставки нового элемента
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Затем нужно определиться с тем, какими переменными мы будем оперировать. Для того, чтобы использовать данные из форм input, нам нужно получить к ним доступ, а этим займется метод .get(); и его параметр value, который отвечает за значение того или иного элемента:

var idValue = $('id_input').get('value');

var textValue = $('text_input').get('value');

Теперь эти переменные, idValue и textValue, содержат значения соответствующих полей input. Так как нам нужно взять значение полей input тогда, когда пользователь кликает по кнопке «Создать новый div», нам нужно вставить этот код в функцию newDiv();, определенную немного ранее. Если бы мы брали значения вне функции,
действие бы происходило при загрузке страницы, а не при клике.

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);

});

Ну а дальше нам нужно будет схватить элемент, в который мы хотим вставить новый блок div:

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

    var bodyWrapVar = $('newElementContainer');
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Итак, у нас теперь есть значения полей input, тогда можно создавать новый элемент:

var newDiv = function() {

    var idValue = $('id_input').get('value');

 
    var textValue = $('text_input').get('value');

    var bodyWrapVar = $('newElementContainer');
 
 
    var newElementVar = new Element('div', {

        //эта строка устанавливает id элемента на значение поля <code>input</code>
    	'id':	 idValue,
        //эта строка передает значение поля <code>input</code>

        //для создания внутреннего текста блока
    	'html': textValue
    });
};
 
window.addEvent('domready', function() {

    $('new_div').addEvent('click', newDiv);
});

Ну, а теперь нам остается только вставить новый элемент в нашу страницу:

var newDiv = function() {
	//обратите внимание, что идет запрос на элемент с id="newElementContainer",

	//что означает, что такое элемент (в нашем случае, блок DIV),
	//должен быть заблаговременно создан
	var bodyWrapVar = $('newElementContainer');

 
	var idValue = $('id_input').get('value');
	var textValue = $('text_input').get('value');

 
 	var newElementVar = new Element('div', {
    	        'id': idValue,

    	        'text': textValue
	});
    //на русском это звучит так: вставить переменную newElementVar
    //в верхнюю часть внутри элемента bodyWrapVar
 
	newElementVar.inject(bodyWrapVar, 'top');

};
 
var removeDiv = function() {
    //эта строка удаляет внутренний html код

    //(все, что находится внутри тега div)
	$('newElementContainer').erase('html', '');

}
 
window.addEvent('domready', function() {
 
   $('new_div').addEvent('click', newDiv);

   $('remove_div').addEvent('click', removeDiv);
});

ID:

текст:


(а не попробовать ли слово “mootools” для ID? =) )

, , ,

  1. #1 by Алексей on 11.11.2009 - 10:33 pm

    Возникла проблема с последним примером в этом уроке.
    Блок просто не создается.
    Я даже пробовал копировать html и js код из примера, и библиотеку mootools тоже…
    А «firebug» пишет ошибка-
    element is null
    строка newElementVar.inject(bodyWrapVar, ‘top’);
    и несколько ошибок в самой библиотеке mootools.

    У кого такая же проблема?

    Кто может подсказать как исправить?

  2. #2 by Kikin on 30.11.2009 - 5:30 pm

    Исправь Опечатки (=_=) а то не солидно
    хотя и очень полезно
    Спасибо!

  3. #4 by Алексей on 30.11.2009 - 10:33 pm

    По .get() – первый пример вернет div
    По .erase() – третий пример: у ссылки не хватает id=\’id_name\’
    По .inject() – четвертый пример:
    по ходу там надо вот так:
    var elementA = $(‘elemA’);
    var elementB = $(‘elemB’);
    var elementC = $(‘elemC’);

    • #5 by proglammer on 30.11.2009 - 11:10 pm

      по .get() – не могу не согласиться
      по .erase() – спасибо за замечание. исправил.
      по .inject() – не понимаю, что имеешь ввиду. разве не так у меня?

  4. #7 by Вячеслав on 29.12.2009 - 6:46 pm

    Спасибо большое за ваши замечательные и понятные уроки!

  5. #8 by shaman on 08.12.2010 - 6:37 am

    Доброго времени суток. Нужна помощь
    Есть див с уникальным классом, внутри еще один див, с не уникальным классом (но уникальным в пределах родителя) внутри последнего текст
    Отдельно существует ссылка с id. Задача назначить текст внутри дива в качестве атрибута href ссылки

    • #9 by proglammer on 08.12.2010 - 10:05 am

      ну, тут все просто, на мой взгляд
      судя по твоему описанию есть такой хтмл код:

      <div class="parent">
         <div class="child">http://site.ru</div>
      </div>
      <a href="#" id='link'>text</a>
      

      тогда к твоей задаче я б написал такой код на мутулз:

      window.addEvent('domready', function(){
      // из-за того, что родительский так имеет атрибут CLASS, а не ID
      // селектор $ к нему не применим, т.к. он работает только с ID
      // соответственно используем $$
      // с числовым указателем элемента в массиме, т.к. $$ возвращает массив
      // а так как у нас предусмотрен только один элемент, указателем будет 0 (ноль)
      	var div = $$('.parent')[0];
      	//далее используем getChildren(), чтобы получить дочерний элемент нашего элемента;
      	//в качестве параметра этого метода, можно передать как класс, так и необходимый тег
      	//если в отцовском ДИВе содержится несколько дочерних ДИВов
      	//а нужный нам текст есть только в ДИВе с определенным классом,
      	//то лучше искать по классу
      	//также не зыбываем о числовом указателе, т.к. метод возвращает массив
      	var child = div.getChildren('.child')[0].get('text');
      	//добавляем событие клика к ссылке
      	$('link').addEvent('click', function(e){
      		//останавливаем исходное событие (переход по ссылке)
      		e.stop();
      		//передаем необходимый текст атрибуту HREF
      		this.set('href', child);
      	})
      })
      

      но, если нужно, чтобы после установки нужного текста происходил переход по новому адресу, то я бы переписал код назначения события так:

      	$('link').addEvent('mousedown', function(){
      		this.set('href', child);
      		this.fireEvent('click');
      	})
      

      т.е. смена атрибута происходит по нажатии на кнопку, после чего принудительно вызывается метод .fireEvent() с параметром ‘click’.

      Удачи! Надеюсь помог! Обращайся, делись опытом, буду рад.

  6. #10 by SmaRt on 05.12.2012 - 7:50 am

    http://site.ru/
    
    <a href="#" rel="nofollow">text</a>

    дочерний элемент можно выбирать более простым путем $$(‘.parent .child’)

    window.addEvent('domready', function(){
            //сразу берем нужный нам элемент
            var child = $$('.parent .child')[0];
            //выковыриваем из него текст (ссылку)
            var link = child.get('text');
            $('link').addEvent('click', function(e){
    		this.set('href', link);
    		this.fireEvent('click');
    	})
    })
    

    Дабы упростить весь код можно записать так

    window.addEvent('domready', function(){
            $('link').addEvent('click', function(){
    		this.set('href', $$('.parent .child')[0].get('text'));
    		this.fireEvent('click');
    	})
    })
(никто не узнает)

Код на картинке: