JavaScript를 사용하여 문서 제목을 표시하는 방법은 무엇입니까?

이 튜토리얼에서는 다음을 사용하여 문서 제목을 표시하는 두 가지 접근 방식을 이해합니다. 자바스크립트.

document.title 속성 사용

HTML 문서의 제목에 액세스하기 위해 JavaScript에서 가장 많이 사용되는 방법 중 하나는 document.title 속성을 사용하는 것입니다. 다음 예에서는 JavaScript에서 제목에 액세스한 후 이를 조작하고 제목에 액세스하는 방법을 배웁니다. 웹사이트에 표시되는 방식을 변경하세요.

문법

여기서 onClick 메서드를 사용하여 문서 단락의 innerHTML을 설정하는 방법을 볼 수 있습니다. document.title은 제목을 가져오고 지정된 버튼을 클릭할 때 제목을 표시하는 데 사용됩니다.

으아악

알고리즘

1단계 − HTML 문서 파일에 제목을 작성합니다.

2단계 - 제목을 가져오기 위해 onClick 메서드를 사용하여 버튼을 만듭니다.

3단계 - 캡처된 제목을 표시할 단락 태그를 만듭니다.

4단계 - 문서의 다양한 요소에 필요한 변수를 설정합니다.

5단계 − onClick 버튼에 대한 함수를 만듭니다.

6단계 − document.title 메소드를 사용하여 단락 태그의 변수 innerHTML을 제공합니다.

예제 1

의 중국어 번역은 다음과 같습니다.

예제 1

아래에서 HTML 파일에 ID나 클래스를 제공하지 않고 문서 제목에 액세스하는 방법을 볼 수 있습니다. document.title을 사용하여 제목에 액세스할 수 있습니다.

으아악

etElementsByTagName() 메서드 사용

일반적으로 타이틀이 다른 플랫폼에서 작동하도록 하려면 JavaScript 기능을 사용해야 합니다. 이 메서드에서는 document.getElementsByTagName() 속성을 사용하여 제목을 가져오는 방법을 알아봅니다. 이 메소드는 태그 이름을 매개변수로 받아들이고 지정된 태그 이름을 가진 모든 요소의 컬렉션을 반환합니다.

문법

으아악

여기 "title"은 메소드에 대한 매개변수입니다.

이 메소드는 "title" 라벨이 있는 모든 요소의 컬렉션을 반환합니다.

다른 요소를 얻으려면 수신된 컬렉션에 인덱싱을 적용해야 합니다. 여기서 idx는 제목의 인덱스입니다. 예를 들어 첫 번째 제목을 얻으려면 idx를 0로 설정합니다. 두 번째 제목을 얻으려면 idx를 1.

로 설정합니다.

알고리즘

1단계 − HTML 문서의 제목 태그 안에 내용을 작성합니다.

2단계 - onClick 메소드를 사용할 수 있는 버튼 라벨을 만듭니다.

3단계 − 단락 태그를 생성하고 JavaScript에서 액세스할 수 있도록 ID를 제공하세요.

4단계 - 문서의 모든 중요한 요소에 ID나 클래스를 할당할 수 있습니다.

5단계 − 필요한 요소를 가져올 수 있는 다른 변수를 만듭니다.

6단계 - onClick 메서드에 대한 함수를 만듭니다.

7단계 - 단락에 대해 생성된 변수는 tagName() 속성을 사용하여 innerHTML로 설정되어야 합니다.

예 2

이 예에서는 태그 이름으로 제목을 선택하겠습니다. document.getElementsByTagName() 메서드를 사용하여 HTML 문서에서 제목을 빠르게 가져오는 방법을 알아봅니다. HTML 문서에 두 개의 헤더를 추가했습니다. 두 개의 버튼을 사용하여 이 두 개의 제목을 찾습니다.

으아악

여기서 문서에 서로 다른 제목을 표시하는 두 개의 버튼이 추가된 것을 볼 수 있습니다. 이 출력에서 ​​tagName() 속성 뒤에 0 인덱스를 추가하면 첫 번째 제목을 얻는 데 도움이 될 수 있음을 이해할 수 있습니다.

document.title 속성과 getElementByTagName() 메서드는 모두 문서 제목에 액세스하는 데 사용됩니다. JavaScript에서 두 가지 방법을 모두 시도해보고 원하는 방법을 선택할 수 있습니다. 문서 헤더의 동작을 조작하려면 JavaScript를 사용하여 헤더에 액세스하는 것이 좋은 출발점이 될 수 있습니다.

위 내용은 JavaScript를 사용하여 문서 제목을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!