Manipulace s uzly DOM je dnes velkou součástí webu; stačí se podívat, jak populární se stal jQuery JavaScript framework. Schopnost snadno pracovat s DOM nám umožňuje udělat spoustu práce v malém množství kódu. Díky novému modulu JavaScript od vývojáře Dojo Toolkit Krise Zypa je práce s DOM mnohem kompaktnější. Díky názvu tak krátkému, jako je samotná syntaxe, by vás put mohl přimět změnit způsob práce s DOM.
Vytvoření uzlů DOM
Vytváření nových uzlů je tak jednoduché, jak to jen jde:
// Create an empty DIV var div = put("div");
Bum, tady je váš nový prvek DIV! A pokud chcete, aby váš nový kód měl několik tříd CSS:
// Create a DIV with some CSS classes var div2 = put("div.classOne.classTwo");
Co takhle vytvořit uzly s atributy?
// Create a DIV with some CSS classes and attributes var div3 = put("div.classOne.classTwo[title=Hover over me][style=display:inline-block]");
Syntaxe pro vložení uzlu DOM je trochu jiná, protože rodič se pak stává prvním argumentem v podpisu put:
// Create an INPUT with an ID and an attribute, place it into the body // The body text goes into the third argument; not(!) innerHTML, just text var div4 = put(document.body, "input[type=text]#myInput", "This is inner html");
Manipulace se stávajícími uzly DOM
Manipulace s uzly DOM je ve skutečnosti velmi podobná vytváření uzlů samotných:
var myInput = document.getElementById("myInput"); put(myInput, ".anotherClass"); // Add CSS classes attributes to the element put(myInput, "[placeholder=first name][required=true][title=first name element].yetAnotherClass");
Stačí odstranit tagName a můžete upravit uzel.
Odstranění uzlu, třídy a atributu
"!" znak je smysluplný v tom, že představuje odstranění v rámci put. Odeberme několik tříd a atributů z daného uzlu a poté odeberme uzel samotný:
// Remove a CSS class from the INPUT element put(myInput, "!anotherClass"); // Remove attributes from the INPUT element put(myInput, "[!required][!title]"); // Delete a node! put(myInput, "!");
Syntaxe pro smazání je krátká, ale sladká. Jediná kritika, kterou mám, je, že pokud by to mohlo způsobit problém s údržbou, pokud vývojáři nemají zkušenosti s put.
Vytvoření a správa podřízených uzlů
Vytváření dětských uzlů pro existující uzel je další funkcí, kterou usnadňuje put:
// Create a base node so we can add nodes around it var baseNode = put(document.body, "div#baseNode"); // Add two DIVs *after* the baseNode put(baseNode, "+div +div"); // Add a SPAN element *before* the baseNode put(baseNode, "-span"); // Create the parent list element var ul = put(document.body, "ul"); // Create a child list item var firstItem = put(ul, "li");
Přesouvání a přepojování uzlů
Reparenting a přesunutí prvků v rámci DOM je další základní úkol, který při použití nativních funkcí JavaScriptu vyžaduje příliš mnoho kódu. Pojďme se podívat na pohyb uzlů pomocí put:
// Move one node to another parent // parent > child put(ul, ">", firstItem); // Put one element after the first put(div1, "+", div2);
Jednoduchá série symbolů určuje, kam by měl prvek v uzlu try směřovat!
Tradičnější správa vlastností uzlu
Pro ty, kteří preferují podrobnější syntaxi vytváření prvků, put-selector poskytuje také toto:
var span = put(parent, "span", { title: "Hover over me!", style: "font-style: italic;" });
Krisův nástroj je skvělý v tom, že je mimořádně účinný, modulární a snadno se učí. Na druhou stranu je možné, že syntaxe může být trochu příliš kompaktní pro osoby, které se snaží udržovat aplikaci, kterou nenapsali. Co si myslíš o dát? Snadno použitelný nástroj nebo „jednoduchý, ale komplikovaný“ zdroj? Pokud mám být upřímný, balancuji na plotě – možná mě přesvědčíte?