Pomocnicy nawigacji DOM
Wybór funkcji używanych do poruszania się po drzewie DOM HTML w JavaScript
Przykład drzewa DOM (zdjęcie za pośrednictwem strony internetowej w3schools)
Węzły w drzewie węzłów są ze sobą hierarchicznie powiązane. Terminy rodzic, dziecko i rodzeństwo są używane do opisu relacji.
Nasze funkcje zostały zbudowane z myślą o łatwej nawigacji w naszym Systemie Zarządzania Treścią. Problemy, z którymi musieliśmy się zmierzyć, dotyczyły sposobu, w jaki różne przeglądarki radziły sobie z odstępami między elementami, a w niektórych przypadkach Firefox ponownie formatował kod HTML. Możemy dodać do tego z biegiem czasu kolejne przydatne funkcje.
Więcej informacji znajduje się na stronie W3C wokół drzewa DOM.
JavaScript
function nextElSibling(el) {if (el.nextSibling)do { el = el.nextSibling } while (el && el.nodeType !== 1);return el;}function prevElSibling(el) {if (el.previousSibling)do { el = el.previousSibling } while (el && el.nodeType !== 1);return el;}function upElSibling(el) {do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.nodeType !== 1);return el;}function upElSiblingA(el) {try {if (el.tagName.toLowerCase() === "a") { return el; }do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.tagName.toLowerCase() !== "a");return el;}catch (err) {return el;}}function upElSiblingClass(el, elclass) {try {if (el.classList.contains(elclass) === true) {return el;}do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.classList.contains(elclass) === false);return el;}catch (err) {return null;}}function countElSibling(el) {var i = 1;while ((el = el.previousElementSibling) != null)++i;return i;}function countElSiblingClass(el, cl) {var i = 0;while ((el = el.previousElementSibling) != null) { if (el.className == cl) ++i };return i;}Co oni robią
Zaczęliśmy od dodania czterech najczęściej używanych przedmiotów.
- nextElSibling i prevElSibling służą wyłącznie do nawigowania do następnego i poprzedniego elementu, unikając wszelkich spacji, które mogą leżeć między nimi.
- upElSibling ponownie otrzymuje przedmiot patentowy z pominięciem białych znaków
- upElSiblingA przeszukuje węzły w poszukiwaniu nadrzędnego elementu hiperłącza. To było używane głównie w naszym edytorze tekstu.
- countElSibling i countElSiblingClass zwracają pozycję elementu w jego rodzicu, jeden z filtrem dla obiektów o określonej nazwie klasy.
