자바스크립트 DOM이란, 조작(방법)

자바스크립트에서 DOM이란 Document Object Model의 약자로써 HTML 문서를 트리 형태로 계층적으로 표현한 것입니다. DOM을 조작하는 것은 프론트엔드 개발자에게 필수적인 기술입니다.

트리의 각 요소는 노드이며 개발자는 JavaScript를 사용하여 이러한 노드를 조작하여 웹 페이지의 콘텐츠와 스타일을 동적으로 업데이트할 수 있습니다. 다음은 자바스크립트에서 DOM 조작방법에 대해 알아보겠습니다.

 

• DOM 요소에 접근하기
• 요소 콘텐츠 및 속성 수정
• 요소 추가 및 제거
• 이벤트 처리

 

자바스크립트 DOM 요소 액세스

JavaScript를 사용하여 DOM 요소를 조작하기 전에 먼저 액세스해야 합니다. 다음을 포함하여 DOM의 요소에 액세스하는 방법에는 여러 가지가 있습니다.

• getElementById: 이 메서드는 지정된 ID 속성을 가진 요소를 반환합니다.
• getElementsByClassName: 이 메서드는 지정된 클래스 이름을 가진 요소 모음을 반환합니다.
• getElementsByTagName: 이 메서드는 지정된 태그 이름을 가진 요소 컬렉션을 반환합니다.
• querySelector: 이 메서드는 지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
• querySelectorAll: 이 메서드는 지정된 CSS 선택자와 일치하는 요소 모음을 반환합니다.

예를 들어 ID가 "example"인 요소에 액세스하려면 다음 코드를 사용할 수 있습니다.

let exampleElement = document.getElementById("example");

 

요소 콘텐츠 및 속성 수정

요소에 액세스하면 JavaScript를 사용하여 콘텐츠와 속성을 수정할 수 있습니다. 다음은 요소 콘텐츠 및 속성을 수정하는 몇 가지 일반적인 방법입니다.

• innerHTML: 이 속성은 요소 내부의 HTML 콘텐츠를 설정하거나 반환합니다.
• textContent: 이 속성은 요소 내부의 텍스트 콘텐츠를 설정하거나 반환합니다.
• setAttribute: 이 메소드는 요소의 속성 값을 설정합니다.
• getAttribute: 이 메서드는 요소의 속성 값을 반환합니다.

예를 들어 요소의 텍스트 내용을 변경하려면 다음 코드를 사용할 수 있습니다.

exampleElement.textContent = "New text content";

 

속성 값을 설정하기 위해 다음 코드를 사용할 수 있습니다.

exampleElement.setAttribute("class", "new-class");

 

요소 추가 및 제거

JavaScript를 사용하여 DOM에서 요소를 추가하고 제거할 수도 있습니다. 다음은 요소를 추가하고 제거하는 몇 가지 일반적인 방법입니다.

• createElement: 이 메서드는 지정된 태그 이름으로 새 요소를 생성합니다.
• appendChild: 이 메서드는 기존 요소에 새 자식 요소를 추가합니다.
• removeChild: 이 메서드는 기존 요소에서 자식 요소를 제거합니다.

예를 들어 새 요소를 만들고 기존 요소의 자식으로 추가하려면 다음 코드를 사용할 수 있습니다.

let newElement = document.createElement("div");
exampleElement.appendChild(newElement);

 

하위 요소를 제거하려면 다음 코드를 사용할 수 있습니다.

exampleElement.removeChild(childElement);

 

이벤트 처리

마지막으로 JavaScript를 사용하여 클릭, 마우스 이동 및 키보드 입력과 같은 DOM 요소의 이벤트를 처리할 수 있습니다. 다음은 이벤트를 처리하는 몇 가지 일반적인 방법입니다.

• addEventListener: 요소에 이벤트 리스너를 추가하는 메소드입니다.
• removeEventListener: 이 메소드는 요소에서 이벤트 리스너를 제거합니다.

728x90

예를 들어 클릭 이벤트에 대한 이벤트 리스너를 추가하려면 다음 코드를 사용할 수 있습니다.

exampleElement.addEventListener("click", function() {
console.log("Clicked!");
});

DOM 요소에 액세스, 수정, 추가 및 제거하고 이벤트를 처리함으로써 개발자는 동적 및 대화형 웹 페이지를 만들 수 있습니다.