DOM-Navigationshelfer
Eine Auswahl von Funktionen zum Navigieren im HTML-DOM-Baum in JavaScript
Beispiel für einen DOM-Baum (Bild über die w3schools-Website)
Die Knoten im Knotenbaum haben eine hierarchische Beziehung zueinander. Die Begriffe Elternteil, Kind und Geschwister werden verwendet, um die Beziehungen zu beschreiben.
Unsere Funktionen wurden mit Blick auf eine einfache Navigation für unser Content Management System entwickelt. Die Probleme, mit denen wir konfrontiert waren, waren, wie verschiedene Browser mit Leerzeichen zwischen Elementen umgingen, und in einigen Fällen formatierte Firefox den HTML-Code neu. Wir können dies im Laufe der Zeit mit weiteren nützlichen Funktionen ergänzen.
Weitere Informationen finden Sie auf der W3C-Website rund um den DOM-Baum.
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;}Was sie machen
Wir haben damit begonnen, die vier am häufigsten verwendeten Artikel hinzuzufügen.
- nextElSibling und prevElSibling werden ausschließlich verwendet, um zu den nächsten und vorherigen Elementen zu navigieren, wobei Leerzeichen vermieden werden, die dazwischen liegen können.
- upElSibling erhält das Patentelement erneut, wobei Leerzeichen übersprungen werden
- upElSiblingA durchsucht die Knoten nach dem übergeordneten Hyperlink-Element. Dies wurde hauptsächlich für unseren Texteditor verwendet.
- countElSibling und countElSiblingClass geben die Position des Elements innerhalb seines Elternelements zurück, eines mit einem Filter für die Objekte eines bestimmten Klassennamens.
