Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на JavaScript - attribute.

Определение и использование. Attribute - важные узлы большинства тегов HTML и определяют свойства элементов DOM. Существуют несколько способов задания атрибутов выбранных элементов на странице Вашего сайта. На данной странице сайта речь пойдет о свойствах атрибутах, как задать атрибуты и как написать программу на JavaScript.

                       Сам документ является узлом документа
                       Все HTML элементы - узлы элементов
                       Все атрибуты HTML являются узлами атрибутов
                       Текст внутри HTML элементов - текстовые узлы
                       Комментарии являются узлами комментариев

Существует три способа работы с атрибутами тегов:

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

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

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

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

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

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

В строке №8 имеется свойство value объекта Attr, которое задает значение атрибута. Свойство name возвращает имя атрибута.

Метод createAttribute() объекта HTMLDocument возвращает экземпляр объекта Attr. Получается атрибут с заданным в параметре именем в виде строки:

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

        Метод createAttribute() работает с заданными атрибутами.

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

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

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

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

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

Метод getAttributeNode() возвращает экземпляр объекта Attr заданного атрибута:

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

Метод removeAttribute() удаляет атрибут с заданным именем. Аналог removeNamedItem():

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

Метод getAttribute() дает возможность получить значение атрибута:

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

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

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

Свойства и Методы

Свойство/Метод Описание
attr.isId Возвращает true если атрибут типа id, иначе она возвращает значение false
attr.name Возвращает имя атрибута
attr.value Устанавливает или возвращает значение атрибута
attr.specified Возвращает true если атрибут не указан, в противном случае возвращает значение false
   
nodemap.getNamedItem() Возвращает значение указанного атрибута узла NamedNodeMap.
nodemap.item() Возвращает узел по заданному индексу в NamedNodeMap
nodemap.length Возвращает количество узлов в NamedNodeMap
nodemap.removeNamedItem() Удаляет указанный атрибут узла
nodemap.setNamedItem() Устанавливает указанный атрибут узла (по имени)


DOM 4 Предупреждение !!!

В W3C DOM Core, Атрибут (attribute) - объект наследует все свойства и методы объекта Node.

В DOM-4, объект Attr больше не наследует от Узла.

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

 Свойство/Метод Причина избегать. Не применять!
attr.appendChild() Атрибуты не имеют дочерних узлов
attr.attributes Атрибуты не имеют атрибутов
attr.baseURI использовать вместо document.baseURI
attr.childNodes использовать вместо document.baseURI
attr.cloneNode() Получить или установить attrвместо .value
attr.firstChild Атрибуты не имеют дочерних узлов
attr.hasAttributes() Атрибуты не имеют атрибутов
attr.hasChildNodes Атрибуты не имеют дочерних узлов
attr.insertBefore() Атрибуты не имеют дочерних узлов
attr.isEqualNode() Смысла нет
attr.isSameNode() Смысла нет
attr.isSupported() Всегда истинно
attr.lastChild Атрибуты не имеют дочерних узлов
attr.nextSibling Атрибуты не имеют братьев и сестер
attr.nodeName Используйте attrвместо .name
attr.nodeType Это всегда 2 (ATTRIBUTE_NODE)
attr.nodeValue Используйте attrвместо .value
attr.normalize() Атрибуты не могут быть нормализованы
attr.ownerDocument Это всегда ваш HTML-документ
attr.ownerElement Это HTML-элемент, который вы использовали для получения доступа к атрибуту
attr.parentNode Это HTML-элемент, который вы использовали для получения доступа к атрибуту
attr.previousSibling Атрибуты не имеют братьев и сестер
attr.removeChild Атрибуты не имеют дочерних узлов
attr.replaceChild Атрибуты не имеют дочерних узлов
attr.textContent Использовать attrвместо .value


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: