TIL 46일차

◆ DOM 탐색(Document Object Mode)

1) 문서 객체 모델(Document Object Model, DOM)을 사용하여 웹 페이지에서 요소(element)를 검색하고 조작하는 방법입니다.
2) 웹 페이지를 구성하는 HTML, XML 또는 XHTML과 같은 마크업 언어로 작성된 문서를 나타내는 표준 인터페이스입니다.
3) 웹 브라우저가 웹 페이지를 렌더링하면서 자동으로 생성됩니다.

• getElementById() 메소드를 사용하여 요소를 검색합니다.
  - 이 메소드는 문서 내에서 고유한 ID 값을 가진 요소를 찾습니다.

• getElementsByTagName() 메소드를 사용하여 요소를 검색합니다.
  - 이 메소드는 문서 내에서 지정된 태그 이름을 가진 모든 요소를 찾습니다.

• getElementsByClassName() 메소드를 사용하여 요소를 검색합니다.
  - 이 메소드는 문서 내에서 지정된 클래스 이름을 가진 모든 요소를 찾습니다.

• querySelector() 메소드를 사용하여 CSS 선택자를 사용하여 요소를 검색합니다.
  - 이 메소드는 문서 내에서 지정된 CSS 선택자와 일치하는 첫 번째 요소를 찾습니다.

• querySelectorAll() 메소드를 사용하여 CSS 선택자를 사용하여 요소를 검색합니다.
  - 이 메소드는 문서 내에서 지정된 CSS 선택자와 일치하는 모든 요소를 찾습니다.

4) DOM 트리를 순회하며 요소를 검색합니다.
- 이 방법은 getElementById()와 getElementsByTagName() 메소드와 유사하지만, 더 많은 제어를 제공합니다.
- 이 방법은 JavaScript의 반복문과 조건문을 사용하여 구현할 수 있습니다.

5) DOM 탐색은 웹 페이지에서 요소를 검색하고 조작하는 방법 중 하나입니다.
- 이를 통해 JavaScript를 사용하여 동적으로 웹 페이지를 조작할 수 있으며, 사용자와 상호작용하는 웹 애플리케이션을 구현할 수 있습니다.

• parentNode 속성은 DOM에서 현재 요소의 부모 요소를 반환하는 것을 말한다.
• nextElementSibling 속성은 현재 요소의 다음 형제 요소를 반환하는 것을 말한다.
  

◆ 배열

• 데이터를 알고 있을 때의 방식(추천)

var b = [10, 20, 30, 40, 50];
console.log(b);

for(var i = 0; i < b.length; i++) {
	console.log(b[i]);
}

• 배열에 데이터를 추가
  - push()를 사용하면 자바의 List.add() 효과 발생

var c = [];
c.push(10);
c.push(20);
c.push(30);
console.log(c);

• 태그를 전체적으로 불러오고 싶다면 document.querySelectorAll() 사용
  - 대상이 여러 개이므로 배열 형태로 나온다.
  - 인덱스를 통해 개별 태그에 접근하여 설정을 진행해야 한다.