Poznajemy najważniejsze metody klasy Document. Wiele z nich już poznaliśmy, jest to dobry moment, aby uporządkować wiedzę plus dodać kilka nowych rzeczy.
d.createAttribute(): tworzy atrybut (node typu Attribute, które może przyjąć element korzystając z metody setAttributeNode):
const node = document.getElementById("div1");
const a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my_attrib")); // "newVal"d.createElement(): znamy, tworzy element
d.createComment(): znamy, tworzy komentarz
d.createDocumentFragment(): tworzy document fragment. Przydatne, aby pododawać wiele rzeczy (np. w pętli) do jednego fragmentu, zamiast ciągle dodawać do dokumentu, wymuszając re-render przy każdej drobnej zmianie, potem za jednym ruchem dodać wszystko do dokumentu.
d.createExpression(): tworzy XPath expression, powiemy jeszcze sobie więcej o tym, także w kursie PHP
d.createTextNode(): tworzy text node, znamy
d.createNodeIterator(): znamy, tworzy node iterator (iteruje po dzieciach node, ale spłaszcza wszystko do jednej tablicy)
d.createTreeWalker(): znamy, tworzy tree walker, który iteruje po dzieciach elementu jako strukturze drzewa
d.getElementById(): zwraca element po jego ID (nie trzeba używać #)
d.getElementsByClassName(): zwraca HTMLCollection z obiektami o pasującej klasie
d.getElementsByTagName(): zwraca HTMLCollection z obiektami o pasującym tagu
d.getElementsByName(): zwraca HTMLCollection z obiektami o atrybucie name pasującym
d.querySelector(): zwraca pierwszy element pasujący do selektora
d.querySelectorAll(): zwraca node list z wszystkimi elementami pasującymi do selektora
d.replaceChildren(): przydaje się do dwóch rzeczy:
- albo robimy reaktywną SPA w czystym JS i chcemy wyczyścić stary content a wrzucić nowy
- albo po prostu chcemy wyczyścić wszystko z dokumentu, wtedy podajemy puste
document.replaceChildren();
document.children; // HTMLCollection []d.prepend(): dodaj coś na początku dokumentu
d.append(): dodaj coś na końcu dokumentu
Tych kilka metod, które pominęliśmy można podzielić na kilka grup:
- bardzo stare i silnie odradzane jak open, close, write, writeln
- dotyczące głównie iframe, jak adoptNode, importNode
- eksperymentalne
- wyspecjalizowane w eventach focusowych, jak getSelection, czy też dotyczące animacji
Tym niemniej więcej tych metod znamy niż nie znamy. W zasadzie można powiedzieć, że Document mamy przerobiony a te kilka innych metod poznamy przy omawianiu innych tematów.
