DOM 프로그래밍 : 코드를 사용하여 웹 페이지 조작

폭로: 귀하의 지원은 사이트 운영을 유지하는 데 도움이됩니다! 이 페이지에서 권장하는 일부 서비스에 대한 추천 수수료가 발생합니다.


문서 객체 모델 또는 DOM은 HTML 페이지의 모든 요소가 문서 자체와 어떤 관련이 있는지 설명합니다..

본질적으로 웹에 업로드 된 모든 HTML, XHTML 또는 XML 페이지는 문서가됩니다. DOM은 이러한 문서를 트리 구조로 간주합니다. 문서 자체는 최상위 구조이며 페이지의 각 요소는 객체로 표시됩니다..

즉, 모든 이미지, 모든 단락, 모든 제목 등은 문서와 고유 한 관계가있는 별도의 개체입니다..

웹 개발자는 이름으로 특정 요소를 호출하여 해당 요소를 수정할 수 있습니다. 이것은 웹 개발자가 자신의 속성을 검색하고 설정할 수 있음을 의미합니다.

DOM을 사용하면 요소 또는 객체를 추가하고 제거 할 수도 있습니다. 마지막으로, 웹 개발자는 이벤트를 효과적으로 처리하여 사용자 또는 브라우저 조치를 캡처하고 이에 응답 할 수 있습니다..

DOM의 연혁

DOM의 역사는 브라우저 전쟁과 첫 스크립팅 언어의 출시로 거슬러 올라갑니다..

Netscape Navigator와 Microsoft Internet Explorer가 자체 JavaScript 버전을 출시 한 후 개발자는 페이지의 요소를 해당 스크립팅 언어로 액세스 할 수있는 인터페이스가 필요하다는 것을 알게되었습니다..

당연히 각 브라우저마다 고유 한 방법이 있었지만 브라우저 공급 업체가 새로운 기능을 추가하여 서로를 능가하려고 시도함에 따라 많은 호환성 문제가 발생했습니다..

결국 W3C는 모든 브라우저에서 이식 가능해야하는 Level 1 DOM이라고도하는 XML DOM에 대한 사양 작업을 시작했습니다..

또한 XML 문서를 조작 할 수있는 모든 프로그래밍 언어에서도 작동합니다. 이 사양은 1998 년 말에 표준으로 채택되었습니다. 현재 버전은 2015 년의 W3C 권장 사항 인 DOM 4입니다..

DOM의 두 가지 관점

DOM은 두 부분으로 구성됩니다. 핵심과 HTML. 핵심은 HTML 부분의 기초이며 XML 문서가 문서 구조, 해당 요소 및 속성을 조작하는 데 필요한 기능을 나타내는 데 사용됩니다..

HTML 부분은 특정 HTML 요소와 그 기능을 정의합니다. 따라서 DOM은 API와 객체로 간주됩니다.

API로서의 DOM

API (Application Programming Interface)로서 HTML 및 XML 문서 모두에 사용됩니다. 이 문서에 사용 된 표준 개체 집합을 제공하고 해당 개체를 결합, 액세스 및 조작하는 방법의 모델로도 사용됩니다..

객체로서의 DOM

DOM의 객체 모델은 문서와 요소가 객체로 정의되어 있다는 사실을 나타냅니다. 그런 의미에서 다음을 식별합니다.

  • 문서를 표현하고 조작하는 데 사용되는 인터페이스 및 객체
  • 그들의 행동과 속성
  • 그들의 관계.

DOM 구조

구조적으로 DOM은 모델링하는 문서와 매우 유사합니다. 문서의 모든 요소는 계층 적 방식으로 구성된 객체 또는 노드로 인식됩니다..

각 노드에는 기능과 ID가 있으며 각 노드에는 여러 개의 자식 노드가있을 수 있습니다. 가장 일반적인 노드는 요소, 텍스트 및 속성입니다..

요소 노드

요소 노드는 HTML 코드에서 개별 태그 또는 태그 쌍입니다. 다른 노드 나 텍스트 노드 일 수있는 자식 노드가있을 수 있습니다..

