DOM Manipulace s put-selektorem

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?