>웹 프론트엔드 >JS 튜토리얼 >자바스크립트의 문서 메소드

자바스크립트의 문서 메소드

下次还敢
下次还敢원래의
2024-05-08 22:18:22808검색

JavaScript의 문서 개체는 HTML 문서에 액세스하고 조작하는 메서드를 제공합니다. 일반적인 메소드는 다음과 같습니다. getElementById(id): ID를 기반으로 요소를 가져옵니다. getElementsByTagName(tag): 태그 이름을 기반으로 요소 컬렉션을 가져옵니다. getElementsByClassName(class): 클래스 이름을 기반으로 요소 컬렉션을 가져옵니다. querySelector(selector): CSS 선택기를 기반으로 첫 번째로 일치하는 요소를 가져옵니다. querySelectorAll(selector): CSS 선택자를 기반으로 일치하는 요소 집합을 가져옵니다.

자바스크립트의 문서 메소드

JavaScript의 문서 메서드

JavaScript의 문서 개체는 현재 HTML 문서를 나타냅니다. 문서 요소와 구조에 액세스하고 조작하기 위한 풍부한 API를 제공합니다.

일반적인 문서 방법

다음은 가장 일반적으로 사용되는 문서 방법입니다.

  • getElementById(id): 요소의 id 속성을 기반으로 요소 참조를 가져옵니다.
  • getElementsByTagName(tag): 태그 이름을 기반으로 일치하는 모든 요소의 컬렉션을 가져옵니다.
  • getElementsByClassName(class): 클래스 이름을 기준으로 일치하는 모든 요소의 컬렉션을 가져옵니다.
  • querySelector(selector): CSS 선택기를 사용하여 첫 번째로 일치하는 요소를 가져옵니다.
  • querySelectorAll(selector): CSS 선택기를 사용하여 일치하는 모든 요소의 컬렉션을 가져옵니다.
  • createElement(element): 새 요소를 만듭니다.
  • appendChild(child): 현재 요소에 하위 요소를 추가합니다.
  • removeChild(child): 현재 요소에서 하위 요소를 제거합니다.
  • createTextNode(text): 텍스트 노드를 만듭니다.
  • write(text): 문서 스트림에 HTML 코드를 작성합니다.

문서 메서드 사용

문서 메서드를 사용하려면 다음 구문을 사용할 수 있습니다.

<code class="javascript">document.<method_name>(parameters);</code>

예를 들어 ID를 기반으로 요소를 가져오려면 다음 코드를 사용할 수 있습니다.

<code class="javascript">const element = document.getElementById("element-id");</code>

기타 메서드

위에 나열된 메서드 외에도 문서 개체는 다음과 같은 추가 메서드도 제공합니다.

  • addEventListener(event, Listener): 문서에 이벤트 리스너를 추가합니다.
  • removeEventListener(event, Listener): 문서에서 이벤트 리스너를 제거합니다.
  • getCompulatedStyle(element): 요소의 계산된 스타일을 가져옵니다.
  • documentElement: 문서의 루트 요소(일반적으로 요소)를 반환합니다.
  • body: 문서의 본문 요소(일반적으로 요소)를 반환합니다.

위 내용은 자바스크립트의 문서 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.