FE
[JS] JavaScript - DOM
공대생안씨
2024. 8. 11. 17:23
1. DOM
- DOM (Document Object Model) : 문서 객체 모델
- 웹 페이지 (HTML, XML 문서 등) 의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현 → 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스
1-1. DOM의 트리 구조
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 기초</title>
</head>
<body>
<article>
<header>header</header>
<section>
<header>header 1</header>
section 1
</section>
</article>
</body>
</html>
⇒ 각각의 태그가 자바스크립트의 node 객체로 변환됨!
- 노드 : HTML DOM에서 정보를 저장하는 계층적 단위
- 노드 트리 : 노드들의 집합 / 노드간 관계를 트리 구조로 나타냄
📌 document 객체 : 웹 페이지 자체를 의미
⇒ 자바스크립트에서 DOM에 접근하고자 하면 document 객체 사용해야 함!
1-2. HTML 요소 선택
- document.getElementById(”아이디”)
- 해당 아이디의 요소 선택
- document.getElementsByClassName(”클래스이름”)
- 해당 클래스에 속한 요소를 모두 선택
- document.getElementsByName(”이름”)
- 해당 name 속성을 가지는 요소를 모두 선택
- document.querySelectorAll(”css 선택자”)
- 해당 css 선택자로 선택되는 요소를 모두 선택
- document.querySelector(”css 선택자”)
- 해당 css 선택자로 선택되는 요소 중 첫번째 요소 선택
1-3. HTML 요소 조작
- 요소.style.스타일속성 = “값”
- 요소의 스타일 조회 및 변경
- 요소.innerHTML = “HTML내용”
- 요소 하위의 HTML 조회 및 변경
- 요소.innerText = “텍스트값”
- 요소 하위의 텍스트 조회 및 변경
- 요소.getAttribute(”속성명”) / 요소.setAttribute(”속성명”, “값”)
- 요소의 HTML 속성 조회 및 변경
- 요소.classList = “클래스명”
- 요소의 클래스 수정
- 요소.classList.add(”클래스명”)
- 요소의 클래스에 해당 클래스 추가
1-4. HTML 요소 생성 및 추가
- document.createElement(”태그명”)
- 해당 태그의 HTML 요소 생성
- document.write(”텍스트”)
- 텍스트를 화면에 출력
- 요소.appendChild(노드)
- 해당 요소의 내부 가장 마지막에 노드 추가
⇒ createElement()로 만들어진 노드는 화면에 보여지기 위해 appendChild 등을 통해 DOM에 추가해야 함!