Element#

Element.setAttribute()#

Metoda setAttribute() ustawia lub zmienia wartość pierwszego atrybutu o określonej nazwie kwalifikowanej w danym elemencie.

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. #
element.setAttribute(qualifiedName, value);

gdzie poszczególne człony oznaczają:

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

  1. Jeśli qualifiedName nie pasuje do wzorca Name z XML, to zrzuć wyjątek "InvalidCharacterError".
  2. Jeśli obiekt kontekstu znajduje się w przestrzeni nazw HTML oraz jego właścicielem jest dokument HTML, to niech qualifiedName zostanie przekonwertowana na małe znaki ASCII.
  3. Niech attribute będzie pierwszym atrybutem z listy atrybutów skojarzonej z obiektem kontekstu, którego nazwą kwalifikowaną jest qualifiedName, jeśli takowy istnieje, w przeciwnym razie wartością null.
  4. Jeśli attribute ma wartość null, to utwórz atrybut, którego nazwą lokalną jest qualifiedName i wartością jest value, następnie dodaj ten atrybut do listy atrybutów skojarzonej z obiektem kontekstu i pomiń kolejne kroki.
  5. Zmień attribute z obiektu kontekstu na value.

Trzeba wyraźnie podkreślić, że przy wyszukiwaniu atrybutu w elemencie argument przekazany do metody setAttribute() jest traktowany jak jego nazwa kwalifikowana, ale przy braku dopasowania stanowi on nazwę lokalną dla ustawianego atrybutu.

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>

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

			var info = document.getElementById("info");

		}

		function listAllAttr(){

			var allAttr = p.attributes;

			for (var i = 0; i < allAttr.length; i++){

				var attr = allAttr[i];
				info.innerHTML += "<br>" + attr.namespaceURI + " , " + attr.prefix + " , " +  attr.name + " , " + attr.value;

			}

		}

		function setAttr(name, value){

			try{

				info.innerHTML =  "Liczba atrybutów w akapicie (przed ustawieniem): " + p.attributes.length + "<br>";

				listAllAttr();

				info.innerHTML += "<br><br>" + "Metoda setAttribute('" + name + "','" + value + "'): " + p.setAttribute(name, value)
						+ "<br><br>" + "Liczba atrybutów w akapicie (po ustawieniu): " + p.attributes.length + "<br>";

				listAllAttr();

			}

			catch(e){

				info.innerHTML = "Wyjątek: " + e
						+ "<br>" + "Pierwszy argument z metody: " + name
						+ "<br>" + "Drugi argument z metody: " + value;

			}

		}

	</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ć wartość atrybutu o określonej nazwie w akapicie.</p>
	<input type="button" value="setAttribute('ID','value1')" onclick="setAttr('ID','value1')">
	<input type="button" value="setAttribute('id','value2')" onclick="setAttr('id','value2')">
	<input type="button" value="setAttribute('Class','value3')" onclick="setAttr('Class','value3')">
	<input type="button" value="setAttribute('class','value4')" onclick="setAttr('class','value4')">
	<input type="button" value="setAttribute('A:NEW','value5')" onclick="setAttr('A:NEW','value5')">
	<input type="button" value="setAttribute('a:new','value6')" onclick="setAttr('a:new','value6')">
	<input type="button" value="setAttribute('NEW','value7')" onclick="setAttr('NEW','value7')">
	<input type="button" value="setAttribute('Fresh','value8')" onclick="setAttr('Fresh','value8')">
	<input type="button" value="setAttribute('a:Fresh','value9')" onclick="setAttr('a:Fresh','value9')">
	<input type="button" value="setAttribute('!','value10')" onclick="setAttr('!','value10')">

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

</html>

Na chwilę obecną jedynie przeglądarki Firefox i Chrome obsługują metodę setAttribute() zgodnie z najnowszymi wymaganiami specyfikacji DOM4. IE wiele aspektów związanych z atrybutami obsługuje błędnie.

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 {
	void setAttribute(DOMString qualifiedName, DOMString value);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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