// Métodos modernos de seleção (recomendados)
const elementoPorId = document.querySelector('#meu-id');
const primeiroParagrafo = document.querySelector('p');
const todosLinks = document.querySelectorAll('a[href]');
const botoesEspeciais = document.querySelectorAll('.botao.destaque');

// Métodos tradicionais
const elementoPorIdTradicional = document.getElementById('meu-id');
const elementosPorClasse = document.getElementsByClassName('minha-classe');
const elementosPorTag = document.getElementsByTagName('div');

// Seleção com seletores CSS avançados
const botoesNaoDesabilitados = document.querySelectorAll('button:not([disabled])');
const inputsRequeridos = document.querySelectorAll('input[required]');
const elementosDentroDeDiv = document.querySelectorAll('div p'); // Todos os <p> dentro de <div>
const primeiroDeCadaTipo = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Navegação na árvore DOM
const elemento = document.querySelector('.exemplo');

// Navegando para cima (pais)
console.log(elemento.parentNode);        // Nó pai direto
console.log(elemento.parentElement);     // Elemento pai (null se o pai não for elemento)
console.log(elemento.closest('.classe')); // Encontra o ancestral mais próximo que combina

// Navegando para frente e trás (irmãos)
console.log(elemento.previousElementSibling); // Elemento irmão anterior
console.log(elemento.nextElementSibling);     // Elemento irmão seguinte
console.log(elemento.previousSibling);        // Nó irmão anterior (pode ser texto)
console.log(elemento.nextSibling);            // Nó irmão seguinte (pode ser texto)

// Navegando para baixo (filhos)
console.log(elemento.children);               // Coleção de elementos filhos
console.log(elemento.firstElementChild);      // Primeiro filho elemento
console.log(elemento.lastElementChild);       // Último filho elemento
console.log(elemento.childNodes);             // Todos os nós filhos (elementos, texto, etc.)
console.log(elemento.firstChild);             // Primeiro nó filho
console.log(elemento.lastChild);              // Último nó filho

// Exemplo prático de navegação
function encontrarFormularioMaisProximo(elemento) {
    // Procura por um formulário ancestral
    const formulario = elemento.closest('form');
    
    if (!formulario) {
        console.warn('Nenhum formulário encontrado');
        return null;
    }
    
    return formulario;
}

// Exemplo: encontrar todos os inputs dentro de um formulário
function obterInputsDoFormulario(form) {
    return Array.from(form.querySelectorAll('input, select, textarea'));
}

// Trabalhando com coleções de elementos
const listaElementos = document.querySelectorAll('.item');

// Converter NodeList para Array para usar métodos de array
const arrayElementos = Array.from(listaElementos);
// Ou usar spread operator
const arrayElementos2 = [...listaElementos];

// Iterar sobre NodeList (também é possível)
listaElementos.forEach((elemento, indice) => {
    console.log(`Elemento ${indice}:`, elemento.textContent);
});

// Verificar se elemento existe e está no DOM
function elementoExisteEValido(elemento) {
    return elemento !== null && 
           elemento instanceof Element && 
           document.contains(elemento);
}

// Buscar elemento por múltiplos critérios
function buscarElementoOuFalhar(seletor, mensagemErro = 'Elemento não encontrado') {
    const elemento = document.querySelector(seletor);
    
    if (!elemento) {
        throw new Error(mensagemErro);
    }
    
    return elemento;
}

// Exemplo de uso
try {
    const botaoPrincipal = buscarElementoOuFalhar('button.principal', 'Botão principal não encontrado');
    console.log('Botão encontrado:', botaoPrincipal);
} catch (erro) {
    console.error(erro.message);
}

// Seleção baseada em atributos personalizados
const elementosDinamicos = document.querySelectorAll('[data-dinamico]');
const elementosComChave = document.querySelectorAll('[data-chave]');
const elementosComChaveEspecifica = document.querySelectorAll('[data-chave="valor"]');

// Filtrar coleção de elementos
function filtrarPorVisibilidade(elementos) {
    return Array.from(elementos).filter(el => {
        const estilo = window.getComputedStyle(el);
        return estilo.display !== 'none' && estilo.visibility !== 'hidden';
    });
}

