본문 바로가기
javascript pure/javascript 기본

10. DOM과 이벤트 처리-1

by leo2114 2023. 3. 18.
반응형

#1 DOM의 개념과 사용법

DOM(Document Object Model)은 웹 문서의 구조화된 표현을 제공하며, 자바스크립트를 사용하여 웹 문서를 동적으로 조작할 수 있는 API입니다.

DOM을 이용하여 HTML 요소에 접근하고 조작하는 방법을 알아보겠습니다.

요소의 선택

DOM을 이용하여 HTML 요소를 선택하는 방법에는 여러 가지가 있습니다.

 

  • getElementById

getElementById 메서드를 이용하면 id 속성으로 HTML 요소를 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>

<script>
var header = document.getElementById("myHeader");
header.style.color = "red";
</script>

</body>
</html>

 

  • getElementsByClassName

getElementsByClassName 메서드를 이용하면 class 속성으로 HTML 요소를 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h2 class="myClass">Hello World!</h2>
<p class="myClass">This is a paragraph.</p>

<script>
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "red";
}
</script>

</body>
</html>

 

  • getElementsByTagName
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<script>
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
  listItems[i].style.color = "red";
}
</script>

</body>
</html>

getElementsByTagName 메서드를 이용하면 태그 이름으로 HTML 요소를 선택할 수 있습니다.

 

  • querySelector

querySelector 메서드를 이용하면 CSS 선택자를 이용하여 HTML 요소를 선택할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<h1 class="myClass">Hello World!</h1>

<script>
var header = document.querySelector(".myClass");
header.style.color = "red";
</script>

</body>
</html>

요소의 조작

DOM을 사용하여 요소를 생성, 삭제, 변경할 수 있습니다. 이를 통해 웹 페이지의 동적인 변화를 구현할 수 있습니다.

 

  • 요소 생성

createElement() 메서드를 사용하여 새로운 요소를 생성할 수 있습니다. 생성한 요소를 추가하기 전에 요소의 속성을 설정할 수 있습니다.

// 새로운 div 요소 생성
const newDiv = document.createElement('div');

// 요소의 속성 설정
newDiv.className = 'box';
newDiv.setAttribute('id', 'box1');
newDiv.textContent = '새로운 박스';

 

  • 요소 추가

요소를 추가하기 위해서는 부모 요소를 선택한 후 appendChild() 메서드를 사용합니다. 새로운 요소는 부모 요소의 가장 마지막 자식 요소로 추가됩니다.

// 부모 요소 선택
const parent = document.querySelector('#container');

// 새로운 div 요소 추가
parent.appendChild(newDiv);

 

  • 요소 삭제

요소를 삭제하기 위해서는 removeChild() 메서드를 사용합니다. 삭제할 요소의 부모 요소를 선택한 후 해당 요소를 인자로 전달합니다.

// 삭제할 요소 선택
const box1 = document.querySelector('#box1');

// 요소 삭제
parent.removeChild(box1);

 

  • 요소 변경

요소를 변경하기 위해서는 setAttribute() 메서드를 사용하여 요소의 속성을 변경할 수 있습니다. 또는 innerHTML 또는 textContent 속성을 사용하여 요소의 내용을 변경할 수도 있습니다.

// 요소의 속성 변경
box2.setAttribute('class', 'red-box');

// 요소의 내용 변경
box2.innerHTML = '<h2>새로운 제목</h2>';

 

  • 이벤트 처리

DOM 요소에 이벤트를 추가하여 해당 요소를 클릭했을 때 실행될 함수를 등록할 수 있습니다. addEventListener() 메서드를 사용하여 이벤트를 등록할 수 있습니다.

// 이벤트 핸들러 함수
function handleClick() {
  console.log('박스를 클릭했습니다!');
}

// 이벤트 등록
box1.addEventListener('click', handleClick);

 

  • 속성 접근

DOM 요소의 속성을 접근하기 위해서는 getAttribute() 메서드를 사용합니다.

// 요소의 id 속성 값 가져오기
const idValue = box1.getAttribute('id');
console.log(idValue); // 'box1'

 

  • 스타일 조작

DOM 요소의 스타일을 조작할 수 있습니다. 스타일은 요소의 모양이나 레이아웃을 결정하는데 중요한 역할을 합니다. 스타일은 style 속성으로 접근할 수 있으며, style 속성은 객체 타입입니다. 스타일 객체의 프로퍼티를 변경하여 스타일을 조작할 수 있습니다.

<div id="myDiv">Hello world!</div>
const myDiv = document.querySelector('#myDiv');

// 스타일 변경
myDiv.style.backgroundColor = 'red';
myDiv.style.color = 'white';
myDiv.style.padding = '20px';

위 코드에서는 myDiv 요소의 배경색, 글자색, 패딩을 변경하고 있습니다.

 

  • 클래스 조작

CSS 클래스를 추가, 삭제, 변경할 수 있습니다. 클래스 조작은 classList 속성으로 접근할 수 있습니다. classList 속성은 DOMTokenList 객체 타입으로, 클래스 조작을 위한 여러 메서드를 제공합니다.

<div id="myDiv" class="box">Hello world!</div>
const myDiv = document.querySelector('#myDiv');

// 클래스 추가
myDiv.classList.add('newClass');

// 클래스 삭제
myDiv.classList.remove('box');

// 클래스 변경
myDiv.classList.replace('newClass', 'newBox');

위 코드에서는 myDiv 요소에 클래스를 추가, 삭제, 변경하고 있습니다. add 메서드로 newClass 클래스를 추가하였고, remove 메서드로 box 클래스를 삭제하였습니다. replace 메서드로 newClass 클래스를 newBox 클래스로 변경하였습니다.

 

  • 속성 조작

요소의 속성을 조작할 수 있습니다. 속성은 getAttribute, setAttribute, removeAttribute 메서드를 이용하여 조작할 수 있습니다.

<img id="myImg" src="image.jpg" alt="My Image">
const myImg = document.querySelector('#myImg');

// 속성 값 가져오기
const src = myImg.getAttribute('src');
const alt = myImg.getAttribute('alt');

// 속성 값 변경
myImg.setAttribute('src', 'newImage.jpg');
myImg.setAttribute('alt', 'New Image');

// 속성 삭제
myImg.removeAttribute('alt');

위 코드에서는 myImg 요소의 src 속성과 alt 속성을 가져오고, setAttribute 메서드로 src 속성과 alt 속성을 변경하였습니다. 마지막으로 removeAttribute 메서드로 alt 속성을 삭제하였습니다.

반응형

'javascript pure > javascript 기본' 카테고리의 다른 글

14. AJAX와 데이터 처리-2  (0) 2023.03.18
13. AJAX와 데이터 처리-1  (0) 2023.03.18
12. DOM과 이벤트 처리-3  (0) 2023.03.18
11. DOM과 이벤트 처리-2  (0) 2023.03.18
9. 객체와 배열-3  (0) 2023.03.18
8. 객체와 배열-2  (0) 2023.03.18
7. 객체와 배열-1  (0) 2023.03.18
6. 함수-3  (0) 2023.03.18

관련글

티스토리툴바