DOM(Document Object Model)
DOM은 웹 페이지를 조작/제어하는 기능
DOM은 HTML문서를 트리구조의 객체모델로 표현하여 요소를 선택/변경/삭제가 가능함
DOM으로 HTML문서가 트리구조로 표현되어 HTML요소가 하나의 노드가 된다
- 예시
html
코드 복사
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>위의 코드는 아래와 같은 구조의 트리로 변환됨
htmlheadtitle:"Sample Page"
bodyh1: "Heading"p: "This is a paragraph"
DOM요소 선택하는 메서드
HTML요소의 id, class,태그명, CSS선택자를 통해 원하는 요소에 접근 가능
getElementById: 특정id를 가진 요소를 선택getElementsByClassName: 특정 클래스를 가진 모든 요소를 선택(HTMLCollection으로 반환)getElementsByTagName: 특정 태그명을 가진 모든 요소를 선택(HTMLCollection으로 반환)querySelector및querySelectorAll: CSS선택자를 사용하여 요소를 선택,querySelector는 첫 번째로 일치하는 요소르 반환,querySelectorAll은 모든 일치하는 요소를 NodeList로 반환
DOM요소 조작하기
JavaScript를 통해 요소의 텍스트, HTML내용, 속성, 스타일을 수정
- 텍스트
textContent: 요소의 텍스트 내용 변경innterHTML: 요소의 HTML 콘텐츠를 설정/변경
- 속성
setAttribute와getAttribute: 요소의 특정 속성을 설정/가져옴
- 스타일
style: 요소에 CSS 스타일을 적용
DOM요소 추가/삭제
- 요소 생성
createElement: 새로운 HMTL요소를 생성(생성한 요소를 DOM 트리에 추가하기 위해appendChild나insertBefore메서드를 사용할 수 있음
- 요소 삭제
removeChild: 특정 자식요소를 삭제remove: 요소를 삭제
DOM 이벤트 처리
버튼클릭, 마우스이동, 키보드 입력등의 이벤트를 처리(JavaScript이용)
addEventListner: 메서드를 사용해 특정 요소에 이벤트 연결가능
예시 코드1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 조작 예제</title>
</head>
<body>
<h1 id="mainTitle">DOM 조작 예제</h1>
<p class="description">이 문단은 JavaScript로 변경됩니다.</p>
<div class="container"></div>
<button id="myButton">Click Me!</button>
<script type="text/javascript">
// 1. 요소 선택하기
// ID를 통한 요소 선택
const mainTitle = document.getElementById("mainTitle");
// 클래스명을 통한 요소 선택
const descriptions = document.getElementsByClassName("description");
// 태그명을 통한 요소 선택
const paragraphs = document.getElementsByTagName("p");
// CSS 선택자를 통한 요소 선택
const container = document.querySelector(".container");
const allParagraphs = document.querySelectorAll("p");
// 2. 요소 조작하기
// 텍스트 조작
mainTitle.textContent = "JavaScript DOM 조작 예제";
// HTML 내용 조작
container.innerHTML = "<p>새로운 내용이 추가되었습니다.</p>";
// 속성 조작
mainTitle.setAttribute("data-info", "Title Element");
console.log(mainTitle.getAttribute("data-info"));
// 스타일 조작
mainTitle.style.color = "blue";
mainTitle.style.fontSize = "24px";
// 3. 요소 추가 및 삭제하기
// 새로운 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "이것은 동적으로 추가된 문단입니다.";
container.appendChild(newParagraph);
// 요소 삭제
descriptions[0].remove();
// 4. 이벤트 처리하기
// 클릭 이벤트 처리
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
</body>
</html>예시코드2 - 둠 속성 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// Document 객체 사용 예제
// "Hello World"를 웹 페이지에 출력
document.write("Hello World");
// 문서의 배경색을 'darkgray'로 설정
document.bgColor = "darkgray";
// 문서의 제목을 "난 새문서"로 변경
document.title = "난 새문서";
</script>
</body>
</html>예시코드3 - 둠요소 가져오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
const viewTag = function () {
// 아이디로 가져오기
let tag = document.getElementById('h2');
console.log(tag); // <h2 id="h2" class="c1">Header 2</h2>
console.log(tag.id); // h2
console.log(typeof tag); // object
console.log(tag.tagName); // H2
console.log(tag.innerHTML); // Header 2
tag.innerHTML = 'new Header 2'; // <h2> 태그의 내용 변경
// 태그 이름으로 가져오기
let tag2 = document.getElementsByTagName('h2');
console.log(tag2); // [object HTMLCollection] (모든 h2 태그 컬렉션)
console.log(tag2.length); // 5 (h2 태그의 개수)
console.log(tag2[0]); // <h2 id="h1" class="c1">Header 1</h2>
console.log(tag2[0].innerHTML); // Header 1
tag2[0].innerHTML = 'new Header 1'; // 첫 번째 h2 태그의 내용 변경
// 클래스 이름으로 가져오기
let classes = document.getElementsByClassName('c2');
console.log(classes); // [object HTMLCollection] (c2 클래스의 요소들)
console.log(classes.length); // 2 (c2 클래스를 가진 요소 개수)
console.log(classes[0]); // <h2 id="h3" class="c2">Header 3</h2>
console.log(classes[0].innerHTML); // Header 3
classes[0].innerHTML = 'new Header 3'; // 첫 번째 c2 클래스 요소 내용 변경
}
</script>
</head>
<body>
<input type="button" value="태그 가져오기" onclick="viewTag()">
<h2 id="h1" class="c1">Header 1</h2>
<h2 id="h2" class="c1">Header 2</h2>
<h2 id="h3" class="c2">Header 3</h2>
<h2 id="h4" class="c2">Header 4</h2>
<h2 id="h5" class="c3">Header 5</h2>
</body>
</html>
개발자