텍스트 노드

텍스트 노드는 HTML 태그 사이의 실제 내용입니다. 일반적으로 부모 노드가 있으며 때로는 형제 노드가 있지만 자체 자식 노드를 가질 수는 없습니다..

속성 노드

속성 노드는 다소 특별합니다. 부모 노드, 자식 노드 또는 형제 노드는 없지만 HTML 태그에 정의 된 속성 (예 : a 태그의 href 속성 또는 img 태그의 src 속성)을 나타냅니다..

document.createAttribute ()를 사용하여 새 속성을 만든 다음 요소 노드에 할당하고 해당 값을 설정할 수 있습니다. 속성을 참조하는 또 다른 방법은 getAttribute ()를 사용하여 직접 요소 속성에 액세스하고 setAttribute () 메소드를 사용하여 값을 설정하는 것입니다.

속성에 대해 이야기 할 때 HTML 태그와 함께 사용되는 대부분의 속성은 해당 태그와 관련된 특정 속성에 대한 단일 값으로 구성된 비교적 단순하다는 점을 언급 할 가치가 있습니다. 그러나 더 복잡한 스타일 속성도 있습니다.

스타일 속성은 CSS의 도움으로 적용됩니다. 이를 사용하여 개별 태그, 특정 유형의 모든 태그에 스타일을 적용하거나 클래스를 사용하여 스타일 속성을 지정할 수 있습니다.

문제를 더욱 복잡하게하기 위해 특정 요소의 스타일을 이러한 소스에서 상속 할 수 있습니다. 태그의 스타일 속성을 변경하거나 태그의 클래스 속성을 사용하여 해당 스타일을 조작하고 변경할 수도 있습니다..

그러나 이렇게하면 요소의 모든 스타일 매개 변수가 변경되고 경우에 따라 단일 스타일 매개 변수 만 변경하려는 경우 실용적이지 않은 경우가 있습니다..

운좋게도, 스타일 속성은 다른 속성과 다릅니다. 그것들은 객체로 정의되며 가능한 모든 매개 변수에 대한 속성을 갖습니다. 그런 다음 이러한 속성에 액세스하여 업데이트하거나 조작 할 수 있습니다.

DOM 사용

각 문서는 객체이기 때문에 다른 노드를 조작하기위한 시작점 역할을합니다. 이러한 자식 노드는 다음 방법을 사용하여 액세스하고 조작 할 수 있습니다.

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

다음 방법을 사용하여 노드를 동적으로 추가, 업데이트 및 제거 할 수도 있습니다.

  • insertBefore ()
  • replaceChild ()
  • removeChild ()
  • appendChild ()
  • cloneNode ().

DOM은 HTML, CSS 및 JavaScript에 직접 연결되어 있으며, 이러한 표준에 의해 정의 된 태그 및 속성을 반영하고 클라이언트 측 스크립팅을위한 API 역할을하기 때문입니다.

자원

다음 리소스 목록은 DOM에 대한 자세한 개요를 제공하며 초보자와 고급 사용자 모두에게 적합합니다. 참조 목록과 예제가 포함 된 리소스도 포함되어 있습니다..

  • JavaScript 및 DOM 시리즈 : JavaScript를 사용하여 DOM을 조작하는 방법에 대해 자세히 설명하는 매우 상세한 자습서 시리즈입니다..
  • JavaScript DOM 학습서 : JavaScript에서 DOM에 액세스하고 조작하는 방법을 알려주는 대화식 학습서 세트. JavaScript에 대한 사전 지식이 있다고 가정하지만 특정 라이브러리가 사용되지 않는다고 언급 할 가치가 있습니다..
  • DOM 노드 : DOM이 어떻게 구성되고 어떤 노드를 포함하는지 알고 싶어하는 초보자에게 적합한 DOM 노드에 대한 철저한 개요.
  • JavaScript DOM — 연습, 연습, 솔루션 : 간단한 연습에서 더 복잡한 연습에 이르기까지 DOM과 관련된 다양한 연습 모음.
  • W3C DOM (Document Object Model) : W3C에서 발행 한이 안내서는 DOM에 대한 입문 및 초보자 친화적 인 개요, 히스토리 및 작동 방식을 제공합니다..
  • DOM 소개 : HTML 및 XML 문서의 구조를 제공하는 방법 및 액세스 방법을 설명하는 Mozilla Developer Network에서 발행 한 DOM에 대한 간략한 개념 소개.
  • W3C DOM4 : 2015 년부터 W3C가 제안한 최신 DOM 권장 사항에는 DOM에 대한 개요 및 세부 사양이 포함되어 있습니다..
  • DOM 참조 : 속성, 메서드, 이벤트 등을 포함하여 Microsoft 개발자 네트워크에서 게시 한 편리한 참조 목록.

