Networks - JavaScript

Document = é a pagina HTML

Selecionamos por id ou por classe os atributos do html

var nome = document.querySelector(".classe ou #id ")

textContent pegamos o texto

var a = document.querySelectorAll(".paciente")

console.log(a.length)

for (var i = 0; i < a.length; i++){

console.log(a[i])

var nome = a[i].querySelector(".info-nome")

//nome.style.color = "yellow"

//nome.style.backgroundColor = "blue";

nome.classList.add("paciente-invalido"); adicionamos uma classe ja montada no css

nome.textContent = "ronaldo " trocamos o nome do atributo

}

</script>

Criando e inserindo elementos dentro do html via js

Cria um elemento H1

const divtest = document.createElement("h1");

Criar um texto para por dentro do H1

const texto = document.createTextNode("ola tuydo bem?");

Inserindo o texto dentro do H1

divtest.appendChild(texto);

"ola tuydo bem?"

Buscando o body do html e inserindo o elemento dentro do html

const body = document.querySelector("body");

body.appendChild(divtest);

<h1>ola tuydo bem?</h1>

REMOVENDO ELEMENTO

remove()

removechild()

const elemento_a_ser_removido = document.querySelector("body h1");

undefined

elemento_a_ser_removido

<h1>ola tuydo bem?</h1>

elemento_a_ser_removido.remove()

REPLACE UM ELEMENTO

Criamos um texto novo

const texto2 = document.createTextNode("ola tudo joia?");

Buscamos o elemento a ser trocado

const elemento_a_ser_trocado = document.querySelector("h1");

Pegamos o pai do elemento

const pai = elemento_a_ser_trocado.parentNode

Trocamos pelo novo valor

pai.replaceChild(texto2, elemento_a_ser_trocado)

INCLUINDO ATRIBUTO

// Seleciona o elemento pelo ID

var meuElemento = document.getElementById("meuElemento");

// Adiciona a classe usando setAttribute

meuElemento.setAttribute("class", "form-test");

// Pode verificar se a classe foi adicionada

console.log(meuElemento.classList.contains("form-test"));

INSERIR E MODIFICAR CSS VIA JS

// Seleciona o elemento pelo ID

var meuElemento = document.getElementById("meuElemento");

// Exemplo 1: Modificar diretamente a propriedade de estilo

meuElemento.style.backgroundColor = "lightgreen";

meuElemento.style.width = "300px";

// Exemplo 2: Usar a propriedade style.cssText

meuElemento.style.cssText += "height: 150px; color: white;";

// Exemplo 3: Adicionar uma classe via classList

meuElemento.classList.add("nova-classe");

// Exemplo 4: Modificar classes usando classList

meuElemento.classList.remove("nova-classe");

meuElemento.classList.toggle("toggle-classe");

// Exemplo 5: Usar setAttribute para modificar ou adicionar um estilo em linha

meuElemento.setAttribute("style", "background-color: purple;");

// Exemplo 6: Modificar ou adicionar múltiplos estilos usando setAttribute

meuElemento.setAttribute("style", "background-color: pink; width: 250px;");

// Exemplo 7: Modificar o estilo com CSS customizado usando dataset

meuElemento.dataset.cor = "azul";

meuElemento.style.backgroundColor = meuElemento.dataset.cor;

CALLBACK

e passar para uma funcao o resultado de outra funcao como argumento

function funcaoA(x) {

return x * 2;

}

function funcaoB(y) {

console.log(y);

}

// Chamando a funçãoB e passando o resultado da funçãoA como argumento

funcaoB(funcaoA(5));

function operacaoAssincrona(callback) {

// Alguma operação assíncrona, como uma chamada de API ou um setTimeout

setTimeout(function() {

const resultado = 42;

callback(resultado);

}, 1000);

}

function callbackFuncao(resultado) {

console.log("O resultado da operação assíncrona é:", resultado);

}

// Chamando a função assíncrona e passando a função de callback

operacaoAssincrona(callbackFuncao);