// Verificar se elemento está visível na viewport
function estaNaViewport(elemento) {
    const retangulo = elemento.getBoundingClientRect();
    return (
        retangulo.top >= 0 &&
        retangulo.left >= 0 &&
        retangulo.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        retangulo.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Criação de elementos
const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Este é um novo parágrafo';
novoParagrafo.className = 'paragrafo-destaque';
novoParagrafo.id = 'novo-paragrafo';

// Definindo atributos
novoParagrafo.setAttribute('data-tipo', 'aviso');
novoParagrafo.setAttribute('tabindex', '0');

// Inserção de elementos
const container = document.querySelector('#container');

// Adicionando ao final
container.appendChild(novoParagrafo);

// Criando e inserindo antes de um elemento específico
const novoCabecalho = document.createElement('h2');
novoCabecalho.textContent = 'Novo Cabeçalho';

const primeiroElemento = container.firstElementChild;
container.insertBefore(novoCabecalho, primeiroElemento);

// Técnicas modernas de inserção (recomendadas)
const conteudoHTML = '<div>Conteúdo <strong>HTML</strong> seguro</div>';
const divConteudo = document.createElement('div');
divConteudo.innerHTML = conteudoHTML;

// Inserindo como primeiro filho
container.prepend(divConteudo);

// Inserindo como último filho
const linkAdicional = document.createElement('a');
linkAdicional.href = '#';
linkAdicional.textContent = 'Link adicional';
container.append(linkAdicional);

// Trabalhando com fragments para melhor performance
function criarListaItens(itens) {
    const fragment = document.createDocumentFragment();
    
    itens.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        fragment.appendChild(li);
    });
    
    return fragment;
}

const listaItens = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
const fragmentLista = criarListaItens(listaItens);

const lista = document.querySelector('#minha-lista');
lista.appendChild(fragmentLista); // Inserção eficiente de múltiplos elementos

// Modificação de conteúdo e atributos
const elementoAlvo = document.querySelector('.meu-elemento');

// Modificando conteúdo de texto (seguro contra XSS)
elementoAlvo.textContent = 'Novo conteúdo de texto';

// Modificando conteúdo HTML (cuidado com XSS!)
elementoAlvo.innerHTML = '<strong>Novo conteúdo HTML</strong>';

// Modificando atributos
elementoAlvo.setAttribute('title', 'Descrição do elemento');
elementoAlvo.removeAttribute('data-temporario');

// Trabalhando com classes CSS
elementoAlvo.classList.add('nova-classe');
elementoAlvo.classList.remove('classe-antiga');
elementoAlvo.classList.toggle('classe-ativa');
elementoAlto.classList.contains('classe-existente'); // Retorna boolean

// Mudanças condicionais de classe
function alternarClasse(elemento, classe, condicao) {
    if (condicao) {
        elemento.classList.add(classe);
    } else {
        elemento.classList.remove(classe);
    }
}

// Manipulação de estilo CSS
elementoAlvo.style.color = 'blue';
elementoAlvo.style.backgroundColor = '#f0f0f0';
elementoAlvo.style.setProperty('border-radius', '5px');

// Aplicando múltiplas propriedades de estilo
Object.assign(elementoAlvo.style, {
    padding: '10px',
    margin: '5px',
    fontSize: '16px'
});

// Trabalhando com dataset (atributos data-*)
elementoAlvo.dataset.usuarioId = '123';
elementoAlvo.dataset.tipo = 'destaque';
elementoAlvo.dataset.ultimaAtualizacao = new Date().toISOString();

console.log(elementoAlvo.dataset.usuarioId); // '123'

// Remoção de elementos
const elementoRemovivel = document.querySelector('.remover');
if (elementoRemovivel) {
    elementoRemovivel.remove(); // Método moderno
    // elementoRemovivel.parentNode.removeChild(elementoRemovivel); // Método antigo
}

// Movimentação de elementos existentes
const elementoExiste = document.querySelector('#elemento-existente');
const novoContainer = document.querySelector('#novo-container');
if (elementoExiste && novoContainer) {
    novoContainer.appendChild(elementoExiste); // Move o elemento para o novo container
}

// Clonagem de elementos
const elementoOriginal = document.querySelector('.original');
const elementoClonado = elementoOriginal.cloneNode(true); // true = clona com filhos
elementoClonado.id = 'clonado-' + Date.now(); // Evitar IDs duplicados
document.body.appendChild(elementoClonado);