서적

책에서 배우기를 선호한다면 많은 옵션이 있습니다. 목록의 책은 DOM, 작동 방식 및 문서 조작 방법에 대해 자세히 설명합니다..

  • DOM 스크립팅 : Jeremy Keith의 JavaScript 및 Document Object Model (2005)을 사용한 웹 디자인 :이 책은 코드 전문가는 아니지만 JavaScript 및 DOM을 빠르게 배우고 활용하여 추가하려는 사용자에게 빠르고 쉬운 참조를 제공합니다. 그들의 웹 사이트에 기능. 여기에는 많은 예제가 포함되어 있으며 여러 실제 프로젝트를 구축하는 독자를 안내합니다.
  • Joe Marini의 Document Object Model (2002) :이 책의 저자는 DOM의 개념, 디자인, 이론 및 기원을 배우는 데 도움을줍니다. 책 전체에서 DOM을 사용하여 문서의 노드와 내용을 검사, 탐색 및 조작합니다. 그런 다음 다시 코딩하지 않고도 DOM 호환 구현으로 쉽게 이식 할 수있는 유용한 응용 프로그램을 구축하는 방법을 배웁니다..
  • DOM Enlightenment : Cody Lindley의 JavaScript 및 Modern DOM (2013) 살펴보기 :이 책의 도움으로 DOM 라이브러리를 사용하지 않고 DOM (Document Object Model)을 스크립팅하여 HTML을보다 효율적으로 조작하는 방법을 배우게됩니다. 요약하기 쉬운 많은 예제를 통해 저자는 다양한 노드 객체의 작동 방식을 보여주기 위해 최신 DOM 개념을 완벽하게 안내합니다.

앞서 가고 DOM을 통과

DOM을 이해하는 것은 야심 찬 웹 개발자에게 필수적인 개념 중 하나입니다..

그것에 대한 가장 좋은 부분은 그것을 사용하기 위해 특별한 도구가 필요 없다는 것입니다. 스크립트와 선호하는 브라우저 만 있으면됩니다. 스크립트를 작성하여 웹 페이지에 포함 시키 자마자 문서 또는 창 요소에 API를 사용하여 다양한 방법으로 문서를 조작 할 수 있습니다..

위의 리소스는 DOM을 통과하는 데있어 확실한 출발점 역할을합니다..

추가 자료 및 자료

코딩 및 웹 사이트 개발과 관련된 추가 가이드, 자습서 및 인포 그래픽이 있습니다.

  • 올바른 HTML 작성 : 올바른 HTML 작성 및 HTML 유효성 검사기 소프트웨어 사용에 대한 견고한 소개입니다..
  • CSS3 — 소개, 가이드 및 리소스 : 웹 페이지 레이아웃 학습을 시작하기에 좋은 장소.
  • ASP.NET 리소스 :이 가이드는 웹 페이지를 만들기위한 Microsoft의 .NET 프레임 워크를 소개합니다..

초보자를위한 HTML-최고의 가이드

HTML을 배우고 싶다면 책 길이의 기사 인 HTML for Beginners — Ultimate Guide를 작성했습니다..

그리고 그것은 정말로 궁극적 인 가이드입니다. 처음부터 숙달까지 당신을 데려 갈 것입니다.

초보자를위한 HTML-Ultimate Guide
초보자를위한 HTML-최고의 가이드

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map