자바 스크립트 dom 예제

  • 0

자바 스크립트 dom 예제

웹 페이지는 문서입니다. 이 문서는 브라우저 창또는 HTML 소스로 표시될 수 있습니다. 그러나 두 경우 모두 동일한 문서입니다. DOM(문서 개체 모델)은 동일한 문서를 나타내므로 조작할 수 있습니다. DOM은 JavaScript와 같은 스크립팅 언어로 수정할 수 있는 웹 페이지의 개체 지향 표현입니다. 다음 JavaScript는 문서가 로드될 때(그리고 전체 DOM을 사용할 수 있는 경우) 경고를 표시합니다: 이 예제에서는 querySelector() 메서드를 사용하여 첫 번째

선택되고 색상이 빨간색으로 변경됩니다. 문서 개체의 styleSheets 속성은 해당 문서에 로드된 스타일시트 목록을 반환합니다. 이 예제에서 설명한 것처럼 스타일 시트, 스타일 및 CSSRule 개체를 사용하여 이러한 스타일 시트 및 해당 규칙에 개별적으로 액세스할 수 있으며, 이 경우 모든 스타일 규칙 선택기를 콘솔에 인쇄합니다. 이 장에서는 DOM을 사용하여 웹 및 XML 개발의 몇 가지 더 긴 예를 제공합니다. 가능한 경우 예제에서는 문서 개체를 조작하기 위해 JavaScript에서 일반적인 API, 트릭 및 패턴을 사용합니다.

이 예제에서는

요소에서 내용 식 특성을 제거합니다. 따라서

더 이상 편집할 수 없습니다. 이 예제에서는 DOM 메서드를 사용하여 window.onload 이벤트 개체의 모든 속성과 해당 값을 테이블에 표시합니다. 또한 for.를 사용하는 유용한 기술을 보여줍니다. in 루프를 사용하여 개체의 속성을 반복하여 해당 값을 가져옵니다. 이 예제에서는

부모 요소에 속하는 자식 요소가 새로 생성된 태그로 . HTML은 기본 DOM 구조를 정의합니다. 그러나 대부분의 경우 사이트에 추가 기능을 추가하기 위해 일반적으로 JavaScript로 이 작업을 조작할 수 있습니다. 이벤트는 클릭, 포커스 조정 또는 로드와 같은 HTML 요소에 어떤 일이 발생하는지 말하며 JavaScript로 반응할 수 있습니다. JS 함수를 할당하여 요소에서 이러한 이벤트를 듣고 이벤트가 발생했을 때 작업을 수행할 수 있습니다. 이 예제에서는

이 예제에서는 window.getComputedStyle 메서드를 사용하여 설정되지 않은 요소의 스타일을 사용하거나 JavaScript(예: elt.style.backgroundColor=”rgb(173, 216, 230)”로 설정하는 방법을 보여 줍니다. 이러한 후자의 스타일 유형은 DOM CSS 속성 목록에 나열된 보다 직접적인 elt.style 속성을 통해 검색할 수 있습니다. 최신 DOM은 함께 작동하는 여러 API를 사용하여 빌드됩니다. 핵심 DOM은 문서와 그 안에 있는 개체를 근본적으로 설명하는 개체를 정의합니다. DOM에 새로운 기능과 기능을 추가하는 다른 API에서 필요에 따라 확장됩니다. 예를 들어 HTML DOM API는 핵심 DOM에 HTML 문서를 나타내는 지원을 추가합니다. 개체 모델을 사용하면 JavaScript가 동적 HTML을 만드는 데 필요한 모든 전력을 얻습니다.


Recent Post

큐 스택 예제

마크업 예제

리눅스 qt 예제

Categories

  • No categories
Website is Protected by WordPress Protection from eDarpan.com.