// Manipulação eficiente de listas
class GerenciadorLista {
    constructor(seletor) {
        this.lista = document.querySelector(seletor);
        this.itens = new Map(); // Armazena referências para itens
    }
    
    adicionarItem(id, conteudo) {
        const li = document.createElement('li');
        li.id = `item-${id}`;
        li.textContent = conteudo;
        
        // Armazenar referência para operações futuras
        this.itens.set(id, li);
        this.lista.appendChild(li);
    }
    
    removerItem(id) {
        const item = this.itens.get(id);
        if (item && item.parentNode) {
            item.parentNode.removeChild(item);
            this.itens.delete(id);
        }
    }
    
    atualizarItem(id, novoConteudo) {
        const item = this.itens.get(id);
        if (item) {
            item.textContent = novoConteudo;
        }
    }
    
    limpar() {
        this.lista.innerHTML = ''; // Limpar conteúdo
        this.itens.clear(); // Limpar referências
    }
}

// Uso do gerenciador de lista
const gerenciador = new GerenciadorLista('#minha-lista-dinamica');
gerenciador.adicionarItem(1, 'Item 1');
gerenciador.adicionarItem(2, 'Item 2');
gerenciador.atualizarItem(1, 'Item 1 (atualizado)');

// Técnicas avançadas de manipulação
function atualizarElementosEmLote(elementos, atualizacoes) {
    const fragment = document.createDocumentFragment();
    
    elementos.forEach((elemento, indice) => {
        const atualizacao = atualizacoes[indice];
        if (atualizacao) {
            Object.entries(atualizacao).forEach(([chave, valor]) => {
                switch (chave) {
                    case 'texto':
                        elemento.textContent = valor;
                        break;
                    case 'html':
                        elemento.innerHTML = valor;
                        break;
                    case 'classe':
                        elemento.className = valor;
                        break;
                    case 'atributo':
                        Object.entries(valor).forEach(([attr, attrValor]) => {
                            elemento.setAttribute(attr, attrValor);
                        });
                        break;
                }
            });
        }
    });
}

// Função utilitária para criar elementos com configuração
function criarElemento(tag, configuracoes = {}) {
    const elemento = document.createElement(tag);
    
    // Configurar atributos
    if (configuracoes.atributos) {
        Object.entries(configuracoes.atributos).forEach(([chave, valor]) => {
            elemento.setAttribute(chave, valor);
        });
    }
    
    // Configurar dataset
    if (configuracoes.data) {
        Object.entries(configuracoes.data).forEach(([chave, valor]) => {
            elemento.dataset[chave] = valor;
        });
    }
    
    // Configurar classes
    if (configuracoes.classes) {
        elemento.classList.add(...configuracoes.classes);
    }
    
    // Configurar conteúdo
    if (configuracoes.texto !== undefined) {
        elemento.textContent = configuracoes.texto;
    }
    
    if (configuracoes.html !== undefined) {
        elemento.innerHTML = configuracoes.html;
    }
    
    // Configurar eventos
    if (configuracoes.eventos) {
        Object.entries(configuracoes.eventos).forEach(([evento, handler]) => {
            elemento.addEventListener(evento, handler);
        });
    }
    
    return elemento;
}

// Exemplo de uso da função utilitária
const botao = criarElemento('button', {
    texto: 'Clique aqui',
    classes: ['btn', 'btn-primario'],
    atributos: {
        type: 'button',
        'aria-label': 'Botão de ação'
    },
    data: {
        acao: 'salvar',
        modal: 'confirmacao'
    },
    eventos: {
        click: () => alert('Botão clicado!')
    }
});

document.body.appendChild(botao);

// Manipulação condicional baseada em dados
function renderizarCondicional(elemento, condicao, renderizacaoTrue, renderizacaoFalse) {
    if (condicao) {
        elemento.innerHTML = typeof renderizacaoTrue === 'function' 
            ? renderizacaoTrue() 
            : renderizacaoTrue;
    } else {
        elemento.innerHTML = typeof renderizacaoFalse === 'function' 
            ? renderizacaoFalse() 
            : renderizacaoFalse;
    }
}

