3.07 오배이안
오늘 배운 것
오늘은 DOM (Document Object Model) 을 학습했다.
모자딥다 에서는 아주 방대한 페이지로 DOM을 설명하고 있지만
부트캠프에선 정말 핵심? 만 알려주고 과제를 내준다.
js 에서 html 요소를 만드는 법 , html 요소를 js 로 가져오는 법 등..
모자딥다에서 DOM을 자세하게 다루었으니 오배이안은 정말 배운거와 몰랐던걸 작성해보자
<script>태그의 위치로HTML body태그의 가장 하단에 추가하는 방법웹 브라우저가
HTML을 읽는 과정에서script태그를 만나게 되면HTML읽는 것을 잠시 중단하고script를 읽는다.
script태그를 다 읽고 난 후 마저HTML을 읽게 된다.
그래서script태그를 가장 하단에 두게 하여HTML을 다 읽고 난 뒤script태그를 읽게 하는게 예상치 못한 오류와 속도 측면에서 우수하다.
- DOM 으로 JS 에서 HTML 다루기
- 요소 생성하기
document.createElement('태그명')
2.생성한 요소를 body 에 연결하기
document.body.append(생성한 요소)
- 조회
document.querySelector('css 선택자 문법')
- 제거
Element.remove()
Element.removeChild(어떤요소, 요소의 몇번째 자식)
- css 상식
display : none와display : hidden의 차이점
display : none의 경우에는 브라우저에서 흔적도 없이 사라지지만display : hidden의 경우에는 브라우저에서 엘리먼트(요소)가 차지하는 영역을 그대로 남겨 놓는다.
이해 안되는 것 (몰랐던 것)
- 관심분리
JavaScript에서CSS를 직접 조작할 수 있지만 보통은CSS 클래스명을 이용해 간접적으로 바꾸는 것을 권장하는 이유는?
- 디자인의 디테일한 요소가
JS에 담기는 것을 방지하기 위해CSS파일을 운용하면JS에서 간편하게 디자인을 바꿀 수 있어서CSS= 디자인JS= 로직에 집중할 수 있게 하기 위해
- console.dir
- 자바스크립트에서
DOM은document객체에 구현되어 있음
브라우저에서 작동되는 자바스크립트 코드에서는, 언제든지document객체를 조회할 수 있음.
- DOM 구조의 조회 방법
console.dir은console.log와 달리 DOM을 객체의 모습으로 출력함.
만약body의document객체를 알아보면
보시다 시피 아주 많은 객체들이 내장되어 있다.
