lflov

Javascript 13. DOM 본문

JavaScript

Javascript 13. DOM

마젠토브힘내부왕 2022. 8. 16. 15:56

오늘은 DOM 에 대해서 알아볼까요우~

 

DOM(document object model) 이란?

 

> 프로그래밍 언어에서 HTML문서의 정보들을 다룰 수 있게 해주는 프로그래밍 인터페이스다 

 

> HTML과 javascript 사이에 중간 매개체 느낌이다!

 

 

우리가 작성한 코드. ------> html 마크업이 화면이그려질때 나오는 것들이 요소(element)를 연결해 준다

 

근데 이걸 웹 브라우저가 Document object로 변경하여서 나오는것이 DOM이다.

 

그리고 우리가 작성한 javascript 코드가 DOM객체를 조작하여 화면에 나타내게 해주는거다

 

위 내용을 이쁘게 말하면~? 두둥 탁!

 

> html로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다.

 

- html태그로 작성된 요소들은 웹브라우저가 DOM 객체로 표현한다잉

 

- 모든 요소들은 속성,이벤트,프로퍼티의 구성을 가집니다잉

 

- html 코드는 DOM형태로 해석되어 CSS에 적용 / JAVA SCRipt와의 상호작용등이 이뤄진답니다!

 

- DOM은 HTML파일의 구조를 계층적으로 정리합니다 > html의 태그와 비슷한 느낌

 

html - head body 이런게 계층적으로 정리된다면

DOM(document)- <head> element <body> element 이렇게 계층적으로 정리된다

 

document : html 문서의 최상위 root객체이고, html 문서 전체를 대변한다

 

element : html document 하위의 화면 요소(html tag로 그려지는 요소들 등)들을 의미한다. dom에서는 계층적인 형태로 존재한다.

 

DOM 접근 함수

 

document.getElementById(elementId) : 요소의 id값(html의 id태그 속성)으로 요소를 가져올수있다

> css 의 아이디 선택자 #id 랑 비슷한느낌

 

document.getElementByTagName(name) : 요소의 태그 종류로 (html태그) 요소들을 가져옵니다 > 배열 형태,nodelist

 

document.getElementByClassName(classNAme) : 요소의 class값 (html의 class 속성)으로 요소들을 가져옵니다 > 배열형태, nodelist

 

QuerySelector 라는 것도 있는데,

 

document.querySelector(selector) : 선택자 문법으로 문서내의 선택한 요소중 첫번째 요소를 가져옵니다.

document.querySelectorAll(selector) : 선택자 문법으로 문서내의 선택한 요소들을 전부 가져온다.

 

 

위 3개의 접근함수와 queryselector 의 접근함수의 차이점은

 

3개의 접근함수는 document 객체 에서만 사용할수 있다!

 

queryselector는 document객체 element객체 둘다 사용할수있다! 

 

DOM 객체 추가

- document.createElement(tagName) : 새로운 노드 객체를 생성한다!

> DOM은 계층적구조 (트리) 라고 하였는데 html에서 여러 태그들이 계층적인 트리구조로 존재하는데 이때 이 태그들을 노드라고 한다

> 위 명령어로 새로운 노드를 생성시 화면엔 나타나지 않는다 > 메모리에는 존재하는 상태 왜냐하면? 아직 어느 트리에 있는지 정하지 않으므로!

 

- (특정 element).appendChild(삽입할 DOM노드 객체) : 특정 DOM 객체 하위에 다른 DOM객체를 삽입합니다.

> 요 명령어로 위에 생성한 노드를 특정한 노드 하위에 넣을수있다.

'JavaScript' 카테고리의 다른 글

JavaScript 15. 클로져  (0) 2022.08.19
javascript 14. 이벤트 처리하기!  (0) 2022.08.16
Javascript 12. html에 js 적용하는법  (0) 2022.08.16
Javascript 11. 블록/스코프  (0) 2022.08.15
JavaScript 10. 함수  (0) 2022.08.15
'JavaScript' Related Articles more