const painel = document.querySelector('#painel-status');
renderizarCondicional(
    painel, 
    true, 
    '<div class="status sucesso">Operação concluída</div>',
    '<div class="status erro">Erro na operação</div>'
);

// Adicionando eventos com addEventListener (recomendado)
const botao = document.querySelector('#meu-botao');

botao.addEventListener('click', function(evento) {
    console.log('Botão clicado!', evento.target);
    evento.preventDefault(); // Previne comportamento padrão
});

// Usando arrow functions (cuidado com o contexto do 'this')
botao.addEventListener('click', (evento) => {
    console.log('Botão com arrow function', evento.currentTarget);
});

// Removendo eventos
function handleClick(evento) {
    console.log('Clicado uma vez');
    botao.removeEventListener('click', handleClick);
}

botao.addEventListener('click', handleClick);

// Eventos com opções
botao.addEventListener('click', (evento) => {
    console.log('Este evento só executa uma vez');
}, { once: true });

// Evento que executa apenas na fase de captura
const container = document.querySelector('#container');
container.addEventListener('click', (evento) => {
    console.log('Evento capturado no container');
}, { capture: true });

// Tratamento de diferentes tipos de eventos
const formulario = document.querySelector('#meu-formulario');

formulario.addEventListener('submit', (evento) => {
    evento.preventDefault();
    console.log('Formulário submetido');
    // Lógica de validação e envio
});

formulario.addEventListener('reset', () => {
    console.log('Formulário resetado');
});

// Eventos de teclado
document.addEventListener('keydown', (evento) => {
    switch(evento.key) {
        case 'Escape':
            console.log('Tecla ESC pressionada');
            break;
        case 'Enter':
            if (evento.ctrlKey) {
                console.log('Ctrl + Enter pressionado');
            }
            break;
        case 'Tab':
            evento.preventDefault(); // Prevenir comportamento padrão
            console.log('Tab interceptado');
            break;
    }
});

// Eventos de mouse
const elementoArrastavel = document.querySelector('.arrastavel');

elementoArrastavel.addEventListener('mousedown', (evento) => {
    console.log('Mouse pressionado', evento.clientX, evento.clientY);
    
    const mover = (eventoMove) => {
        console.log('Mouse movido para:', eventoMove.clientX, eventoMove.clientY);
    };
    
    const soltar = () => {
        document.removeEventListener('mousemove', mover);
        document.removeEventListener('mouseup', soltar);
        console.log('Mouse solto');
    };
    
    document.addEventListener('mousemove', mover);
    document.addEventListener('mouseup', soltar);
});

// Eventos de foco
const input = document.querySelector('input');
input.addEventListener('focus', (evento) => {
    evento.target.classList.add('focado');
});

input.addEventListener('blur', (evento) => {
    evento.target.classList.remove('focado');
});

// Eventos de entrada (melhor que keypress/keydown para capturar texto real)
input.addEventListener('input', (evento) => {
    console.log('Texto alterado:', evento.target.value);
});

// Delegação de eventos (importante para performance)
document.addEventListener('click', (evento) => {
    // Verificar se o clique foi em um botão específico
    if (evento.target.classList.contains('acao-excluir')) {
        const itemId = evento.target.dataset.id;
        console.log('Excluir item:', itemId);
        // Lógica de exclusão
    }
    
    // Verificar se o clique foi em um link
    if (evento.target.tagName === 'A') {
        const href = evento.target.getAttribute('href');
        console.log('Link clicado:', href);
        // Pode-se prevenir o comportamento padrão e fazer algo customizado
    }
});

// Criando e disparando eventos personalizados
function criarEventoPersonalizado(nome, dados) {
    return new CustomEvent(nome, {
        detail: dados,
        bubbles: true, // Permite propagação para cima na árvore
        cancelable: true // Permite ser cancelado com preventDefault
    });
}

// Ouvindo evento personalizado
document.addEventListener('usuario-logado', (evento) => {
    console.log('Usuário logado:', evento.detail.usuario);
});

// Disparando evento personalizado
const eventoLogin = criarEventoPersonalizado('usuario-logado', {
    usuario: 'joao.silva',
    timestamp: Date.now()
});
document.dispatchEvent(eventoLogin);

