Element#
Element.getAttributeNode()#
Metoda getAttributeNode() zwraca pierwszy atrybut o określonej nazwie kwalifikowanej w danym elemencie. W przypadku braku pasującego atrybutu zwrócona zostanie wartość null.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var attr = element.getAttributeNode(qualifiedName);gdzie poszczególne człony oznaczają:
- attr - referencja do poszukiwanego atrybutu w elemencie lub wartość
null. - element - węzeł będący obiektem kontekstu.
- qualifiedName - łańcuch znakowy reprezentujący nazwę kwalifikowaną poszukiwanego atrybutu w elemencie.
Algorytm wywołania metody getAttributeNode(qualifiedName) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik pobrania atrybutu poprzez nazwę z przekazaniem qualifiedName i obiektu kontekstu.
Alternatywnie można skorzystać z identycznie działającej metody NamedNodeMap.getNamedItem().
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getAttrNode(name){
var p = document.getElementsByTagName("p")[0]; // referencja do akapitu
p.setAttributeNS("www.test1.com", "ID", "Test1");
p.setAttributeNS("www.test2.com", "Class", "Test2");
p.setAttribute("id", "Identyfikator");
p.className = "Klasa1 Klasa2 Klasa3";
p.setAttributeNS("www.test3.com", "A:NEW", "Test3");
p.setAttributeNS("www.test4.com", "a:new", "Test4");
var allAttr = p.attributes;
var attr = p.getAttributeNode(name); // atrybut o określonej nazwie
var attr2 = allAttr.getNamedItem(name); // atrybut o określonej nazwie
var compare = attr == attr2;
var info = document.getElementById("info");
info.innerHTML = "Metoda getAttributeNode('" + name + "'): ";
if (attr){
info.innerHTML += "<br><br>" + "Interfejs atrybutu: " + attr
+ "<br>" + "Argument z metody: " + name
+ "<br>" + "Właściwość namespaceURI: " + attr.namespaceURI
+ "<br>" + "Właściwość prefix: " + attr.prefix
+ "<br>" + "Właściwość localName: " + attr.localName
+ "<br>" + "Właściwość name: " + attr.name
+ "<br>" + "Właściwość value: " + attr.value;
}
else{
info.innerHTML += "<br><br>Wartość: " + String(attr)
+ "<br>" + "Argument z metody: " + name;
}
info.innerHTML += "<br><br>" + "Porównanie z metodą getNamedItem('" + name + "'): "
+ "<br><br>" + "Interfejs mapy nazwanych atrybutów: " + allAttr // [object NamedNodeMap]
+ "<br>" + "Właściwość length: " + allAttr.length
+ "<br>" + "Wartość z getAttributeNode() == Wartość z getNamedItem(): " + compare;
}
</script>
</head>
<body>
<p>Akapit z atrybutami ustawianymi z poziomu skryptu:</p>
<ul>
<li>p.setAttributeNS("www.test1.com", "ID", "Test1");</li>
<li>p.setAttributeNS("www.test2.com", "Class", "Test2");</li>
<li>p.setAttribute("id", "Identyfikator");</li>
<li>p.className = "Klasa1 Klasa2 Klasa3";</li>
<li>p.setAttributeNS("www.test3.com", "A:NEW", "Test3");</li>
<li>p.setAttributeNS("www.test4.com", "a:new", "Test4");</li>
</ul>
<p>Kliknij przycisk by pobrać atrybut o określonej nazwie z akapitu.</p>
<input type="button" value="getAttributeNode('ID')" onclick="getAttrNode('ID')">
<input type="button" value="getAttributeNode('id')" onclick="getAttrNode('id')">
<input type="button" value="getAttributeNode('Class')" onclick="getAttrNode('Class')">
<input type="button" value="getAttributeNode('class')" onclick="getAttrNode('class')">
<input type="button" value="getAttributeNode('A:NEW')" onclick="getAttrNode('A:NEW')">
<input type="button" value="getAttributeNode('a:new')" onclick="getAttrNode('a:new')">
<input type="button" value="getAttributeNode('brak')" onclick="getAttrNode('brak')">
<p style="color: blue;">Szczegółowe informacje dla pobranych atrybutów:</p>
<p id="info"></p>
</body>
</html>Na chwilę obecną jedynie przeglądarka Firefox obsługuje metodę getAttributeNode() zgodnie z najnowszymi wymaganiami specyfikacji DOM4. Chrome niewłaściwie obsługuje algorytm pobrania atrybutu poprzez nazwę (krok pierwszy), ponieważ dla elementów z przestrzenią nazw HTML i z właścicielem będącym dokumentem HTML nie zamienia przekazanej nazwy kwalifikowanej do metody na małe litery. IE niepotrzebnie zamienia na małe znaki nazwę kwalifikowaną w liście atrybutów przy przeszukiwaniu i dopasowywaniu. Wszystkie rozbieżności prowadzą do zwracania przez te przeglądarki niewłaściwych wartości atrybutów (jak w powyższym przykładzie).
Składnia Web IDL#
interface Element : Node { Attr? getAttributeNode(DOMString qualifiedName); }