XML-Angelegenheiten: Jenseits des DOM (Tipps und Tricks für die einfache Verwendung des DOM)

Das Document Object Model (DOM) ist eines der am häufigsten verwendeten Tools zur Bearbeitung von XML- und HTML-Daten, sein Potenzial wird jedoch selten vollständig ausgeschöpft. Indem Sie die Vorteile des DOM nutzen und es einfacher verwenden, erhalten Sie ein leistungsstarkes Tool für XML-Anwendungen, einschließlich dynamischer Webanwendungen.

Dieser Artikel stellt eine Gastkolumnistin vor, die auch meine Freundin und Kollegin Dethe Elza ist. Dethe verfügt über umfangreiche Erfahrung in der Entwicklung von Webanwendungen mit XML und ich möchte ihm für seine Hilfe danken, die mir dabei geholfen hat, mich in die XML-Programmierung mit DOM und ECMAScript einzuführen. Weitere Informationen von Dethe finden Sie in dieser Kolumne.
—— David Mertz

DOM ist eine der Standard-APIs für die Verarbeitung von XML und HTML. Es wird oft dafür kritisiert, dass es speicherintensiv, langsam und ausführlich ist. Dennoch ist es für viele Anwendungen die beste Wahl und sicherlich viel einfacher als SAX, die andere wichtige API von XML. DOM taucht nach und nach in Tools wie Webbrowsern, SVG-Browsern, OpenOffice und anderen auf.

DOM ist großartig, weil es ein Standard ist und weithin implementiert und in andere Standards integriert ist. Standardmäßig ist der Umgang mit Daten unabhängig von der Programmiersprache (was vielleicht eine Stärke ist, aber zumindest die Art und Weise, wie wir mit Daten umgehen, konsistent macht). Mittlerweile ist das DOM nicht nur in Webbrowsern integriert, sondern auch Bestandteil vieler XML-basierter Spezifikationen. Jetzt, da es Teil Ihres Arsenals ist und Sie es vielleicht immer noch gelegentlich verwenden, ist es wohl an der Zeit, die Vorteile zu nutzen, die es bietet.

Nachdem Sie eine Weile mit dem DOM gearbeitet haben, werden Sie feststellen, dass sich Muster entwickeln – Dinge, die Sie immer wieder tun möchten. Mithilfe von Verknüpfungen können Sie mit langen DOMs arbeiten und selbsterklärenden, eleganten Code erstellen. Hier finden Sie eine Sammlung von Tipps und Tricks, die ich häufig verwende, sowie einige JavaScript-Beispiele.

insertAfter und PRependChild

Der erste Trick ist „Es gibt keinen Trick“. Das DOM verfügt über zwei Methoden zum Hinzufügen untergeordneter Knoten zu einem Containerknoten (normalerweise ein Element, aber auch ein Dokument oder Dokumentfragment): appendChild(node) und insertBefore(node, referenceNode). Es scheint, als würde etwas fehlen. Was passiert, wenn ich nach einem Referenzknoten einen untergeordneten Knoten einfügen oder voranstellen möchte (wodurch der neue Knoten der erste in der Liste wird)? Viele Jahre lang bestand meine Lösung darin, die folgende Funktion zu schreiben:

Listing 1. Falscher Weg zum Einfügen und Hinzufügen nach vorherigem

function insertAfter(parent, node, referenceNode) {
    if(referenceNode.nextSibling) {
        parent.insertBefore(node, referenceNode.nextSibling);
    } else {
        parent.appendChild(node);
    }
}
function prependChild(parent, node) {
    if (parent.firstChild) {
        parent.insertBefore(node, parent.firstChild);
    } else {
        parent.appendChild(node);
    }
}

Eigentlich wie in Listing 1: Die Funktion insertBefore() wurde so definiert, dass sie zu appendChild() zurückkehrt, wenn der Referenzknoten leer ist. Anstatt also die obige Methode zu verwenden, können Sie die Methode in Listing 2 verwenden oder sie überspringen und einfach die integrierten Funktionen verwenden:

Listing 2. Korrekte Methode zum Einfügen und Hinzufügen nach vorherigem

function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
function prependChild(parent, node) {
    parent.insertBefore(node, parent.firstChild);
}

Wenn Sie neu in der DOM-Programmierung sind, müssen Sie darauf hinweisen, dass Sie zwar mehrere Zeiger haben können, die auf einen Knoten zeigen, der Knoten jedoch nur an einer Stelle in der existieren kann DOM-Baum. Wenn Sie es also in den Baum einfügen möchten, müssen Sie es nicht zuerst aus dem Baum entfernen, da es automatisch entfernt wird. Dieser Mechanismus ist praktisch, wenn Sie Knoten neu anordnen, indem Sie sie einfach an neuen Positionen einfügen.

Wenn Sie nach diesem Mechanismus die Positionen zweier benachbarter Knoten (Knoten1 und Knoten2 genannt) austauschen möchten, können Sie eine der folgenden Lösungen verwenden:

node1.parentNode .insertBefore (node2, node1);
oder
node1.parentNode.insertBefore(node1.nextSibling, node1);