// Tratamento avançado de eventos
class GerenciadorEventos {
    constructor() {
        this.handlers = new Set();
    }
    
    adicionar(elemento, tipo, callback, opcoes = {}) {
        const handler = { elemento, tipo, callback, opcoes };
        elemento.addEventListener(tipo, callback, opcoes);
        this.handlers.add(handler);
    }
    
    remover(elemento, tipo, callback) {
        const handler = Array.from(this.handlers).find(h => 
            h.elemento === elemento && 
            h.tipo === tipo && 
            h.callback === callback
        );
        
        if (handler) {
            elemento.removeEventListener(tipo, callback);
            this.handlers.delete(handler);
        }
    }
    
    limparTodos() {
        this.handlers.forEach(handler => {
            handler.elemento.removeEventListener(handler.tipo, handler.callback, handler.opcoes);
        });
        this.handlers.clear();
    }
}

// Uso do gerenciador de eventos
const gerenciador = new GerenciadorEventos();

const botao2 = document.querySelector('#botao2');
gerenciador.adicionar(botao2, 'click', () => console.log('Clique gerenciado'));

// Eventos de teclado avançados
const teclasPressionadas = new Set();

document.addEventListener('keydown', (evento) => {
    teclasPressionadas.add(evento.key);
    
    // Verificar combinações de teclas
    if (teclasPressionadas.has('Control') && teclasPressionadas.has('s')) {
        evento.preventDefault();
        console.log('Salvar atalho pressionado (Ctrl+S)');
    }
});

document.addEventListener('keyup', (evento) => {
    teclasPressionadas.delete(evento.key);
});

// Eventos de arrastar e soltar (drag and drop)
const elementoArrastar = document.querySelector('.item-arrastar');
const zonaAlvo = document.querySelector('.zona-alvo');

elementoArrastar.addEventListener('dragstart', (evento) => {
    evento.dataTransfer.setData('text/plain', elementoArrastar.id);
    elementoArrastar.classList.add('arrastando');
});

zonaAlvo.addEventListener('dragover', (evento) => {
    evento.preventDefault(); // Permitir drop
    zonaAlvo.classList.add('sobre-alvo');
});

zonaAlvo.addEventListener('dragleave', () => {
    zonaAlvo.classList.remove('sobre-alvo');
});

zonaAlvo.addEventListener('drop', (evento) => {
    evento.preventDefault();
    zonaAlvo.classList.remove('sobre-alvo');
    
    const idArrastado = evento.dataTransfer.getData('text/plain');
    const elementoArrastado = document.getElementById(idArrastado);
    
    zonaAlvo.appendChild(elementoArrastado);
    console.log('Elemento solto na zona', elementoArrastado);
});

// Debounce e throttle para eventos que disparam com frequência
function debounce(funcao, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => funcao.apply(this, args), delay);
    };
}

function throttle(funcao, delay) {
    let ultimaExecucao = 0;
    return function (...args) {
        const agora = Date.now();
        if (agora - ultimaExecucao >= delay) {
            ultimaExecucao = agora;
            funcao.apply(this, args);
        }
    };
}

// Exemplo: pesquisa em tempo real com debounce
const campoPesquisa = document.querySelector('#campo-pesquisa');
const resultados = document.querySelector('#resultados-pesquisa');

const pesquisar = debounce((termo) => {
    if (termo.length > 2) {
        // Simular chamada de API
        console.log('Pesquisando por:', termo);
        // resultados.innerHTML = `Resultados para: ${termo}`;
    }
}, 300);

campoPesquisa.addEventListener('input', (evento) => {
    pesquisar(evento.target.value);
});

// Scroll com throttle
const lidarComScrollThrottled = throttle(() => {
    const posicao = window.scrollY;
    const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
    const porcentagem = (posicao / maxScroll) * 100;
    
    console.log(`Rolagem: ${porcentagem.toFixed(2)}%`);
}, 100);

window.addEventListener('scroll', lidarComScrollThrottled);

// Tratamento de eventos em dispositivos touch
const elementoTouch = document.querySelector('.area-touch');

elementoTouch.addEventListener('touchstart', (evento) => {
    const toque = evento.touches[0];
    console.log('Touch iniciado em:', toque.clientX, toque.clientY);
});

