안녕하세요, 놀라운 JavaScript 개발자 여러분?

브라우저는 스크립트(특히 JavaScript)가 웹 페이지 레이아웃과 상호 작용할 수 있도록 하는 DOM(문서 개체 모델)이라는 프로그래밍 인터페이스를 제공합니다. 페이지의 구성 요소를 개체로 배열하는 계층적 트리형 구조인 웹 페이지의 DOM(문서 개체 모델)은 브라우저가 로드될 때 브라우저에 의해 생성됩니다. 문서의 스타일, 구성 및 콘텐츠는 모두 이 패러다임의 도움으로 동적으로 액세스되고 변경될 수 있습니다.

DOM을 사용하여 상호작용

JavaScript를 통해 DOM(문서 객체 모델)에서 다음을 포함한 다양한 작업을 수행할 수 있습니다.

• HTML 요소의 콘텐츠 수정
• 요소 및 속성 추가 또는 제거
• 클릭이나 키 누르기와 같은 사용자 이벤트에 응답
• 페이지 내에서 새 이벤트 만들기

예

JavaScript를 사용하면 document.getElementById() 함수로 대상을 지정하고 요소의 innerHTML 속성을 변경하여 요소의 콘텐츠를 변경할 수 있습니다.

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

DOM 구조

문서 개체는 개체 트리로 구성된 DOM의 기본에 있습니다. 모든 HTML 요소는 트리의 노드로 표시되며 이러한 노드는 관련 이벤트, 메서드 및 속성을 가질 수 있습니다. DOM은 이러한 노드를 탐색하고 작업하는 방법을 제공함으로써 스크립트가 페이지를 실시간으로 변경할 수 있도록 합니다.

다음은 일반적인 HTML 문서의 DOM 트리 모양에 대한 기본 예입니다.

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

웹 개발에서 DOM의 기능

DOM은 여러 가지 이유로 웹 개발에 필수적입니다.

• 스크립트가 사용자 입력에 응답하여 페이지의 스타일과 콘텐츠를 변경하도록 하여 동적 및 대화형 웹 페이지를 만드는 것이 가능해졌습니다.
• 다양한 브라우저가 온라인 페이지와 상호 작용하고 조작할 수 있도록 표준화된 인터페이스를 제공하여 플랫폼 전반에 걸쳐 통일성을 보장합니다.
• 단일 페이지 애플리케이션(SPA) 다시 로드할 필요 없이 페이지를 새로 고치는 DOM에 의존하므로 작업에 매우 중요합니다.

DOM 수준 및 표준

W3C(World Wide Web Consortium)는 다양한 웹 브라우저와 시스템에서 신뢰성과 일관성을 보장하는 DOM 표준을 유지합니다. 표준은 다음을 포함하여 다양한 섹션과 수준으로 분류됩니다.

• 모든 문서 유형의 기본 패러다임은 * 핵심 DOM:.
입니다.
• XML 문서 모델은 XML DOM이라고 합니다.
• HTML DOM: 이 모델은 HTML 파일용으로 특별히 제작되었습니다.

모든 DOM 표준 버전에는 더 많은 기능이 추가되어 더욱 복잡한 온라인 문서 조작 및 상호 작용이 가능해졌습니다.

DOM 조작의 실제 예시

다음은 DOM을 사용하여 HTML 문서와 통신할 수 있는 방법에 대한 실제 그림입니다.

Hello, World!
Change Header

이 예에서 버튼을 클릭하면 DOM을 사용하여 해당 ID로

요소에 액세스하는changeHeader() 함수가 호출됩니다. 그런 다음 텍스트 내용과 헤더 색상을 변경합니다.

필수 DOM 기술

1. 쿼리 선택

document.querySelector()를 사용하여 매우 정확하게 요소를 가져옵니다.

설명: querySelector()를 사용하면 CSS 선택기를 사용하여 요소를 선택할 수 있으므로 DOM 요소에 액세스하는 강력하고 유연한 방법이 됩니다.

예

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. 동적 콘텐츠


innerHTML 또는 textContent를 수정하여 페이지 콘텐츠를 즉시 업데이트하세요. 

설명: innerHTML 또는 textContent를 사용하면 요소의 콘텐츠를 동적으로 변경하여 대화형 및 반응형 웹 페이지를 사용할 수 있습니다.


  
  
  예




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';





  
  
  3. 이벤트 청취


 대화형 사용자 경험을 위한 요소에 addEventListener()를 연결합니다. 

설명: addEventListener()를 사용하면 클릭, 키 누르기 또는 마우스 이동과 같은 사용자 작업에 응답하여 대화형 웹 응용 프로그램을 만들 수 있습니다.


  
  
  예




const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});





  
  
  4. DOM 탐색


parentNode, children 및 siblings 속성을 사용하여 DOM 트리를 탐색합니다. 

설명: DOM 탐색을 사용하면 문서 구조 내에서 이동하여 DOM 트리에서의 위치에 따라 관련 요소에 액세스할 수 있습니다.


  
  
  예




const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;





  
  
  결론


DOM은 개발자가 풍부하고 대화형 웹 경험을 만들 수 있도록 지원하는 JavaScript의 강력한 도구입니다. 개발자는 DOM을 이해하고 활용함으로써 웹페이지의 동작과 모양을 제어하여 웹페이지를 사용자 상호 작용에 더욱 매력적이고 반응적으로 만들 수 있습니다.