Come posso rilevare DOM pronto e aggiungere una classe senza jQuery?

Desidero riscrivere questa riga senza utilizzare jQuery in modo che possa essere applicata più rapidamente (e prima del download della libreria jQuery). La linea è ...Come posso rilevare DOM pronto e aggiungere una classe senza jQuery?

$(document).ready(function() { $('body').addClass('javascript'); });

Se ho aggiunto all'elemento html invece, sarei in grado di lasciare fuori la parte pronta DOM? Un problema con questo però è che al validatore non piace l'attributo class sull'elemento html, anche se è inserito con JS.

Quindi, come potrei riscriverlo senza jQuery?

fonte

2009-11-25 alex

Avrai bisogno di un'API DOM, non puoi farlo in vanilla JS (non puoi fare molto di tutto in vanilla JS). ;) – Quentin

Che cosa esattamente vuoi raggiungere? Vuoi dire al CSS che JavaScript è disponibile? Vuoi farlo il prima possibile utilizzando eventi specifici del browser? Il semplice evento "onload" funziona per te? Qualsiasi input aggiuntivo potrebbe aiutarti a darti la risposta giusta. –

@David: cos'è scritto in jQuery? –

Se si desidera riprodurre l'evento document.ready di jQuery, è possibile utilizzare onreadystatechange o DOMContentLoaded eventi se del caso:

function domReady() { 
    document.body.className += " javascript"; 
    // ... 
} 

// Mozilla, Opera, Webkit 
if (document.addEventListener) { 
    document.addEventListener("DOMContentLoaded", function(){ 
    document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
    domReady(); 
    }, false); 

// If IE event model is used 
} else if (document.attachEvent) { 
    // ensure firing before onload 
    document.attachEvent("onreadystatechange", function(){ 
    if (document.readyState === "complete") { 
     document.detachEvent("onreadystatechange", arguments.callee); 
     domReady(); 
    } 
    }); 
}

fonte

2009-11-25 07:11:45 CMS

Vedi anche: http://stackoverflow.com/questions/2304941/questo-è-il-non-jquery-equivalent-of-document-ready – user456584

Perché stai staccando l'evento readystatechange? IE8 licenzia quell'evento due volte? Perché? –

@Jan Suppongo che sia stato trascritto dall'origine jQuery, che aggiunge anche un ascoltatore fallback a window.onload. Pertanto, nell'origine jQuery, la prima volta che viene richiamato il callback è necessario rimuovere i listener per evitare di richiamare due volte, una volta per ogni evento. Ma poiché questo codice non include quel fallback, non penso sia necessario rimuovere l'ascoltatore. Ma sto solo speculando. – pgraham

window.onload = function() { 
    var elmt = document.getElementsByTagName('body'); 
    if(elmt){ 
     elmt[0].className = 'javascript'; 
    } 
}

Che dovrebbe farlo.

MODIFICA: aggiornato per ottenere l'elemento in base al nome del tag non ID.

fonte

2009-11-25 06:55:02 jaywon

stai cercando l'id #body here ... – David

@David, thx for the heads up. non fare un sacco di jQuery in modo presunto che doveva trovare un elemento per ID. – jaywon

Sono abbastanza sicuro che 'onload' viene attivato dopo' $ (document) .ready' - Penso che sia in attesa di caricare tutte le immagini, per esempio. – Kobi

Non so circa vaniglia JS, ma si può scrivere:

document.getElementsByTagName('body')[0].className += ' javascript';

in fondo alla pagina (prima della chiusura del tag body).

fonte

2009-11-25 06:55:23 David

'document.getElementsByTagName ('body') [0] === document.body' – alex

Dopo la chiusura' body' funzionerebbe pure. Anche dopo la chiusura 'html' – oriadam

Semplice:

window.onload = function() { 
    document.body.className = "javascript"; 
}

O in HTML:

<body onload="document.body.className = 'javascript'">...</body>

A meno che non si vuole distinguere tra "prima onload" e "dopo onload", lo si può fare in modo statico:

<body class="javascript">...</body>

fonte

2009-11-25 07:05:52

penso che stia cercando di aggiungere la classe, per indicare che javascript è abilitato - quindi il tuo terzo esempio non lo farebbe. Inoltre, abbastanza sicuro che DOMReady si attiva prima del caricamento (che attenderà immagini e risorse esterne) –

Sentiti libero di ignorare il terzo esempio. In tutta onestà non ha indicato ciò che vuole ottenere da ciò. –

Hai provato a mettere alla fine del tuo corpo il seguente?

<script> 
    document.body.className = 'javascript'; 
</script>

fonte

2009-11-25 09:43:19 Mic

appena messo questo tag

<script>document.body.className += ' javascript';</script>

prima </body>. Soluzione semplice e facile (e molto vicino).

fonte

2009-11-25 09:47:46 NilColor

Se il vostro obiettivo è quello di aggiungere la classe di body immediatamente come la pagina viene caricata, forse per nascondere no-JS-fallback elementi, si potrebbe fare che appena subito all'interno del tag body invece di aspettare che tutti gli eventi:

<body> 
    <script type="text/javascript"> 
     document.body.className+= ' javascript'; 
    </script>

(anche se, in generale, se questo è l'obiettivo che è meglio rimuovere gli elementi di fallback come si va avanti la loro sostituzione con elementi script, in modo che se un pezzo di errori di script fuori tutti gli altri componenti sulla pagina non si rompono .)

Questo è il modo più veloce per associare elementi: farlo subito dopo aver creato il m (all'interno del tag aperto se hai solo bisogno di modificare gli elementi; subito dopo il tag vicino se è necessario modificare il loro contenuto). Tuttavia questo approccio tende a sporcare la pagina con i brutti blocchi <script>, motivo per cui più persone mettono il codice tutto in basso o usano un gestore di carico/pronto.

fonte

2009-11-25 10:51:10 bobince

Se si tratta solo di browser moderni, è possibile posizionarlo subito dopo il tag di apertura body.

<script> 
    document.body.classList.add("javascript"); 
</script>

fonte

2013-03-13 22:39:44 alex

Come posso rilevare DOM pronto e aggiungere una classe senza jQuery?

risposta

Problemi correlati