elementoTouch.addEventListener('touchmove', (evento) => {
    const toque = evento.touches[0];
    console.log('Touch movido para:', toque.clientX, toque.clientY);
    evento.preventDefault(); // Prevenir comportamento padrão
});

elementoTouch.addEventListener('touchend', (evento) => {
    console.log('Touch finalizado');
});

// Gerenciamento de contexto de eventos
class ComponenteEvento {
    constructor(elemento) {
        this.elemento = elemento;
        this.handlers = [];
        this.iniciar();
    }
    
    iniciar() {
        // Armazenar referências para poder remover corretamente
        this.handleClick = this.handleClick.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);
        
        this.elemento.addEventListener('click', this.handleClick);
        this.elemento.addEventListener('keydown', this.handleKeyDown);
        
        this.handlers.push(
            { type: 'click', handler: this.handleClick },
            { type: 'keydown', handler: this.handleKeyDown }
        );
    }
    
    handleClick(evento) {
        console.log('Componente clicado');
    }
    
    handleKeyDown(evento) {
        if (evento.key === 'Enter') {
            this.executarAcao();
        }
    }
    
    executarAcao() {
        console.log('Ação do componente executada');
    }
    
    destruir() {
        // Remover todos os eventos
        this.handlers.forEach(({ type, handler }) => {
            this.elemento.removeEventListener(type, handler);
        });
    }
}

// Uso de DocumentFragment para operações em lote
function adicionarMuitosElementos(container, dados) {
    const fragment = document.createDocumentFragment();
    
    dados.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.nome;
        div.className = 'item-lista';
        fragment.appendChild(div);
    });
    
    // Apenas uma operação de DOM no final
    container.appendChild(fragment);
}

// Exemplo prático de renderização eficiente
class RenderizadorEficiente {
    constructor(container) {
        this.container = container;
        this.cache = new Map();
        this.tamanhoViewport = 10; // Quantos itens manter visíveis
    }
    
    renderizarVirtualizado(dados) {
        // Limpar cache antigo
        this.cache.clear();
        
        // Criar fragmento para todas as operações
        const fragment = document.createDocumentFragment();
        
        dados.forEach((item, indice) => {
            // Criar elemento e armazenar no cache
            const elemento = this.criarElementoItem(item, indice);
            this.cache.set(indice, elemento);
            
            // Adicionar ao fragmento (não ao DOM ainda)
            fragment.appendChild(elemento);
        });
        
        // Limpar container e adicionar tudo de uma vez
        this.container.innerHTML = '';
        this.container.appendChild(fragment);
    }
    
    criarElementoItem(item, indice) {
        const div = document.createElement('div');
        div.className = 'item-virtualizado';
        div.dataset.indice = indice;
        div.innerHTML = `
            <span class="id">${item.id}</span>
            <span class="nome">${item.nome}</span>
            <span class="descricao">${item.descricao}</span>
        `;
        return div;
    }
    
    // Técnica de virtualização: renderizar apenas itens visíveis
    virtualizarLista(dados) {
        // Implementação simplificada de virtualização
        const alturaItem = 50; // px
        const scrollTop = this.container.scrollTop;
        const containerHeight = this.container.clientHeight;
        
        // Calcular quais itens estão visíveis
        const startIndex = Math.floor(scrollTop / alturaItem);
        const endIndex = Math.min(
            startIndex + Math.ceil(containerHeight / alturaItem) + 2, // +2 para buffer
            dados.length
        );
        
        // Limpar container e adicionar apenas itens visíveis
        this.container.innerHTML = '';
        this.container.style.height = `${dados.length * alturaItem}px`;
        
        const fragment = document.createDocumentFragment();
        for (let i = startIndex; i < endIndex; i++) {
            if (i < dados.length) {
                const item = this.criarElementoItem(dados[i], i);
                item.style.position = 'absolute';
                item.style.top = `${i * alturaItem}px`;
                fragment.appendChild(item);
            }
        }
        
        this.container.appendChild(fragment);
    }
}

// Técnicas de caching e memoização
const cacheTransformacao = new Map();

function transformarElementoComCache(elemento, transformacao) {
    const chave = `${elemento.tagName}-${elemento.className}-${transformacao}`;
    
    if (cacheTransformacao.has(chave)) {
        return cacheTransformacao.get(chave);
    }
    
    const resultado = aplicarTransformacao(elemento, transformacao);
    cacheTransformacao.set(chave, resultado);
    return resultado;
}

