[javascript] 웹 페이지 제목을 동적으로 변경하는 방법은 무엇입니까?

제목을 변경할 수있는 방법은 여러 가지가 있습니다. 주요 두 가지는 다음과 같습니다.

의심스러운 방법

HTML (예 <title>Hello</title>:)에 자바 스크립트에 제목 태그를 넣습니다 .

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

분명히 올바른 방법

가장 간단한 방법은 DOM (Document Object Model)에서 제공하는 방법을 실제로 사용하는 것입니다

document.title = "Hello World";

---

전자의 방법은 일반적으로 문서 본문 에있는 태그를 변경하기 위해 수행하는 방법입니다 . 이 방법을 사용하여 머리에서 발견되는 것과 같은 메타 데이터 태그를 수정하는 title것은 기껏해야 의심스러운 관행이 아니며, 관용적이지 않으며, 스타일이 좋지 않으며, 휴대하기가 쉽지 않을 수도 있습니다. 그러나 당신이 확신 할 수있는 한 가지는 다른 개발자 title.innerHTML = ...들이 그들이 관리하고있는 코드에서 볼 경우 성가 시게된다는 것입니다 .

당신 이 가고 싶은 것은 후자의 방법입니다. 이 속성은 이름에서 알 수 있듯이 제목을 변경하기 위해 DOM 사양에 구체적으로 제공됩니다 .

XUL로 작업하는 경우 제목을 설정하거나 가져 오기 전에 문서가로드되었는지 확인해야합니다. 그렇지 않으면 undefined behavior자체적으로 무서운 개념 인 호출 (여기서는 용)이 있습니다. DOM의 문서가 반드시 JavaScript와 관련이있는 것은 아니므로 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);
});

---

답변