DOM
DOM이란?
- DOM은 웹 문서의 구조화된 표현으로 HTML, XML 문서의 프로그래밍 언어가 웹페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스이다. 주로 Javascript에서 웹 페이지 요소를 추가, 선택, 수정 또는 제거할 때 사용됨 !!(브라우저에 기본적으로 내장되어 있는 API 중 하나를 의미)
여기서 잠깐 API 가 뭐더라 ?🎯
- API는 무언가를 주문할 때 메뉴판과 같은 것!! 예를 들어, 카페에서 커피를 주문할 때, 메뉴판을 통해 주문하게 된다. 메뉴판은 고객과 카페 사이의 인터페이스 역할을 하며, 고객은 메뉴판에서 주문할 음료나 음식을 선택하고, 카페는 해당 요청을 처리하여 음료나 음식을 제공하게 된다.
- 👻API도 비슷한 개념!! 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 *인터페이스 역할을 하게 된다. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해당 기능을 제공하는 날씨 서비스의 API를 호출하여 날씨 정보를 받아오게 된다.
- 따라서, API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 의미한다. 브라우저의 경우 역시, 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있도록 도와준다.
또한 DOM이 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javascript로 접근하거나 제어해야 하며, 모든 DOM의 node들은 '속성'과 '메서드'를 보유하고 있음
DOM의 node는 또 뭐야?💡
- DOM에서 Node란 웹 페이지를 구성하는 모든 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것!! 이러한 블록들은 서로 계층 구조로 연결되어 있으며, 각 블록은 자식 노드, 부모 노드, 형제 노드와 관계를 가지고 있다. 이러한 관계를 이용하여 DOM 트리를 탐색하고 조작할 수 있음 !!
- 그럼 DOM 요소의 속성과 메서드는 어떻게 구분할까? 바로 DOM의 Node 객체에서 속성과 메서드를 구분하는 가장 쉬운 방법은 Node 객체의 속성은 값을 가지고 있는 반면, 메서드는 동작을 수행한다는 것!! 즉, Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되고, 메서드는 해당 객체가 수행하는 작업을 나타내는 함수이다!!
DOM에 접근 및 제어해보기
- DOM 을 사용하기 위해 특별히 해야할 일은 없지만, 각각의 브러우저는 자신만의 방법으로 DOM을 구현 하였다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.
<body></body>
여러가지 document 관련 api
1. Finding
// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")
// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")
// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]
// 해당 태그명 및 선택자명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환
document.getElementsByTagName("태그명")[인덱스]
document.querySelectorAll("선택자명")[인덱스]
// 새로운 노드를 생성합니다.
const div = document.createElement('div');
document.body.append(div);
document.body.append(div);2. Changing
/** property(=속성)을 바로 바꿔버려잇! */
// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text
// style을 바꿔요.
element.style.property = new style
//method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)
// 어랏? 그럼 이런것도 가능??
element.setAttribute("style", "background-color:red;");
// ....
element.style.backgroundColor = "red";
// input 필드의 변신3. 나머지 그 외
// createElements
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);
// createTextNode(elements는 아니구여, 그냥 글자...)
let textNode = document.createTextNode("Hello World");
document.body.appendChild(textNode);
// write. 조심 또 조심!
document.write("Hello World!");
document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");
// 골로 가는 코드
function myFunction() {
document.write("Hello World!");
}
// version 01
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
// version 02
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
TIL