JavaScript의 DOM(문서 개체 모델) 이해

안녕하세요, 놀라운 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 문서와 통신하는 방법에 대한 실제 그림입니다.

<title>DOM Example</title>


<h1 id="Hello-World">Hello, World!</h1>
<button onclick="changeHeader()">Change Header</button>

<script>
function changeHeader() {
// Use the DOM to access and modify the h1 element
var header = document.getElementById("header");
header.textContent = "DOM Manipulation in Action!";
header.style.color = "blue";
}
</script>

이 예에서 버튼을 클릭하면 DOM을 사용하여

요소는 ID로 표시됩니다. 그런 다음 텍스트 내용과 헤더 색상을 변경합니다.

필수 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 <p> inside a </p><div>
const paragraph = document.querySelector('div p');




<h3>
  
  
  2. 동적 콘텐츠
</h3>

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

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

<h4>
  
  
  예
</h4>



<pre class="brush:php;toolbar:false">// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = '<strong>New content!</strong>';

// 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 Traversal을 사용하면 문서 구조 내에서 이동하여 DOM 트리에서의 위치에 따라 관련 요소에 액세스할 수 있습니다.

Example

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;

Conclusion

The DOM is a powerful tool in JavaScript that enables developers to create rich, interactive web experiences. By understanding and utilizing the DOM, developers can control the behavior and appearance of web pages, making them more engaging and responsive to user interactions.