Element#
Element.removeAttributeNode()#
Metoda removeAttributeNode() usuwa przekazany atrybut w danym elemencie i zwraca referencję do usuniętego atrybutu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var return_attr = element.removeAttributeNode(attr);gdzie poszczególne człony oznaczają:
- return_attr - referencja do usuniętego atrybutu z elementu.
- element - węzeł będący obiektem kontekstu.
- attr - referencja do usuwanego atrybutu z elementu.
Algorytm wywołania metody removeAttributeNode(attr) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Jeśli attr nie znajduje się w liście atrybutów skojarzonej z obiektem kontekstu, to zrzuć wyjątek
"NotFoundError". - Usuń attr z obiektu kontekstu.
- Zwróć attr.
Analizując dokładnie wszystkie powiązane z metodą removeAttributeNode() algorytmy można dojść do następujących wniosków:
- Przekazanie atrybutu, który nie należy do elementu, zwraca błąd.
- Po usunięciu atrybutu skojarzony z nim element (wskazywany przez właściwość
Attr.ownerElement) ustawiony zostaje na wartośćnull. - Operujemy na konkretnym atrybucie (obiekcie), niczego nie wyszukujemy, dlatego w tym wypadku dodatkowa metoda z nazwą "removeAttributeNodeNS" jest zbędna (zgodnie ze wskazówką umieszczoną w oficjalnym FAQ dla DOM).
Prosty przykład:
<!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 createAndRemove(namespace, name, variant){
try{
var new_attr;
if (variant == 2){
new_attr = document.createAttributeNS(namespace, name);
}
else if (variant == 1){
new_attr = info.attributes[0];
}
else if (variant == 0){
new_attr = allAttr[0];
}
var return_attr = p.removeAttributeNode(new_attr);
info.innerHTML = "Interfejs mapy nazwanych atrybutów: " + allAttr // [object NamedNodeMap]
+ "<br>" + "Właściwość length: " + allAttr.length
+ "<br><br>" + "Interfejs przekazanego 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
+ "<br>" + "Właściwość ownerElement: " + new_attr.ownerElement;
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>" + "Właściwość ownerElement: " + return_attr.ownerElement
+ "<br><br>" + "Przekazany 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;
}
}
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 usunąć określony atrybut w akapicie.</p>
<input type="button" value="removeAttributeNode(attr[0] z p)" onclick="createAndRemove('','',0)">
<input type="button" value="removeAttributeNode(attr z innego p)" onclick="createAndRemove('','',1)">
<input type="button" value="removeAttributeNode(attr['','id'])" onclick="createAndRemove('','id',2)">
<input type="button" value="removeAttributeNode(attr['ns1','id'])" onclick="createAndRemove('ns1','id',2)">
<input type="button" value="removeAttributeNode(attr['ns2','ID'])" onclick="createAndRemove('ns2','ID',2)">
<input type="button" value="removeAttributeNode(null)" onclick="createAndRemove(null)">
<p style="color: blue;">Szczegółowe informacje dla usuniętych atrybutów:</p>
<p id="info"></p>
</body>
</html>Na chwilę obecną jedynie przeglądarki Firefox i Chrome obsługują metodę removeAttributeNode() zgodnie z najnowszymi wymaganiami specyfikacji DOM4. IE wiele aspektów związanych z atrybutami obsługuje błędnie.
Składnia Web IDL#
interface Element : Node { Attr removeAttributeNode(Attr attr); }
Specyfikacje i inne materiały#
Pasek społecznościowy