javaScript. (12) DOM(Document Object Model)

DOM(Document Object Model)

 

< 웹페이지의 빌드(build)과정 >
- 브라우저가 HTML파일을 읽어서 화면에 띄워주는 과정 = Critical Rendering Path.
>> 1) 브라우저가 HTML과 CSS를 파싱(parsing)  ㅡ 렌더트리(Render Tree) 생성됨.
     2) 브라우저가 렌더링(rendering)함.

** 자세한 내용은 추후 포스팅 예정.

etc. 웹브라우저의 렌더링(Rendering) 과정 - DOM

 

📌 DOM이란?

= 웹페이지에 대한 인터페이스(Interface)

 

- document를 객체로 구현한 것.

- HTML은 html>head>title ... 과 같이 계층적 구조이다.

- 부모ㅡ자식과 형제자매 관계로 구성되어있다.

 

- 이를 객체로 표현하면,

{
    document : {
    	html : {
           head: {
            	  title: ...
               },
            body : {
            	header : ...
               }
          }
     }   
}

이와 같이 객체로 표현할 수 있다. = DOM

가장 위에 있는 것은 document이다. 

 

- head와 body 태그는 각각 document.head와 document.body로 접근할 수 있다.

 

---

 

 

📌 Node와 Element

 

Node는 태그노드와 텍스트 노드 전체를 가리킴.

Element는 텍스트 노드를 제외한 태그(<a>태그 등)만 가리킴.

 

** 태그만 검색하고 싶을 때 - Element가 붙은 메소드를 선택.

 

텍스트노드	<a>여기를클릭</a>
태그노드	<a> </a>

 

 

 

---

 

 

 

📌 DOM - 속성(property)

 

 

1) 태그.nodeType

- 우선 태그를 선택한 후, nodeType 속성을 검색 >> 태그의 종류를 알려주는 숫자가 나옴

1	Node.ELEMENT_NODE	Element
3	Node.TEXT_NODE	Text
8	Node.COMMENT_NODE	Comment(주석)
9	Node.DOCUMENT_NODE	Document
10	Node.DOCUMENT_TYPE_NODE	Document_type(DOCTYPE)
11	Node.DOCUMENT_FRAGMENT_NODE	Document Fragment

>> 2,4,5,6과 7은 쓰이지 않음.

Node.ELEMENT_MODE == 1;

Node.[1] 해도 같은 결과.

 

 

 

<  부모ㅡ자식  >

 

 

2) 태그.children  / childNodes

 

- 배열의 형태로 나타냄.

자식 태그로 갈 때	태그.children	텍스트 노드 제외
	태그.childNodes	텍스트 노드 포함

document.body.children;     // [header, main, footer, script]

/// footer을 선택하려면? ㅡ 배열이므로 인덱스 이용
document.body.children[2];   // <footer> ... </footer>

- 모든 태그에 다 사용할 수 있음.

❓ 한번에 document.getElementsByTagName('footer')하면 될걸 왜 이렇게 하나?
- footer의 부모를 찾거나, main의 자식을 찾는 등 이름을 모를때는 children과 같은 property를 사용하는 것.

 

 

3) 태그.firstChild / firstElementChild / lastChild / lastElementChild

 

- 첫번째 자식만 선택하고 싶을 때 / 마지막 자식을 선택하고 싶을 때

- ElementChild는 텍스트 노드는 무시함. 

 

firstChild / lastChild	텍스트노드 포함
firstElementChild / lastElementChild	텍스트노드 제외

 

 

 

4) 태그.parentNode / parentElement

- 부모를 찾을 때 이용.

- 자식은 여러개 있을 수 있기 때문에 children / childNodes와 같이 복수로 썼지만.

  부모는 하나밖에 존재하지 않음.

 

 

 

5) 태그.previousSibling / nextSibling 

          previousElementSibling / nextElementSibling

 

- 형제자매 태그를 찾을 때 이용.

- 바로 전 / 후의 형제자매 찾아줌.

 

 

🟨 메서드명에 Element 들어가면 텍스트노드 제외임.

 

 

 

< 조회 >

 

6) 태그.innerHTML / outerHTML

 

- 생성한 태그의 내용물을 얻어옴 or 바꿈

footer.innerHTML;     // 'hello';

footer.innerHTML = 'bye';       // 내용 변경
footer.innerHTML = '<b>bold</b>'l    // 태그를 집어넣을수도 있음❕

 

- outerHTML은 현재 태그(예제에선 footer)까지 포함한 문자열을 반환.

footer.outerHTML;     // '<footer><b>bold</b></footer>

 

 

 

7) 태그.속성명

- 태그를 선택하고, 그 속성을 조회

- 바꿀 수도 있음(대입연산자 = 이용)

 

>> id / class / name / value / placeholder / checked / disabled / readonly 등의 속성값을 볼  수 있음.

 

 

8) 태그.attributes

- 해당 태그가 가진 모든 속성 조회

 

 

<  높이 / 너비  >

 

9) 태그.clientHeight / clientWidth

- 태그의 margin,  border, scrollbar를 제외한 높이 / 너비 반환함.

 

10) 태그.offsetHeight / offsetWidth

- margin만 제외한 높이 / 너비 반환.

 

11) 태그.scrollHeight / scrollWidth

- 스크롤 가능 범위까지 포함한 태그의 높이 / 너비 반환.

 

---

📌 DOM - 메서드(method)

 

 

 

1) 태그.appendChild

- createElement()를 통해 태그를 만들고, 이 메소드로 자식태그로 추가함.

>> 마지막 순서의 자식태그로 추가.

append = 맨 뒤에 prepend = 맨 앞에

 

 

2) 태그.removeChild

- 선택한 자식 태그를 삭제.

 

예> 마지막 자식 태그를 삭제

document.body.removeChild(document.body.childNodes[document.body.childNodes.length - 1]);

태그.childNodes

텍스트 노드 포함

body태그의 모든 자식들 - 배열 형태임.      

.length로 자식 수를 count하고,

index는 -1을 해주어야하므로 [length-1]을 함.

 

 

3) 태그.insertBefore

- 자신의 형제태그로 집어넣음. (자신 이전에 ㅡ before)

 

 

4) 태그.cloneNode

- 자신을 복사. 

- 복사한 것을 appendChild나 insertBefore로 집어넣으면 됨. (자식 or 형제요소로)

 

 

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/573b4165a54b5e8427432948

(JavaScript) DOM

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!