자바스크립트의 DOM

문서 개체 모델(DOM)

DOM API는 웹 문서용 프로그래밍 인터페이스입니다. 프로그램이 문서의 구조, 스타일, 내용을 변경할 수 있도록 페이지를 나타냅니다.

DOM은 문서를 개체 트리로 나타냅니다. 각 개체는 페이지의 일부를 나타냅니다.

JavaScript의 DOM 작업

JavaScript로 DOM을 구현할 때 다음과 같은 기본 지식을 고려할 수 있습니다.

1. querySelector: 탐욕스러운 선택자입니다. 지정된 첫 번째 요소를 선택합니다.

예:

querySelector("h1")

이렇게 하면 전체 HTML 문서에서 첫 번째 h1 요소를 찾습니다.

2. querySelectorAll: 이는 HTML 문서의 모든 h3 요소를 대상으로 합니다.

예:

querySelectorAll("h3")

콘솔에 노드 목록으로 출력됩니다.

참고: 노드 목록은 배열처럼 보이지만 큰 차이가 있습니다

노드 목록은 브라우저 API이고 배열은 JavaScript API입니다. 즉, 노드 목록은 JavaScript에 속하지 않으므로 루프를 구현할 수 없습니다.

또한 getElementbyTagName()과 querySelectorAll은 JavaScript 메서드가 아니라 브라우저 API입니다.

innerHTML 및 innerText

innerText 대신 innerHTML을 사용하는 것이 좋습니다. 이렇게 하면 다른 사람이 스크립트를 수정하는 것을 제한할 수 있습니다.

요소 배치 방법

• 문서에서 작업할 요소를 찾거나 선택하는 방법은 다양합니다.

이러한 방법에는 다음이 포함됩니다.

ID별 이름으로 수업별로 태그로 태그 이름으로

참고: 브라우저에서 항목을 선택하기 위해 ID 및 Class를 사용하지 않습니다.

따라서 querySelector을 사용합니다.

JavaScript의 주요 개념.

a) 호이스팅: 이 점을 설명하기 위해 예를 들어 보겠습니다.

예:

1. console.log(a);
2. var a;
3. a = 5;
4. console.log(a);

콘솔에서 실행하면 온라인 1번 라인이 정의되지 않음으로 출력됩니다.

이는 처음에 를 명시적으로 선언하지 않았음에도 브라우저에서 "마법처럼" 선언되었다는 뜻인데, 이를 호이스팅이라고 합니다.

일반적으로 4행의 경우 a가 명시적으로 초기화되었기 때문에 출력은 5가 됩니다.

b) 클로저: 함수가 생성될 때마다 클로저가 생성됩니다.

c) 전역 실행 컨텍스트 : 전역 실행 컨텍스트는 함수 내부가 아닐 때 JavaScript 코드가 실행되는 환경입니다.

d) 콜 스택: 스크립트가 함수를 호출하면 인터프리터가 이를 스택에 추가하고 함수 실행을 시작합니다.

내 GitHub 링크 링크드인

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