Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
12.02 Работа с атрибутами тегов

Автор: Denisido

Дата: 2011-01-03

Существует три способа работы с атрибутами тегов: создание атрибутов, задание значений для атрибутов и удаление атрибутов. Также существует три пути: прямой доступ к атрибутам через свойства, использование коллекции attributes и применение методов объектной модели документов(DOM).

Прямой доступ к атрибутам через свойства

Обращение напрямую к свойству объекта - самый простой способ:

// javascript атрибуты
  
var cep = document.createElement('p');
cep.id = "par";
var ctn1 = document.createTextNode('Это абзац, программно созданный с помощью javascript');
window.onload = afterLoad;
function afterLoad() {
	document.body.appendChild(cep);
	cep.appendChild(ctn1); // Это абзац, программно созданный с помощью javascript
}; // end func afterLoad

Доступ через коллекции attributes

Эта коллекция является экземпляром объекта NameNodeMap и содержит набор экземпляров объекта Attr, каждый из которых представляет один из заданных для данного тега атрибутов.

Метод getNamedItem()

Данный метод объекта NameNodeMap возвращает экземпляр объекта Attr, представляющий атрибут с заданным в параметре именем в виде строки:

<a id="lnk" href="#">текст ссылки</a>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('lnk');
	link1.firstChild.nodeValue = 'javascript атрибуты'; // меняем название ссылки
	var hrefAttr1 = link1.attributes.getNamedItem('href'); // получаем ссылку
	hrefAttr1.value = "Первая страница"; // задаем значение для ссылки
}; // end func afterLoad

В строке №8 данного примера мы использовали свойство value объекта Attr, которое задает (как в нашем случае) или возвращает значение атрибута. Помимо него существует свойство name, которое возвращает имя атрибута.

Метод createAttribute()

Данный метод объекта HTMLDocument возвращает экземпляр объекта Attr, представляющий атрибут с заданным в параметре именем в виде строки. Как видно, предыдущий метод похож на текущий за исключением того, что он работает с уже заданными атрибутами:

<img src="images/1.jpg" id="img_1" />
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('img_1'); // находим узел
	var nameAttr1 = document.createAttribute('width'); // создаем атрибут
	nameAttr1.value = "100px";  // устанавливаем значение
	link1.attributes.setNamedItem(nameAttr1); // привязываем атрибут
}; // end func afterLoad

Метод setNamedItem()

В примере выше мы показали как создать атрибут. Чтобы его привязать к конкретному тегу мы в строке №8 этого же примера использовали метод setNamedItem(). В качестве единственного параметра мы присвоили необходимый атрибут. Дополнительно, метод возвращает значение null при условии, если привязки атрибута с определенным именем отсутствует.

Метод removeNamedItem()

Метод удаляет атрибут с заданным именем из текущего тега. Возвращает экземпляр объекта Attr, представляющего удаленный атрибут:

// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var mainDiv = document.getElementById('js'); // находим узел
	mainDiv.attributes.removeNamedItem('class'); // удаляем атрибут
}; // end func afterLoad

Применение методов объектной модели документов(DOM)

Метод setAttributeNode()

Привязывает переданный в качестве параметра атрибут к текущему тегу. В качестве параметра передаем экземпляр объекта Attr, соответствующий ранее созданному атрибуту. Для его создания мы используем рассмотренный ранее метод createAttribute():

<div id="js">Javascript lessons</div>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var mainDiv = document.getElementById('js'); // находим узел
	var newAttr1 = document.createAttribute('class'); // создаем атрибут
	newAttr1.value = 'main';  // устанавливаем значение
	mainDiv.setAttributeNode(newAttr1);  // привязываем атрибут
}; // end func afterLoad

Метод getAttributeNode()

Данный метод возвращает экземпляр объекта Attr заданного атрибута:

<a href="#" id="link_1">Javascript lessons</a>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('link_1'); // находим узел
	var linkName = link1.getAttributeNode('href'); // отыскиваем атрибут
	alert(linkName.value); // выводим значение атрибута в модальное окно
}; // end func afterLoad

Метод removeAttribute()

Этот метод удаляет атрибут с заданным именем. Схож с методом removeNamedItem():

<a href="#" id="link_1">Javascript lessons</a>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('link_1'); // находим узел
	link1.removeAttribute('id'); // удаляем атрибут
}; // end func afterLoad

Метод getAttribute()

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

<a href="#" id="link_1">Javascript lessons</a>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('link_1'); // находим узел
	var idName = link1.getAttribute('id');  // отыскиваем атрибут
	alert(idName);  // выводим значение атрибута в модальное окно
}; // end func afterLoad

Метод setAttribute()

Метод позволяет быстро задать значение атрибуту. Первый параметр - имя атрибута, второй параметр - его значение:

<a href="#" id="link_1">Javascript lessons</a>
// javascript атрибуты
  
window.onload = afterLoad;
function afterLoad() {
	var link1 = document.getElementById('link_1'); // находим узел
	link1.setAttribute('class','first'); // создаем атрибут и устанавливаем значение
	link1.setAttribute('href','page1.html'); // меняем значение атрибута
}; // end func afterLoad



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2011-01-04

Отличная статья. Рекомендую всем.

Коментарий добавил(а): Jhon
Дата: 2016-07-15

Это конечно хорошо. Но неполохо было бы коментариев побольше! В первом примере хотелось бы узнать про это --> cep.id = "par";, а если так cep.class = "par"; Почему не работает?

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

Текст коментария:

Введите результат с картинки

Просмотров: 24533

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.