on
21.12월 모각코) Javascript 2일차 - DOM 구조 학습
21.12월 모각코) Javascript 2일차 - DOM 구조 학습
안녕하세요. brandy 입니다. 오늘은 모각코 Javascript 2일차 DOM 구조에 대해 학습하였습니다.
웹 페이지는 일종의 문서 = document입니다.
이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 합니다. 즉, 동일한 문서를 사용하였는데도 다른 형태로 나타날 수 있다는 겁니다(웹 브라우저 화면에 나타나거나 or HTML 소스 자체로 나타나거나)
그중에서도 DOM은 Javascript에서 사용하는 개념으로, 웹 페이지의 객체 지향 표현입니다.
Javascript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다.
* 문서 객체란? 이나 같은 html 문서 태그들을 Javascript가 이용할 수 있는 object(객체)로 만들면 그것이 문서 객체가 된다.
넓은 의미로는 웹 브라우저가 HTML을 인식하는 방식을 의미하고, 좁은 의미로 본다면 document 객체와 관련된 객체의 집합 의미
문서(document)와 요소(element)에 접근하기 위해 DOM을 사용하는 거죠.
DOM이 프로그래밍 언어는 아니지만(프로그래밍 언어와 독립적으로 디자인 되었음)
DOM이 없다면 Javascript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다.
html에 Javascript 코드 연결하는 법 2가지
1) html에
~
2) Javascript 파일 따로 만든 뒤 src를 통해 파일 연결
외부 파일을 사용하기 떄문에 추후 코드 유지보수 시 유리하다는 장점이 있다.
DOM객체란?
Document Object Model의 약자
단순히 텍스트로 작성된 html 파일을 트리 형태로 표현한 객체
DOM을 통해서 javascript와 html 파일이 연결되고, document객체는 DOM 트리 최상단에 있는 객체에 접근
출처 : https://blog.daum.net/avdsaldi/18
document를 이용하여 DOM객체에 접근하는 방법
- document.getElementById(id값)
- document.getElementsByTagName(tag명)
- document.getElementsByClassName(class명)
- document.querySelector/querySelectorAll(selector) : 여러 개의 객체들 중에 첫번째 객체만 가져온다. for문에서 배열 인덱스에 접근하면 된다.
Javascript에서는 문서에 HTML 요소를 추가할 수 있는 3가지 방법이 있습니다.
- .createElement() // .createElement('h1') >>
- .createTextNode() // .createTextNode('Hello World') >> 문자열 만듦
- .appendChild() // 선택한 요소 안에 자식 요소 추가
Javascript를 통해 동적으로 문서객체 생성해보기 -1
문서 객체 모델 // 웹 표준은