개발공부/[JS]바닐라JS로 크롬 앱 만들기(노마드코더) 2

[#3.1]HTML in Javascript_getElementById란?

Grab me ! 여기 안에 태그를 삽입하였다. h1태그의 text는 "Grab me ! " 이고 id는 "title"이다. 1. document.getElementById() getElementById를 통해 ID를 인자로 입력하여 인자로 입력한 값이 id인 요소를 가지고 올수있다. 위의 이미지는 콘솔창에 document.getElementById()를 입력한 경우이다. 인자로를 title을 입력하여 id가 title인 요소를 가지고 왔다. 이렇게 id가 "title"인 값을 hi에 저장하여 console.dir으로 볼수있다. hi의 textContent도 확인할 수 있다. 이 상태에서 JS코드를 추가해보자. 다음과 같이 app.js 코드에 id가 title인 친구를 const title 에 넣는다. ..

[#3.0]The Document Object_JS는 어떻게 HTML을 가져올까?

먼저 제목에 대한 답을 말하자면 브라우저에서 HTML에 대한 정보를 담은 document를 제공해준다. 그래서 JS는 HTML의 내용을 볼수있고 수정할 수 있다. HTML은 CSS와 JavaScript를 가져온다. HTML의 Element들을 JS를 통해 변경하고 읽을 수 있다. 콘솔창에 document를 입력하면 해당 페이지의 html 코드가 나온다. document은 우리가 말들거나 연결하지 않아도 이미 브라우저에 존재하는 objcet 이다. 이 object는 우리가 접근할 수 있는 HTML을 가리킨다. console.dir(document)를 호출하면 더 자세한 정보가 나온다. => console.dir은 요소를 JSON과 같은 트리구조를 출력한다. Json 구조의 document를 확인할 수 있다..