DOM 이해하기
DOM (Document Object Model, 문서객체모델)
BOM (Browser Object Model, 브라우저 객체모델)
DOM을 이해하기 앞서, BOM부터 알아보자.
BOM은 Browser Object Model(브라우저 객체모델)이며, 웹 브라우저와 관련된 객체들의 집합을 말한다.
이 BOM을 이용해서 브라우저저와 관련된 기능들을 구성하는데, DOM은 이 BOM 중 하나이다.
BOM의 최상위 객체는 window이며, DOM은 이 window 객체의 하위 객체이기도 하다.
DOM
그럼 문서객체모델은 정확히 뭘까?
문서객체는 html문서의 태그들을 JavaScript가 이용할수 있는 객체로 만든 것을 말한다.
모델은 문서객체를 인식하는 방식이라고 해석할 수 있다.
정리하면, DOM은 넓은 의미로는 '웹 브라우저가 HTML페이지를 인식하는 방식'을 의미하며
좁은 의미로는 'document 객체와 관련된 객체의 집합'을 의미한다.
DOM은 tree형식의 자료구조를 가진다.
DOM은 가장 위쪽의 root node부터 퍼져나간다.
root node는 부모(parent)노드가 없는 node이며, 반대로 자식(children)이 없는 node를 leaf node라고 한다.
node는 무엇인가?
tree구조에서 root 노드를 포함한 모든 개개의 개체들을 node라고 표현한다.
head, body, title, script 등의 태그들을 요소노드(Element node)라고 부르고
요소노드 안의 글자들을 Text node라고 부른다.
<!DOCTYPE html>
<html> -> 요소 노드
<head> -> 요소 노드
<title>INDEX</title> -> title :요소 노드 ,
'INDEX' :텍스트 노드
</head>
<body> -> 요소 노드
<h1>Text Node</h1> ->h1 : 요소 노드,
'Text Node' : 텍스트 노드
<img src="image.jpg"/> -> 요소 노드
</body>
</html>
참고: https://m.blog.naver.com/magnking/220972680805,
https://bit3rd.tistory.com/entry/%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EC%84%9C-%EA%B0%9D%EC%B2%B4-%EB%AA%A8%EB%8D%B8DOM
Today's ?!
노드 생성 메소드를 왜 꼭 변수에 할당하지?
document객체의 노드 생성 메소드인 createElement(tagName)은 요소 노드를 생성한다.
사용시,const li = document.createElement('li')
처럼 작성하는데, 변수에 할당하기만해도 함수처럼 무언가 가공되어 출력된다는게 이해가되지 않았다.
다시 곰곰이 생각해보니 결국 document라는 객체안의 createElement라는 함수를(메소드를) 실행시킨 것과 같은말이었다.
document.createElement('li')만 작성해도 li엘리먼트 노드는 생성된다.
이 메소드 결과를 변수에 할당하는 이유는,
만들어진 li엘리먼트노드를 객체에 연결하거나, 텍스트노드를 추가하는 등의 상호작용을 위한 것인 듯 하다.
CSS
- :checked
input[type=radio]:checked {
border: 1px solid black;
}:checked라는 가상클래스는 라디오버튼이나 체크박스처럼 체크가되는 엘리먼트만을 대상으로 한다.
- X ~ Y
ul ~ p {
color: red;}~는 형제 선택자중 하나이다. X + Y와 유사하지만 덜 엄격하다. 인접 선택자(ul + p)는 앞의 선택자 바로 뒤에 오는 첫 번째 요소만을 선택하지만, 이 선택자는 ul의 모든 형제 p 요소를 선택한다.
'개인공부 > TIL(Today I Learned)' 카테고리의 다른 글
| TIL 28일차_DOM 가운데배치, 키로 함수 실행 (0) | 2021.02.15 |
|---|---|
| TIL 27일차_DOM 모든 자식노드 삭제하기 (0) | 2021.02.14 |
| TIL 25일차_DOM연습하기 (0) | 2021.02.12 |
| TIL 24일차_재귀 익숙해지기 (0) | 2021.02.11 |
| TIL 23일차_정렬, 재귀 (0) | 2021.02.10 |