ChildNode#
ChildNode.before()#
Metoda before() dodaje przekazane węzły i/lub łańcuch znakowe (automatycznie zamieniane na węzły tekstowe) przed 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.before(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 przed danym węzłem. Separatorem między wieloma przekazanymi argumentami jest przecinek.
Algorytm wywołania metody before(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 viablePreviousSibling będzie pierwszym poprzednikiem 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.
- Jeśli viablePreviousSibling nie jest wartością
null, to ustaw go na brata następującego w viablePreviousSibling, w przeciwnym razie ustaw go na pierwsze dziecko w parent. - Wykonaj przed wstawienie node do parent przed viablePreviousSibling.
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę before(), 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 przed 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ą before() 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 beforeNode = document.getElementById("ul2").getElementsByTagName("li")[0];
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
beforeNode.before(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ę before().
Metoda before() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[NoInterfaceObject] interface ChildNode { [Unscopable] void before((Node or DOMString)... nodes); }