Существует множество способов изменить заголовок, основные два выглядят так:
Сомнительный метод
Поместите тег заголовка в HTML (например, <title>Hello</title>
), затем в javascript:
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
Очевидно правильный метод
Самое простое - использовать метод, предоставляемый объектной моделью документов (DOM)
document.title = "Hello World";
Первый метод обычно используется для изменения тегов, найденных в теле документа. Использование этого метода для изменения метаданных меток, подобных тем, которые встречаются в голове (например, title
), в лучшем случае является сомнительной практикой, не является идиоматическим, не очень хорошим стилем для начала и может даже не быть переносимым. Однако вы можете быть уверены в том, что другим разработчикам будет неприятно, если они увидят title.innerHTML = ...
в поддерживаемом ими коде.
То, что вы хотите использовать, это последний метод. Это свойство предусмотрено в спецификации DOM специально для целей, как следует из названия, изменения названия.
Обратите внимание, что если вы работаете с XUL, вы можете проверить, что документ загружен, прежде чем пытаться установить или получить заголовок, так как в противном случае вы вызываете undefined behavior
(здесь будут драконы), что пугает Концепция сама по себе. Это может происходить или не происходить с помощью JavaScript, поскольку документы в DOM не обязательно относятся к JavaScript. Но XUL - целое «другое звери», поэтому я отвлекся.
Говоря о .innerHTML
Следует иметь в виду, что использование .innerHTML
обычно небрежно. Вместо этого используйте appendChild
.
Хотя два случая, в которых я все еще считаю полезным .innerHTML
, включают вставку простого текста в небольшой элемент ...
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;
}());
... и очистка контейнера ...
container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
container.removeChild(child);
});