ChildNode#
ChildNode.after()#
Metoda after() dodaje przekazane węzły i/lub łańcuch znakowe (automatycznie zamieniane na węzły tekstowe) za danym węzłem w jego rodzicu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
childNode.after(nodes);gdzie poszczególne człony oznaczają:
- childNode - węzeł będący obiektem kontekstu.
- nodes - referencja do przekazanych węzłów i/lub łańcuchów znakowych (automatycznie zamienianych na węzły tekstowe) dodawanych za danym węzłem. Separatorem między wieloma przekazanymi argumentami jest przecinek.
Algorytm wywołania metody after(nodes) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Niech parent będzie rodzicem w obiekcie kontekstu.
- Jeśli parent jest wartością
null, to pomiń kolejne kroki. - Niech viableNextSibling będzie pierwszym następnikiem bratowym dla obiektu kontekstu, który nie znajduje się w nodes, w przeciwnym razie niech będzie wartością
null. - Niech node będzie wynikiem skonwertowania nodes do węzła.
- Wykonaj przed wstawienie node do parent przed viableNextSibling.
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę after(), nie musi mieć rodzica, i w takiej sytuacji nie wykonane zostaną żadne czynności (bez zgłoszenia jakiegokolwiek błędu). W niektórych sytuacjach przekazane do metody węzły będą dodawane za innym węzłem niż ten, który wywołuje tę metodę, ale dalej poruszamy się jedynie w obrębie jego rodzica.
Analizując dokładnie wszystkie powiązane z metodą after() algorytmy można zauważyć, że przekazane węzły nie mogą istnieć jednocześnie w kilku miejscach drzewa węzłów. Najpierw zostaną usunięte z drzewa węzłów, a następnie wstawione w nowe miejsce drzewa węzłów (z ewentualnym skorygowaniem ich właściciela). Jeśli zależy nam na wstawieniu kolejnych identycznych węzłów należy je najpierw sklonować i dopiero dołączyć do konkretnego drzewa węzłów. Trzeba pamiętać, że kopia nigdy nie będzie zsynchronizowana z oryginałem (są to dwa osobne obiekty), każda zmiana oryginału nie będzie miała żadnego wpływu na wykonaną kopię.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var ul1 = document.getElementById("ul1");
var insertNode = ul1.getElementsByTagName("li")[1]; // referencja do dodawanego węzła
var afterNode = document.getElementById("ul2").getElementsByTagName("li")[0];
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
afterNode.after(insertNode);
}, 3000);
}
</script>
</head>
<body>
<p>Lista 1</p>
<ul id="ul1">
<li><a href="">Pierwszy odsyłacz</a></li>
<li><a href="">Drugi odsyłacz</a></li>
</ul>
<p>Lista 2</p>
<ul id="ul2">
<li><a href="">Pierwszy odsyłacz</a></li>
</ul>
</body>
</html>Na chwilę obecną jedynie przeglądarka Firefox zaimplementowała metodę after().
Metoda after() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[NoInterfaceObject] interface ChildNode { [Unscopable] void after((Node or DOMString)... nodes); }