dom 예제

이 섹션에서는 DOM에서 가장 일반적으로 사용되는 인터페이스 중 일부를 나열합니다. 이 아이디어는 이러한 API가 여기서 수행하는 작업을 설명하는 것이 아니라 DOM을 사용할 때 자주 볼 수 있는 메서드 및 속성의 종류를 알려주는 것입니다. 이러한 일반적인 API는 이 설명서 의 끝에 있는 DOM 예제 장의 긴 예제에서 사용됩니다. 이 간단한 예제에서는 HTML 단락 요소의 일부 기본 스타일 속성은 요소의 스타일 개체와 해당 개체의 CSS 스타일 속성을 사용하여 액세스되며, 이 속성은 DOM에서 검색하고 설정할 수 있습니다. 이 경우 개별 스타일을 직접 조작합니다. 다음 예제(예 4 참조)에서는 스타일시트와 해당 규칙을 사용하여 전체 문서의 스타일을 변경할 수 있습니다. 문서 및 창 개체는 DOM 프로그래밍에서 일반적으로 가장 자주 사용하는 인터페이스를 사용하는 개체입니다. 간단히 말해서 창 개체는 브라우저와 같은 것을 나타내며 문서 개체는 문서 자체의 루트입니다. 요소는 제네릭 노드 인터페이스에서 상속되며, 이러한 두 인터페이스는 함께 개별 요소에 사용하는 많은 메서드와 속성을 제공합니다. 이러한 요소에는 이전 섹션의 테이블 개체 예제와 같이 해당 요소가 보유한 데이터의 종류를 처리하기 위한 특정 인터페이스가 있을 수도 있습니다. 요소 콘텐츠의 공백(종종 ”무시할 수 있는 공백”이라고 도함)이 제거된 예제 테이블의 DOM에 대한 그래픽 표현은 다음과 같은 것입니다. 테이블의 값입니다.

또한 for.를 사용하는 유용한 기술을 보여줍니다. in 루프를 사용하여 개체의 속성을 반복하여 해당 값을 가져옵니다. DOM 사양은 DOM API를 형성하는 API 집합을 제공합니다. 각 DOM 사양은 하나 이상의 모듈을 정의하며 각 모듈은 하나의 기능 이름과 연결됩니다. 예를 들어 DOM Core 사양(이 사양)은 두 개의 모듈을 정의합니다. 예를 들어 테이블 개체는 createCaption 및 insertRow와 같은 메서드를 포함하는 특수HTMLTableElement 인터페이스를 구현합니다. 그러나 HTML 요소이기도 하므로 TABLE은 DOM 요소 참조 장에서 설명하는 요소 인터페이스를 구현합니다. 마지막으로, HTML 요소는 DOM과 관련하여 HTML 또는 XML 페이지의 개체 모델을 구성하는 노드 트리의 노드이기 때문에 테이블 개체는 요소에서 파생되는 보다 기본적인 노드 인터페이스도 구현합니다. 다음 예제와 같이 테이블 개체에 대한 참조를 받으면 이러한 세 가지 인터페이스를 개체에서 서로 바꾸어 사용합니다.

예를 들어 웹 페이지의 색상에 영향을 주는 속성의 ”제품군”을 사용하여 단일 페이지로 많은 인터페이스를 테스트하려면 단추, 텍스트 필드 및 기타 HTML 요소의 전체 콘솔을 사용하여 유사한 테스트 페이지를 만들 수 있습니다. 다음 스크린샷은 테스트를 위해 인터페이스를 함께 그룹화하는 방법에 대한 몇 가지 아이디어를 제공합니다. 이 예제에서는 window.getComputedStyle 메서드를 사용하여 설정되지 않은 요소의 스타일을 사용하거나 JavaScript(예: elt.style.backgroundColor=”rgb(173, 216, 230)”로 설정하는 방법을 보여 줍니다. 이러한 후자의 스타일 유형은 DOM CSS 속성 목록에 나열된 보다 직접적인 elt.style 속성을 통해 검색할 수 있습니다. ”&”는 문자 ”&”로 대체되고 P 요소의 텍스트는 문자의 단일 연속 시퀀스를 형성합니다. 숫자 문자 참조와 미리 정의된 엔터티는 CDATA 섹션이나 HTML의 스크립트 및 STYLE 요소에서 인식되지 않으므로 참조하는 것처럼 보이는 단일 문자로 대체되지 않습니다. 위의 예제가 CDATA 섹션에 동봉된 경우 ”&”는 ”&”로 대체되지 않습니다.

시작 태그로 인식되지 않을 것입니다. 일반 엔터티의 표현은 문서 개체 모델 코어의 확장된 XML(XML) 인터페이스 내에서 내부 및 외부 모두 정의됩니다.

Det här inlägget postades i Okategoriserade. Bokmärk permalänken.