DOM test

Manipula el DOM. Realiza consultas, obtiene y establece propiedades (incluyendo style y dataset) de forma unificada, mediante selectores CSS (DOMQuery), nodos únicos (Node) o listas de nodos (Nodes).

Librería: estructura.dom.js

1. Uso Básico

Seleccione elementos del DOM mediante selectores String CSS con > al inicio (DOMQuery), y objetos Node o NodeList.
El prefijo > al inicio de la cadena indica a la librería que debe interpretar el texto como un selector CSS para realizar una búsqueda en el DOM (DOMQuery).

// Seleccionar elementos y aplicar cambios
_dom('> .mi-clase').set('id', 'nuevo-id');
_dom('> div').style('backgroundColor', 'red');

// Obtener valores
var ids = _dom('> #mi_elemento_con_id').get('id');

// Con Node
_dom(document.body).each(function(element, index){ console.log('Body:', element); });

// Con Nodes
var classes = _dom(document.getElementsByClassName('miClase')).get('className');

2. Métodos Principales

.each(callback):

Itera sobre cada elemento seleccionado del DOM.

_dom('> li').each(function(element, index){
	console.log('Elemento ' + index + ':', element);
});

.get(property):

Obtiene el valor de una propiedad de todos los elementos del DOM seleccionados. Soporta acceso anidado mediante puntos. Retorna un arreglo (Array) con los resultados.

var valor = _dom('> input').get('value');
var clase = _dom('> div').get('className');
var estilo = _dom('> main').get('style.color');

.set(property, value):

Establece el valor de una propiedad a todos los elementos del DOM seleccionados. Soporta acceso anidado mediante puntos.

_dom('> input').set('value', 'Hola Mundo');
_dom('> body').set('style.background', 'yellow');

.style(property, value):

Manipula estilos CSS. Si se omite el argumento value, retorna el estilo actual del elemento. Los valores se aplican como estilos inline. Retorna un arreglo (Array) con los resultados. Soporta tanto nombres de propiedades en formato camelCase (ej. backgroundColor) como kebab-case (ej. background-color).

_dom('> .caja').style('color', 'blue');
var color = _dom('> .caja').style('color'); // Retorna el valor computado

.data(property, value):

Manipula el dataset. Si se omite el argumento value, retorna la propiedad del elemento. Permite leer y escribir propiedades del dataset usando opcionalmente el prefijo data- y gestionando la conversión de formato de guiones a mayúsculas de manera automática (camelCase). Retorna un arreglo (Array) con los resultados.

_dom('> div').data('user-id', '456');
var id = _dom('> div').data('user-id'); // Retorna el valor

3. Características Técnicas