2022. 7. 1. 01:09ㆍProgram/JavaScript
128_자바스크립트 요소 다루기
[적용]
- 자바스크립트에서 HTML 요소를 다루고 싶을 때
[내용]
자바스크립트는 웹 페이지의 텍스트나 스타일을 변경할 수 있다.
이와 같이 HTML 각 요소에 접근하는 방식은 DOM(Document Object Model) 인터페이스로 정의되어 있다.
DOM은 트리 구조를 사용하여 HTML 문서를 다룬다.
HTML index.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>샘플 화면</title>
</head>
<body>
<h1>타이틀</h1>
<ul id="my-list">
<li class="list">리스트 1</li>
<li class="list">리스트 2</li>
<li class="list">리스트 3</li>
</ul>
</body>
</html>트리의 각 구성 요소를 '노드(Node)'라고 한다.
'혹' 또는 '마디'라는 뜻의 노드는 자바스크립트에서 Node 객체로 취급하며,
요소를 가져오거나 추가하는 작업이 가능하다.
Node 객체의 속성과 메소드는 '노드.속성' 과 '노드.메소드'로 접근이 가능하다.
HTML 문서전체의 요소는 document를 사용해 가져올 수 있으며,
그 자체가 커다란 Node 객체가 된다.
// Node 객체의 querySelector() 메소드
// 셀렉터 일치 요소 가져오기
document.querySelector('.box');
노드는 다음과 같은 종류가 있다.
| 노드 | 예 |
| 요소 노드 | <p class="container">안녕하세요</p> |
| 속성 노드 | class="container" |
| 텍스트 노드 | 안녕하세요 |
요소 노드는 자바스크립트에서 Element 객체로 취급하며,
요소의 데이터를 변경하거나 CSS 클래스를 변경하는 등의 작업이 가능하다.
// .box 요소 가져오기
const myBox = document.querySelector('.box');
// .box 요소의 데이터 변경
myBox.innerHTML = '안녕하세요.';Element 객체는 Node 객체를 계승한다.
계승은 부모 객체의 성질을 그대로 이어받는 것이다.
Element 객체는 Node 객체의 속성과 메소드를 사용할 수 있으며, 자기 자신만의 속성과 메소드도 가진다.
Node 객체와 Element 객체로 다음과 같은 작업이 가능하다.
- HTML 요소 가져오기
- <html> 요소와 <body> 요소 가져오기
- 자식 요소, 전후 욧, 부모 요소 가져오기
- 요소 생성하기
- 요소 추가하기
- 요소 삭제하기
- 요소 복제하기
- 요소의 데이터 가져오거나 변경하기
- 다른 요소로 변경하기
- 요소 속성 가져오가나 설정하기
- 요소 클래스 속성 추가하거나 삭제하기
- 스타일 변경하기
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 ID의 각 요소 값 읽어오기 (0) | 2022.07.01 |
|---|---|
| [JavaScript] 자바스크립트 셀렉터 사용하기 (0) | 2022.07.01 |
| [JavaScript] 자바스크립트 드래그 앤 드롭 기능 사용하기 (0) | 2022.07.01 |
| [JacaScript] 자바스크립트 기본 이벤트 작동 해지 설정하기 (0) | 2022.06.30 |
| [JavaScript] 자바스크립트 이벤트 작동 설정하기 (0) | 2022.06.29 |