JavaScript 궁극의 가이드 02: DOM

DOM은 웹 개발자에게 가장 중요한 개념 중 하나입니다. 웹 개발자로서 동적 웹 페이지를 생성하려면 DOM을 통해 수행해야 합니다.

이 기사에서는 dom이 무엇이며 DOM을 사용하여 웹 페이지를 조작하는 방법을 보여줍니다.

내용의 테이블

Prerequisite

What is DOM?

Selecting Single Element with DOM

Selecting multiple elements with DOM

Styling an Element with DOM

Adding Events with addEventListener

전제 조건

JavaScript의 기본 사항을 알고 있다고 가정합니다.
기본을 아직 모르더라도 걱정하지 마십시오. 나는 모든 주제를 다루는 기사를 썼다. 당신은 그것을 읽을 수 있습니다

자, 지체하지 말고 시작합시다.

DOM이란 무엇입니까?

DOM은 문서 객체 모델을 나타냅니다.

다음은 MDN이 DOM에 대해 말하는 내용입니다.

The Document Object Model (DOM) is a programming interface for web documents
. It represents the page so that programs can change the document structure, style, and content.

JavaScript로 DOM을 조작하면 웹 페이지에 상호 작용을 추가할 수 있습니다.

DOM으로 웹 페이지를 조작하는 방법을 살펴보겠습니다.

DOM으로 단일 요소 선택

웹 페이지를 조작하려면 먼저 해당 요소에 액세스해야 합니다. DOM을 사용하면 다양한 방법으로 단일 요소에 액세스할 수 있습니다. 다음은 몇 가지입니다.

getElementById("요소 ID")

querySelector("요소 이름 또는 클래스 또는 ID")

//get element by ID
const element = document.getElementById("intro");

//Get element with querySelector
const elementQuery = document.querySelector("intro");

DOM으로 여러 요소 선택

DOM으로 작업할 때 때때로 여러 요소를 한 번에 선택해야 합니다. 한 번에 여러 요소를 얻는 방법에는 여러 가지가 있습니다.

처럼:

getElementsByClassName("Id");

querySelectorAll("소개")

//get all elements by class names
const element = document.getElementsByClassName("intro");

//Get all elements with querySelector
const elementQuery = document.querySelector("intro");

DOM으로 요소 스타일 지정

이제 단일 요소와 여러 요소를 선택하는 방법을 알았습니다.

선택한 요소에 스타일을 추가해 보겠습니다.

.style 속성과 추가하거나 변경하려는 CSS 속성을 사용하여 요소에 스타일을 추가할 수 있습니다.

여기에 예가 있습니다.

const body = document.quearySelector("body");
body.style.color = "red";

addEventListener로 이벤트 추가하기

요소에 이벤트를 추가하기 전에 먼저 이벤트가 무엇인지 이해해야 합니까?

이벤트는 사용자나 브라우저가 어떤 작업을 수행할 때 발생하는 일종의 작업입니다.

다음은 이벤트의 몇 가지 예입니다.

브라우저가 웹 사이트를 로드합니다

.

사용자가 입력 필드를 변경함

사용자가 버튼을 클릭함

사용자가 요소 위로 마우스를 가져갑니다.

가장 많이 사용되는 이벤트 중 하나는 OnClick 이벤트입니다. 요소의 클릭 이벤트에 추가됩니다.

다음은 클릭 이벤트의 예입니다.

const btn = document.querySelector(".btn");

btn.addEventLister("click", function() {
    console.log("The button was clicked");
})

이벤트를 추가하려면 먼저 DOM 선택기로 요소를 가져와야 합니다.

그런 다음 해당 요소에 .addEventListener("event", eventHandlerFunction) 메서드를 추가해야 합니다.

보시다시피 addEventLister 메서드는 2개의 인수를 사용합니다. 하나는 이벤트이고 다른 하나는 이벤트 핸들러 함수입니다.

이벤트 처리기 기능은 이벤트가 발생할 때 발생할 일을 결정합니다.

위의 예에서 버튼을 클릭하면 console.log "The button was clicked"문자열이 표시됩니다.

결론.

이 기사에서는 DOM이 무엇인지, DOM으로 HTML 요소를 쿼리하는 방법, 마지막으로 EventLIstenter를 추가하는 방법에 대해 논의했습니다.

끝까지 읽어주셔서 감사합니다. 이 기사를 즐겼다면 내 다른 콘텐츠도 즐길 수 있습니다.

내 모든 자료를 보려면 Twitter에서 나를 팔로우하세요.