JavaScript HTML DOM 익히기: 동적 및 대화형 웹페이지 구축-JS 튜토리얼-php.cn

Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!