function aplicarTransformacao(elemento, transformacao) {
    // Simular transformação complexa
    const clone = elemento.cloneNode(true);
    // Aplicar transformações...
    return clone;
}

// Técnica de pooling para elementos frequentemente criados/destuídos
class PoolElementos {
    constructor(criadorElemento, tamanhoMaximo = 100) {
        this.criadorElemento = criadorElemento;
        this.pool = [];
        this.tamanhoMaximo = tamanhoMaximo;
    }
    
    obter() {
        if (this.pool.length > 0) {
            return this.pool.pop();
        }
        return this.criadorElemento();
    }
    
    devolver(elemento) {
        if (this.pool.length < this.tamanhoMaximo) {
            // Resetar estado do elemento
            elemento.innerHTML = '';
            elemento.className = '';
            elemento.removeAttribute('id');
            this.pool.push(elemento);
        }
        // Se pool cheio, deixar o elemento ser coletado pelo GC
    }
    
    limpar() {
        this.pool.forEach(elemento => {
            if (elemento.parentNode) {
                elemento.parentNode.removeChild(elemento);
            }
        });
        this.pool = [];
    }
}

// Uso do pool
const poolBotoes = new PoolElementos(() => {
    const btn = document.createElement('button');
    btn.className = 'btn-pool';
    return btn;
});

// Função para reutilizar elementos existentes
function atualizarOuCriarElemento(seletor, html, container = document.body) {
    const elementoExistente = container.querySelector(seletor);
    
    if (elementoExistente) {
        elementoExistente.innerHTML = html;
        return elementoExistente;
    }
    
    const novoElemento = document.createElement('div');
    novoElemento.className = seletor.replace('.', '');
    novoElemento.innerHTML = html;
    container.appendChild(novoElemento);
    return novoElemento;
}

// Técnica de batching para múltiplas operações DOM
class BatchDOM {
    constructor() {
        this.operacoes = [];
        this.agendado = false;
    }
    
    adicionarOperacao(tipo, ...args) {
        this.operacoes.push({ tipo, args });
        
        if (!this.agendado) {
            this.agendado = true;
            // Executar no próximo ciclo do evento loop
            requestAnimationFrame(() => this.executar());
        }
    }
    
    executar() {
        // Executar todas as operações em lote
        this.operacoes.forEach(op => {
            switch (op.tipo) {
                case 'adicionar':
                    const [container, elemento] = op.args;
                    container.appendChild(elemento);
                    break;
                case 'remover':
                    const [elementoRemover] = op.args;
                    if (elementoRemover.parentNode) {
                        elementoRemover.parentNode.removeChild(elementoRemover);
                    }
                    break;
                case 'atualizar':
                    const [elementoAtualizar, html] = op.args;
                    elementoAtualizar.innerHTML = html;
                    break;
            }
        });
        
        this.operacoes = [];
        this.agendado = false;
    }
}

// Uso do batching
const batch = new BatchDOM();
batch.adicionarOperacao('adicionar', document.body, criarElemento('div', { texto: 'Item 1' }));
batch.adicionarOperacao('adicionar', document.body, criarElemento('div', { texto: 'Item 2' }));

// Técnicas de manipulação baseada em templates
function renderizarTemplate(template, dados) {
    return template.replace(/\{\{(\w+)\}\}/g, (match, chave) => {
        return dados[chave] !== undefined ? dados[chave] : match;
    });
}

const templateItem = `
    <div class="item">
        <h3>{{titulo}}</h3>
        <p>{{descricao}}</p>
        <span class="categoria">{{categoria}}</span>
    </div>
`;

function renderizarListaTemplate(dados) {
    const html = dados.map(item => renderizarTemplate(templateItem, item)).join('');
    const container = document.createElement('div');
    container.innerHTML = html;
    return container;
}

// Técnica de renderização condicional otimizada
function shouldUpdateElement(elementoAntigo, dadosNovos) {
    // Comparar dados e determinar se atualização é necessária
    const dadosAtuais = elementoAntigo.dataset;
    return JSON.stringify(dadosAtuais) !== JSON.stringify(dadosNovos);
}