Was kann man sonst noch mit DOM machen?

DOM wird häufig in Webseiten verwendet. Wenn Sie die Bookmarklets-Website besuchen (siehe Verwandte Themen), finden Sie viele kreative Kurzskripte, mit denen Sie Seiten neu anordnen, Links extrahieren, Bilder oder Flash-Anzeigen ausblenden und vieles mehr können.

Da Internet Explorer jedoch keine Knotenschnittstellenkonstanten definiert (die zur Identifizierung von Knotentypen verwendet werden können), müssen Sie sicherstellen, dass Sie, wenn Sie eine Schnittstellenkonstante vermissen, zuerst die Schnittstellenkonstante im DOM-Skript definieren für das Web.

Listing 3. Stellen Sie sicher, dass der Knoten definiert ist

if (!window['Node']) {
    window.Node = new Object();
    Node.ELEMENT_NODE = 1;
    Node.ATTRIBUTE_NODE = 2;
    Node.TEXT_NODE = 3;
    Node.CDATA_SECTION_NODE = 4;
    Node.ENTITY_REFERENCE_NODE = 5;
    Node.ENTITY_NODE = 6;
    Node.PROCESSING_INSTRUCTION_NODE = 7;
    Node.COMMENT_NODE = 8;
    Node.DOCUMENT_NODE = 9;
    Node.DOCUMENT_TYPE_NODE = 10;
    Node.DOCUMENT_FRAGMENT_NODE = 11;
    Node.NOTATION_NODE = 12;
}

Listing 4 zeigt, wie alle im Knoten enthaltenen Textknoten extrahiert werden:

Listing 4. Interner Text

function innerText(node) {
    // is this a text or CDATA node?
    if (node.nodeType == 3 || node.nodeType == 4) {
        return node.data;
    }
    var i;
    var returnValue = [];
    for (i = 0; i < node.childNodes.length; i++) {
        returnValue.push(innerText(node.childNodes[i]));
    }
    return returnValue.join(&#39;&#39;);
}

Abkürzung

Leute beschweren sich oft darüber, dass das DOM zu ausführlich ist und einfache Funktionen dies erfordern Es muss viel Code geschrieben werden. Wenn Sie beispielsweise ein

function handle_button() {
    var parent = document.getElementById('myContainer');
    var div = document.createElement('div');
    div.className = 'myDivCSSClass';
    div.id = 'myDivId';
    div.style.position = 'absolute';
    div.style.left = '300px';
    div.style.top = '200px';
    var text = "This is the first text of the rest of this code";
    var textNode = document.createTextNode(text);
    div.appendChild(textNode);
    parent.appendChild(div);
}

function elem(name, attrs, style, text) {
    var e = document.createElement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.className = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setAttribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendChild(document.createTextNode(text));
    }
    return e;
}

function handle_button() {
    var parent = document.getElementById('myContainer');
    parent.appendChild(elem('div',
      {class: 'myDivCSSClass', id: 'myDivId'}
      {position: 'absolute', left: '300px', top: '200px'},
      'This is the first text of the rest of this code'));
}

// return next node in document order
function nextNode(node) {
    if (!node) return null;
    if (node.firstChild){
        return node.firstChild;
    } else {
        return nextWide(node);
    }
}
// helper function for nextNode()
function nextWide(node) {
    if (!node) return null;
    if (node.nextSibling) {
        return node.nextSibling;
    } else {
        return nextWide(node.parentNode);
    }
}
// return previous node in document order
function prevNode(node) {
    if (!node) return null;
    if (node.previousSibling) {
      return previousDeep(node.previousSibling);
    }
    return node.parentNode;
}
// helper function for prevNode()
function previousDeep(node) {
    if (!node) return null;
    while (node.childNodes.length) {
        node = node.lastChild;
    }
    return node;
}

// return an Array of all nodes, starting at startNode and
// continuing through the rest of the DOM tree
function listNodes(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = nextNode(node);
    }
    return list;
}
// The same as listNodes(), but works backwards from startNode.
// Note that this is not the same as running listNodes() and
// reversing the list.
function listNodesReversed(startNode) {
    var list = new Array();
    var node = startNode;
    while(node) {
        list.push(node);
        node = prevNode(node);
    }
    return list;
}
// apply func to each node in nodeList, return new list of results
function map(list, func) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        result_list.push(func(list[i]));
    }
    return result_list;
}
// apply test to each node, return a new list of nodes for which
// test(node) returns true
function filter(list, test) {
    var result_list = new Array();
    for (var i = 0; i < list.length; i++) {
        if (test(list[i])) result_list.push(list[i]);
    }
    return result_list;
}

// A list of all the element names in document order
function isElement(node) {
    return node.nodeType == Node.ELEMENT_NODE;
}
function nodeName(node) {
    return node.nodeName;
}
var elementNames = map(filter(listNodes(document),isElement), nodeName);
// All the text from the document (ignores CDATA)
function isText(node) {
    return node.nodeType == Node.TEXT_NODE;
}
function nodeValue(node) {
    return node.nodeValue;
}
var allText = map(filter(listNodes(document), isText), nodeValue);