Element#

Element.getAttribute()#

Metoda getAttribute() zwraca wartość z pierwszego atrybutu 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:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
var attr_value = element.getAttribute(qualifiedName);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody getAttribute(qualifiedName) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Niech attr będzie wynikiem pobrania atrybutu poprzez nazwę z przekazaniem qualifiedName i obiektu kontekstu.
  2. Jeśli attr jest wartością null, to zwróć wartość null.
  3. Zwróć wartość z attr.

Alternatywnie można skorzystać z podobnie działających metod Element.getAttributeNode() lub NamedNodeMap.getNamedItem() w połączeniu z kilkoma dodatkowymi linijkami kodu.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!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 = "Metoda getAttribute('" + name + "'): " + p.getAttribute(name)
					+ "<br>" + "Metoda hasAttribute('" + name + "'): " + p.hasAttribute(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;

			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ć wartość atrybutu o określonej nazwie z akapitu.</p>
	<input type="button" value="getAttribute('ID')" onclick="getNamedItem('ID')">
	<input type="button" value="getAttribute('id')" onclick="getNamedItem('id')">
	<input type="button" value="getAttribute('Class')" onclick="getNamedItem('Class')">
	<input type="button" value="getAttribute('class')" onclick="getNamedItem('class')">
	<input type="button" value="getAttribute('A:NEW')" onclick="getNamedItem('A:NEW')">
	<input type="button" value="getAttribute('a:new')" onclick="getNamedItem('a:new')">
	<input type="button" value="getAttribute('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ę getAttribute() 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#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
interface Element : Node {
	DOMString? getAttribute(DOMString qualifiedName);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Element (H1) Element.getAttribute() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)