Ci sono molti modi in cui puoi cambiare il titolo, i due principali sono così:
Il metodo discutibile
Inserisci un tag title nell'HTML (ad es. <title>Hello</title>
), Quindi in JavaScript:
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
Il metodo ovviamente corretto
Il più semplice di tutti è effettivamente utilizzare il metodo fornito dal Document Object Model (DOM)
document.title = "Hello World";
Il primo metodo è generalmente quello che faresti per modificare i tag trovati nel corpo del documento. L'uso di questo metodo per modificare i tag dei metadati come quelli presenti nella testa (come title
) è una pratica discutibile nella migliore delle ipotesi, non è idiomatico, non è uno stile molto buono all'inizio e potrebbe non essere portatile. Una cosa di cui puoi essere certo è che infastidirà gli altri sviluppatori se vedono title.innerHTML = ...
nel codice che stanno mantenendo.
Quello che vuoi seguire è l'ultimo metodo. Questa proprietà è fornita nelle specifiche DOM in modo specifico allo scopo di, come suggerisce il nome, cambiare il titolo.
Nota anche che se stai lavorando con XUL, potresti voler controllare che il documento sia stato caricato prima di tentare di impostare o ottenere il titolo, poiché altrimenti stai invocando undefined behavior
(qui si tratta di draghi), che è un concetto spaventoso a sé stante. Ciò può accadere o meno tramite JavaScript, poiché i documenti sul DOM non si riferiscono necessariamente a JavaScript. Ma XUL è un'altra bestia, quindi sto divagando.
Parlando di .innerHTML
Un buon consiglio da tenere a mente sarebbe che l'uso .innerHTML
è generalmente sciatto. Usa appendChild
invece.
Anche se due casi in cui trovo ancora .innerHTML
utile includere l'inserimento di testo semplice in un piccolo elemento ...
label.innerHTML = "Hello World";
// as opposed to...
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
let el = document.createElement("span");
el.className = "label";
el.innerHTML = label_text;
return el;
}());
... e svuotare un contenitore ...
container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
container.removeChild(child);
});