NamedNodeMap#
NamedNodeMap.getNamedItem()#
Metoda getNamedItem() zwraca pierwszy atrybut o określonej nazwie kwalifikowanej z listy atrybutów skojarzonej z daną mapą nazwanych atrybutów. Jeśli w liście atrybutów nie ma atrybutu o danej nazwie kwalifikowanej to 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 = namedNodeMap.getNamedItem(qualifiedName); var attr = namedNodeMap[qualifiedName]; // alternatywa z JS var attr = namedNodeMap.qualifiedName; // alternatywa z JS
gdzie poszczególne człony oznaczają:
- attr - referencja do zwracanego atrybutu lub wartość
null. - namedNodeMap - mapa nazwanych atrybutów będąca obiektem kontekstu.
- qualifiedName - łańcuch znakowy reprezentujący nazwę kwalifikowaną poszukiwanego atrybutu w liście atrybutów.
Algorytm wywołania metody getNamedItem(qualifiedName) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik pobrania atrybutu poprzez nazwę z przekazaniem qualifiedName i elementu skojarzonego z obiektem kontekstu.
W przypadku alternatywy z JS dla metody getNamedItem() mamy do czynienia z pojęciem obsługiwanych nazw właściwości.
Alternatywnie można skorzystać z identycznie działającej metody Element.getAttributeNode().
#W przeglądarkach zgodnych z najnowszymi wymaganiami specyfikacji DOM4 wszystkie indeksy nazwane w mapie nazwanych atrybutów, które są reprezentowane przez nazwy kwalifikowane w atrybutach, powinny zostać pominięte przy wyliczaniu. W definicji Web IDL jest to sygnalizowane poprzez zastosowanie atrybutu rozszerzającego [LegacyUnenumerableNamedProperties]. Aktualnie jest to spełnione przez wszystkie wiodące przeglądarki, co można zaobserwować uruchamiając poniższy przykład:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
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 info = document.getElementById("info");
for (var prop in allAttr) {
info.innerHTML += prop + "<br>"; // zwracamy wszystkie wyliczalne właściwości z mapy nazwanych atrybutów
}
}
</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 id="info"></p>
</body>
</html>Kolejny prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function getNamedItem(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 = allAttr.getNamedItem(name); // atrybut o określonej nazwie
var info = document.getElementById("info");
info.innerHTML = "Interfejs mapy nazwanych atrybutów: " + allAttr // [object NamedNodeMap]
+ "<br>" + "Właściwość length: " + allAttr.length;
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;
}
}
</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 listy atrybutów akapitu.</p>
<input type="button" value="getNamedItem('ID')" onclick="getNamedItem('ID')">
<input type="button" value="getNamedItem('id')" onclick="getNamedItem('id')">
<input type="button" value="getNamedItem('Class')" onclick="getNamedItem('Class')">
<input type="button" value="getNamedItem('class')" onclick="getNamedItem('class')">
<input type="button" value="getNamedItem('A:NEW')" onclick="getNamedItem('A:NEW')">
<input type="button" value="getNamedItem('a:new')" onclick="getNamedItem('a:new')">
<input type="button" value="getNamedItem('brak')" onclick="getNamedItem('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ę getNamedItem() 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#
[LegacyUnenumerableNamedProperties] interface NamedNodeMap { getter Attr? getNamedItem(DOMString qualifiedName); }