JavaScript - Browser Rendering, Web API, DOM

What is Browser?

웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램
브라우저는 랜더링 과정을 통해 받아온 자원들을 유저에게 보여줌

Browser Rendering

1. 브라우저가 서버에 필요한 리소스를 요청
2. 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성, 렌더 트리를 생성
3. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기) 계산
4. 화면에 HTML요소를 페이팅

js파일을 연결해 주었는데 실행이 안돼요!!ㅜㅜ

js파일의 위치를 확인해보자
html body에 있는 태그를 js에서 읽어올 때 script 태그가 위에 있다면 브라우저가 html파일을 렌더링 하기도 전에 js파일을 실행하여
엥??? html에 그런 태그 없는데 뭔 말이야?? 하면서 오류남
-> 해결방법 : < script defer scr"~.js" > 를 쓰게 되면 head에 있어도 렌더링된 후에 js파일을 실행함

Web API

What's API?

Application Programming Interfaces의 줄임말로 개발자 입장에서 내부코드를 몰라도 쉽게 기능을 가져다 쓸 수 있게 만든 것

Web API

Web API를 이용하여 DOM요소를 조작하거나 업데이트, 비디오&오디오&그래픽 요소를 사용할 수 있음
Web API는 객체 기반으로 동작하고 엔트리 포인트가 존재함
-> ex) 돔 요소를 변경하고 싶어요 -> document 객체부터 접근

BOM (Browser Object Model)

브라우저와 관련된 객체들의 집합
최상위 객체는 window
DOM은 window의 하위 객체

DOM (Document Object Model)

문서 객체란 html이나 body같은 html 문서의 태그들을 JavaScript가 이용할 수 있는 객체로 만든 것
넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하고
좁은 의미로는 document 객체와 관련된 객체의 집합을 의미

DOM의 생김새

// DOM 객체
console.log(document);

// 어떤 객체의 프로퍼티를 조회하고 싶을 때
console.dir(document);

// DOM의 조작
const h1 = document.querySelector('#main-title').textContent;
console.log(h1);

// 가독성 측면에서 사용 권장
const h1Tag = document.getElementById('main-title');

const li = document.getElementsByClassName('list-item');
console.log(li); // array 아님 HTMLCollection임

// querySelectorAll();
const nodeList = document.querySelectorAll('.list-itme');
console.log(nodeList);

getElementsByClassName()과 querySelectorAll() 둘 다 요소가 한개더라도 무조건 리스트로 반환하기 때문에 요소에 바로 접근 불가!
꺼내서 쓰세요~~