function atualizarElementoSeNecessario(elemento, novosDados) {
    if (shouldUpdateElement(elemento, novosDados)) {
        // Atualizar conteúdo apenas se necessário
        Object.entries(novosDados).forEach(([chave, valor]) => {
            elemento.dataset[chave] = valor;
        });
        // Atualizar visual
        elemento.innerHTML = gerarHTML(novosDados);
    }
}

function gerarHTML(dados) {
    // Função que gera HTML baseado nos dados
    return `
        <div class="item" data-id="${dados.id}">
            <span>${dados.nome}</span>
            <small>${dados.status}</small>
        </div>
    `;
}

// Técnica de lazy loading de elementos
class LazyLoader {
    constructor(seletor, callback) {
        this.seletor = seletor;
        this.callback = callback;
        this.observer = null;
        this.iniciar();
    }
    
    iniciar() {
        if ('IntersectionObserver' in window) {
            this.observer = new IntersectionObserver((entradas) => {
                entradas.forEach(entrada => {
                    if (entrada.isIntersecting) {
                        this.carregarElemento(entrada.target);
                        this.observer.unobserve(entrada.target);
                    }
                });
            });
            
            // Observar todos os elementos correspondentes
            document.querySelectorAll(this.seletor).forEach(elemento => {
                this.observer.observe(elemento);
            });
        } else {
            // Fallback para navegadores antigos
            this.carregarTodos();
        }
    }
    
    carregarElemento(elemento) {
        this.callback(elemento);
    }
    
    carregarTodos() {
        document.querySelectorAll(this.seletor).forEach(elemento => {
            this.callback(elemento);
        });
    }
    
    destruir() {
        if (this.observer) {
            this.observer.disconnect();
        }
    }
}

// Uso do lazy loader
new LazyLoader('.item-lazy', (elemento) => {
    // Carregar conteúdo do elemento
    elemento.innerHTML = '<div>Conteúdo carregado!</div>';
    elemento.classList.add('carregado');
});

// Técnica de renderização incremental
function renderizarIncremental(dados, container, porLote = 10, intervalo = 16) {
    let indice = 0;
    
    function renderizarLote() {
        const loteFinal = Math.min(indice + porLote, dados.length);
        
        for (; indice < loteFinal; indice++) {
            const item = dados[indice];
            const elemento = document.createElement('div');
            elemento.textContent = item.nome;
            container.appendChild(elemento);
        }
        
        if (indice < dados.length) {
            setTimeout(renderizarLote, intervalo);
        }
    }
    
    renderizarLote();
}

// Técnica de virtual scroller para listas longas
class VirtualScroller {
    constructor(container, itemHeight = 50) {
        this.container = container;
        this.itemHeight = itemHeight;
        this.visibleStart = 0;
        this.visibleEnd = 0;
        this.totalItems = 0;
        this.itemRenderer = null;
        
        this.iniciar();
    }
    
    iniciar() {
        this.container.style.position = 'relative';
        this.container.style.overflow = 'auto';
        
        this.container.addEventListener('scroll', this.atualizarVisibilidade.bind(this));
    }
    
    configurar(itens, renderer) {
        this.totalItems = itens.length;
        this.itemRenderer = renderer;
        this.container.style.height = `${this.totalItems * this.itemHeight}px`;
        
        this.atualizarVisibilidade();
    }
    
    atualizarVisibilidade() {
        const scrollTop = this.container.scrollTop;
        const containerHeight = this.container.clientHeight;
        
        this.visibleStart = Math.max(0, Math.floor(scrollTop / this.itemHeight) - 1);
        this.visibleEnd = Math.min(
            this.totalItems,
            Math.ceil((scrollTop + containerHeight) / this.itemHeight) + 1
        );
        
        this.renderizarVisiveis();
    }
    
    renderizarVisiveis() {
        // Limpar itens visuais atuais
        this.container.innerHTML = '';
        
        // Adicionar apenas itens visíveis
        for (let i = this.visibleStart; i < this.visibleEnd; i++) {
            const itemElement = this.itemRenderer(i);
            itemElement.style.position = 'absolute';
            itemElement.style.top = `${i * this.itemHeight}px`;
            this.container.appendChild(itemElement);
        }
    }
}