JavaScript HTML DOM 익히기: 동적 및 대화형 웹페이지 구축
- Mary-Kate Olsen원래의
- 2024-12-20 02:57:12361검색
JavaScript HTML DOM: 전체 가이드
문서 개체 모델(DOM)은 웹 문서용 프로그래밍 인터페이스입니다. 이는 웹페이지의 구조를 개체 트리로 표현하므로 개발자가 JavaScript를 사용하여 HTML 및 CSS를 조작할 수 있습니다. DOM을 마스터하면 동적인 대화형 웹페이지를 만들 수 있습니다.
DOM이란 무엇인가요?
DOM은 HTML 문서를 구조적으로 표현한 것입니다. 이를 통해 JavaScript는 웹페이지의 요소, 속성 및 콘텐츠에 동적으로 액세스하고 조작할 수 있습니다.
예:
이 HTML의 경우:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
DOM 액세스
JavaScript는 DOM 요소를 선택하고 조작하는 방법을 제공합니다.
일반적인 선발 방법
- getElementById ID로 요소를 선택합니다.
const title = document.getElementById("title");
console.log(title.innerText); // Output: Hello, DOM!
- getElementsByClassName 클래스 이름으로 요소를 선택합니다(컬렉션 반환).
const paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].innerText);
- getElementsByTagName 태그 이름(예: div, p)으로 요소를 선택합니다.
const headings = document.getElementsByTagName("h1");
console.log(headings[0].innerText);
- 쿼리선택기 CSS 선택기와 일치하는 첫 번째 요소를 선택합니다.
const title = document.querySelector("#title");
- querySelectorAll CSS 선택기와 일치하는 모든 요소를 선택합니다(NodeList 반환).
const paragraphs = document.querySelectorAll(".description");
DOM 조작
선택한 후에는 요소, 속성 및 콘텐츠를 동적으로 수정할 수 있습니다.
1. 콘텐츠 변경
- innerHTML: HTML 콘텐츠를 설정하거나 가져옵니다.
document.getElementById("title").innerHTML = "Welcome to the DOM!";
- innerText 또는 textContent: 일반 텍스트를 설정하거나 가져옵니다.
document.getElementById("title").innerText = "Hello, World!";
2. 속성 변경
- 요소 속성을 수정하려면 setAttribute 및 getAttribute를 사용하세요.
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
- id, className, src와 같은 속성을 직접 수정합니다.
const image = document.querySelector("img");
image.src = "image.jpg";
3. 스타일 바꾸기
CSS 속성을 직접 수정하세요.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
요소 추가 및 제거
1. 요소 추가
- createElement: 새 요소를 생성합니다.
- appendChild: 부모 요소에 요소를 추가합니다.
const title = document.getElementById("title");
console.log(title.innerText); // Output: Hello, DOM!
2. 요소 제거
- removeChild: 하위 요소를 제거합니다.
const paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].innerText);
DOM에서의 이벤트 처리
이벤트는 클릭이나 키 누르기와 같이 브라우저에서 감지한 동작이나 발생입니다.
이벤트 리스너 추가
addEventListener를 사용하여 이벤트를 요소에 바인딩합니다.
const headings = document.getElementsByTagName("h1");
console.log(headings[0].innerText);
공통행사
- 마우스 이벤트: 클릭, dblclick, 마우스오버, 마우스아웃
- 키보드 이벤트: keydown, keyup
- 양식 이벤트: 제출, 변경, 집중
DOM 탐색
DOM 트리의 관계를 사용하여 요소 간을 탐색할 수 있습니다.
부모와 자식
- parentNode: 상위 노드를 가져옵니다.
- childNodes: 모든 하위 노드를 나열합니다.
- children: 모든 하위 요소를 나열합니다.
const title = document.querySelector("#title");
남매
- nextSibling: 다음 형제 노드를 가져옵니다.
- previousSibling: 이전 형제 노드를 가져옵니다.
고급 DOM 기능
1. 요소 복제
cloneNode를 사용하여 요소의 복제본을 만듭니다.
const paragraphs = document.querySelectorAll(".description");
2. 클래스 작업
클래스를 조작하려면 classList 속성을 사용하세요.
document.getElementById("title").innerHTML = "Welcome to the DOM!";
3. 템플릿 사용
HTML 템플릿은 재사용 가능한 콘텐츠를 허용합니다.
document.getElementById("title").innerText = "Hello, World!";
DOM 조작 모범 사례
-
리플로우 및 다시 그리기 최소화:
- 과도한 렌더링을 방지하기 위해 DOM 변경을 일괄 처리합니다.
- 다중 업데이트에는 documentFragment를 사용하세요.
이벤트 위임 사용:
개별 하위 요소 대신 상위 요소에 이벤트를 연결합니다.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>
<p>The DOM represents it as:<br>
</p>
<pre class="brush:php;toolbar:false">- Document
- html
- head
- title
- body
- h1
- p
- 인라인 JavaScript를 피하세요: 코드를 깔끔하게 분리하려면 외부 스크립트나 addEventListener를 사용하세요.
결론
JavaScript HTML DOM은 동적인 대화형 웹 페이지를 만들기 위한 강력한 도구입니다. 개발자는 DOM 조작, 이벤트 처리 및 모범 사례를 숙지하여 전반적인 사용자 경험을 향상시키는 반응성이 뛰어나고 사용자 친화적인 애플리케이션을 구축할 수 있습니다.
안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어 및 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.
위 내용은 JavaScript HTML DOM 익히기: 동적 및 대화형 웹페이지 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!