8

Gostaria de saber se tem como fazer uma verificação pelo javascript se um atributo de um elemento foi alterado ou não.

Por exemplo: Se eu tenho um input, coloco nele o atributo required, e alguém vai lá e apaga o required desse elemento pelas ferramentas do desenvolvedor do navegador, há alguma maneira, através do javascript, de detectar isso?

Existe algum evento no javascript que possa fazer algo assim?

3
  • 1
    Até tem como fazer mas não acredito vá valer a pena. Como o javascript roda no cliente, você não pode confiar somente nele para validação de dados. Commented 13/02/2015 às 12:50
  • Se a pessoa desativar o JS do navegador, já era... Commented 13/02/2015 às 12:51
  • Mas, se tem como fazer, a resposta é bem-vinda. Sei que se desativar o javascript tudo vai para o espaço. A não seu que logins e afins sejam via ajax, aí o cara é obrigado a ativar o javascript :) Commented 13/02/2015 às 12:52

2 Respostas 2

10

Isto pode ser feito usando MutationObserver. Ao criar o MutationObserver você especifica um callback que será chamado quando houver alguma mudança no DOM. Usando o método observe você especifica qual elemento você deseja observar e os tipos de modificações sobre os quais você deseja ser notificado.

Um exemplo:

var input = document.getElementById('req');

var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
     console.log(mutation);
     if(mutation.type == "attributes" && mutation.attributeName == "required") {
         console.log(mutation);
         alert("Atributo required modificado!");
     }
 });
});

observer.observe(input, {attributes: true});
Inspecione o elemento e modifique/remova o atributo "required" do input abaixo para testar.<br /><br />
<input type="text" id="req" required />

Lembrando que usar isso pra validação não é uma boa ideia porque o cliente pode simplesmente desabilitar o javascript, modificar seu código, removê-lo, etc.

3
  • Muito obrigado! isso vai ser muito útil para os meus estudos Commented 18/02/2015 às 14:53
  • Ele abriu dois popups para mim quando eu alterei o atributo. Isso era esperado mesmo? Commented 27/02/2018 às 12:04
  • Você tem que trocar o alert pelo código que você quer executar quando o atributo for alterado. Commented 27/02/2018 às 12:45
-8

esse foi meu codigo para umprojeto do portifolio incrementei o codigo usado aqui para a logo do relogio:

setInterval( function clock()  {
const v1 = new Date
const v2 = v5(v1.getHours())
const v3 = v5(v1.getMinutes())
const v4 = v5(v1.getSeconds())
const vX5 = v5x(v1.getMilliseconds())

document.getElementById('clock').textContent = v2 + ':' + v3 + ':' + v4 + ':' + vX5
}, 100);
function v5x(y, z){
if( y <100){
    y = '0' + y
}

if ( z <10){
    z = '0' + z
}
return z , y 

}
function v5(x){
if( x <10){
    x = '0' + x;
}
return x
}
var svg = document.getElementById('logoo');

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
 console.log(mutation);
 if(mutation.type == "attributes" && mutation.attributeName == "data-source") {
     console.log(mutation);
     document.getElementById('logoo').style.display = 'none'
     document.getElementById('clock').style.top = '20px'
     document.getElementById('clock').style.left = '15px'
 }
 });
 });

 observer.observe(svg, {attributes: true});

html : <div class="UAGSh" id="clockDiv"> <div class="OISnsepAr sU" id="separator-x1"></div> <span class="aoiJS dKj" id="jsClockSpan-title">Clock </span><span class="aoiJS dkj" id="jsClockSpan-titlePt"> Relogio</span> <br> <span class="clock" id="clock"></span> <logo class="aUSlogo" id="logo"> <path class="a"> <svg class="USLogo" id="logoo" data-source='ILUOSHDJISMDksdloiadadlçaksd sdapokOPAD Sdkaidjsd adlkiada sod89asoia' ></svg> </path> </logo> </div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .