javascript dom 예제

이 장에서는 DOM을 사용하여 웹 및 XML 개발의 몇 가지 더 긴 예를 제공합니다. 가능한 경우 예제에서는 문서 개체를 조작하기 위해 JavaScript에서 일반적인 API, 트릭 및 패턴을 사용합니다. 이 예제에서는 요소를 appendChild() 및 전술한 createElement() 메서드를 사용하는

요소의 자식으로 삽입합니다. 이 예제에서는 콘텐츠를 편집할 수 있는 설정 하는 setAttribute() 메서드를 사용 하 여
콘텐츠 속성을 추가 합니다. 이 예제에서는 window.getComputedStyle 메서드를 사용하여 설정되지 않은 요소의 스타일을 사용하거나 JavaScript(예: elt.style.backgroundColor=”rgb(173, 216, 230)”로 설정하는 방법을 보여 줍니다. 이러한 후자의 스타일 유형은 DOM CSS 속성 목록에 나열된 보다 직접적인 elt.style 속성을 통해 검색할 수 있습니다. 최신 DOM은 함께 작동하는 여러 API를 사용하여 빌드됩니다. 핵심 DOM은 문서와 그 안에 있는 개체를 근본적으로 설명하는 개체를 정의합니다. DOM에 새로운 기능과 기능을 추가하는 다른 API에서 필요에 따라 확장됩니다. 예를 들어 HTML DOM API는 핵심 DOM에 HTML 문서를 나타내는 지원을 추가합니다. 이 예제에서는 이벤트가 발생하고 DOM에서 매우 간단한 방식으로 처리되는 방법을 보여 줍니다. 이 HTML 문서의 BODY가 로드되면 이벤트 수신기가 TABLE의 맨 위 행에 등록됩니다.

이벤트 수신기는 테이블의 아래쪽 셀에서 값을 변경하는 함수 stopEvent를 실행하여 이벤트를 처리합니다. 이 예제에서는 cloneNode()가 있는 요소에 대한 복사본을 만든 다음 앞서 언급한 appendChild() 메서드를 사용하여

태그에 자식 요소로 추가합니다. 이 예제에서는 쿼리Selector() 메서드를 사용하여 첫 번째
선택되고 색상이 빨간색으로 변경됩니다. 이 예제에서는 일부 텍스트가 있는 새 요소를 만들고
부모 요소 내부의 요소 앞에 추가합니다. 다음 예제를 통해 새 단락 요소를 만들 수 있습니다. 그러나 이 예제에서는 모든 단락이 querySelectorAll()을 사용 하 고 파란색으로 색이 지정 됩니다. 이 예제에서는 이전 appendChild() 메서드에 대 한 코드 예제에서
태그에 자식으로 추가 한 요소를 제거 합니다. 이 예제에서는 createElement() 메서드를 사용하여 여러 테이블 행과 셀을 만든 다음 DocumentFragment 개체에 추가하고 마지막으로 appendChild() 메서드를 사용하여 HTML
해당 문서 조각을 추가합니다. 문서 개체의 styleSheets 속성은 해당 문서에 로드된 스타일시트 목록을 반환합니다. 이 예제에서 설명한 것처럼 스타일 시트, 스타일 및 CSSRule 개체를 사용하여 이러한 스타일 시트 및 해당 규칙에 개별적으로 액세스할 수 있으며, 이 경우 모든 스타일 규칙 선택기를 콘솔에 인쇄합니다.

염두에 두어야 할 몇 가지 일반적인 용어 고려 사항도 있습니다. 예를 들어 모든 특성 노드를 단순히 특성으로 참조하고 DOM 노드의 배열을 nodeList로 참조하는 것이 일반적입니다. 이 용어와 다른 용어는 설명서 전체에서 소개되고 사용될 수 있습니다. 공백과 줄 바선은 완전히 유효한 문자이며 텍스트 노드를 형성하고 DOM의 일부가 됩니다. 예를 들어 위의 태그에는