Element#

Element.setAttributeNode()#

Metoda setAttributeNode() ustawia lub zastępuje pasujący pod względem przestrzeni nazw i nazwy lokalnej istniejący atrybut przekazanym atrybutem w danym elemencie i w zależności od sytuacji zwraca odpowiednie wartości.

Opis działania#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
var return_attr = element.setAttributeNode(attr);

gdzie poszczególne człony oznaczają:

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

  1. Zwróć wynik ustawiania atrybutu z przekazaniem attr oraz obiektu kontekstu. Zrzuć ponownie każdy wyjątek.

Analizując dokładnie wszystkie powiązane z metodą setAttributeNode() algorytmy można dojść do następujących wniosków:

Alternatywnie można skorzystać z identycznie działających metod Element.setAttributeNodeNS(), NamedNodeMap.setNamedItem() lub NamedNodeMap.setNamedItemNS(). Taka szeroka wymienność jest ukłonem w stronę przeglądarek Chrome, Safari i Edge, które nigdy nie zaimplementowały wspomnianych metod zgodnie z wymogami poprzednich specyfikacji DOM, co w ostateczności doprowadziło do zmiany tych wymagań w obecnej specyfikacji DOM4 (DOM - Bug 117).

Prosty przykład:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!DOCTYPE html>
<html>

<head>

	<script>

		window.onload = function(){

			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");

			allAttr = p.attributes;
			var info = document.getElementById("info");

		}

		function outputAttributes(){
			var allAttrLen = allAttr.length;
			var allAttrData = "";
			for (var i = 0; i < allAttrLen; i++){
				var thisAttr = allAttr[i];
				allAttrData += "<br>" + thisAttr.namespaceURI + " " + thisAttr.prefix + " " + thisAttr.localName + " " + thisAttr.name;
			}
			return allAttrData;
		}

		function createAndSet(namespace, name, variant){

			try{

				var new_attr;

				if (variant == 0){
					new_attr = document.createAttributeNS(namespace, name);
				}
				else if (variant == 1){
					new_attr = allAttr[0];
				}
				else if (variant == 2){
					new_attr = info.attributes[0];
				}

				var beforeChange = outputAttributes();
				var beforeChangeLen = allAttr.length;
				var return_attr = p.setAttributeNode(new_attr);

				info.innerHTML = "Interfejs mapy nazwanych atrybutów: " + allAttr // [object NamedNodeMap]
						+ "<br>" + "Właściwość length (przed zmianą): " + beforeChangeLen
						+ "<br>" + "Właściwość length (po zmianie): " + allAttr.length
						+ "<br><br>" + "Interfejs nowego atrybutu: " + new_attr
						+ "<br>" + "Właściwość namespaceURI: " + new_attr.namespaceURI
						+ "<br>" + "Właściwość prefix: " + new_attr.prefix
						+ "<br>" + "Właściwość localName: " + new_attr.localName
						+ "<br>" + "Właściwość name: " + new_attr.name
						+ "<br>" + "Właściwość value: " + new_attr.value;

				if (return_attr){

					info.innerHTML += "<br><br>" + "Interfejs zwróconego atrybutu: " + return_attr
							+ "<br>" + "Właściwość namespaceURI: " + return_attr.namespaceURI
							+ "<br>" + "Właściwość prefix: " + return_attr.prefix
							+ "<br>" + "Właściwość localName: " + return_attr.localName
							+ "<br>" + "Właściwość name: " + return_attr.name
							+ "<br>" + "Właściwość value: " + return_attr.value
							+ "<br><br>" + "Nowy atrybut == Zwrócony atrybut: " + (new_attr == return_attr);

				}

				else{

					info.innerHTML += "<br><br>" + "Atrybutu nie było w elemencie i metoda zwróciła: " + return_attr;

				}

				info.innerHTML += "<br><br>" + "Wykaz wszystkich atrybutów przed zmianą (przestrzeń nazw|prefiks|nazwa lokalna|nazwa kwalifikowana):";
				info.innerHTML += beforeChange;
				info.innerHTML += "<br><br>" + "Wykaz wszystkich atrybutów po zmianie (przestrzeń nazw|prefiks|nazwa lokalna|nazwa kwalifikowana):";
				info.innerHTML += outputAttributes();

			}

			catch(e){

				info.innerHTML = "Wyjątek: " + e;

			}

		}

	</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 ustawić określony atrybut w akapicie.</p>
	<input type="button" value="setAttributeNode(attr['','id'])" onclick="createAndSet('','id',0)">
	<input type="button" value="setAttributeNode(attr['ns1','id'])" onclick="createAndSet('ns1','id',0)">
	<input type="button" value="setAttributeNode(attr['ns2','ID'])" onclick="createAndSet('ns2','ID',0)">
	<input type="button" value="setAttributeNode(attr[null,'Class'])" onclick="createAndSet(null,'Class',0)">
	<input type="button" value="setAttributeNode(attr['www.test3.com','A:NEW'])" onclick="createAndSet('www.test3.com','A:NEW',0)">
	<input type="button" value="setAttributeNode(attr['ns3','A:NEW'])" onclick="createAndSet('ns3','A:NEW',0)">
	<input type="button" value="setAttributeNode(attr['www.test3.com','a:new'])" onclick="createAndSet('www.test3.com','a:new',0)">
	<input type="button" value="setAttributeNode(attr['ns4','Fresh'])" onclick="createAndSet('ns4','Fresh',0)">
	<input type="button" value="setAttributeNode(attr z p)" onclick="createAndSet('','',1)">
	<input type="button" value="setAttributeNode(attr z innego p)" onclick="createAndSet('','',2)">

	<p style="color: blue;">Szczegółowe informacje dla ustawionych atrybutów:</p>
	<p id="info"></p>
</body>

</html>

Na chwilę obecną jedynie przeglądarka Firefox obsługuje metodę setAttributeNode() zgodnie z najnowszymi wymaganiami specyfikacji DOM4. Pozostałe przeglądarki mają mniejsze lub większe problemy w tym obszarze.

Składnia Web IDL#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
interface Element : Node {
	Attr? setAttributeNode(Attr attr);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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