[JS] JavaScript on the Browser - HTML in JavaScript, 자바스크립트로 HTML에 접근하기, JS 기초, JS 동작 원리, Document

 

JavaScript와 HTML

 

JavaScript가 브라우저를 어떻게 움직이게 하는지 배우기 위해서는 HTML을 JS에서 읽어올 수 있어야 한다.

JavaScript와 HTML이 서로 어떻게 동작하는지 명확하게 이해하는 것이 매우 중요하다.

이유는 JS의 모든 것들이 이러한 개념으로부터 시작하기 때문이다.

 

HTML은 CSS와 JavaScript를 가져오고 있으며, JavaScript를 사용하는 이유는 HTML과 상호작용하기 위함이다.

즉, HTML코드와 HTML의 element들을 JavaScript를 통해 접근해서 변경하고 읽을 수 있다는 것이다.

 

 

Document Object

 

그 전에 알아야 할 것은 브라우저의 핵심 object인 document이다.

개발자 도구에서 console창을 열고 console창에 document를 입력하면 전체 HTML을 보여준다.

 

이렇듯 document는 JavaScript 관점에서의 HTML을 말한다.

document는 HTML과 상호작용이 가능하게 하고, 브라우저에서도 사용이 가능하다.

JS로 정보를 가져올 수 있는 방법은 document 객체와 element를 가져오는 수많은 함수들을 이용하는 것이다.

getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll 등 element를 가지고 오는 함수들은 다양하다. 그 중에서 querySelector, querySelectorAll을 사용하면 더욱 편리하게 사용할 수 있다.

 

 

JavaScript로 HTML에 접근해 코드 가져오고 저장, 변경하기

 

예를 들어 HTML에서 h1 태그 안에 id=“title” 추가 후에

<h1 id=”title”>Hello</h1>

JS에서 document의 함수인 getElementById(id 가져오는 함수)로 해당 element의 HTML 태그를 가져와서 변수에 저장한다.

즉, 위에 적어놓은 HTML 태그만 가져와서 저장하는 것이다.

JS는 HTML element를 가지고 오지만, HTML 자체를 보여주지는 않는다.

const title = document.getElementById(”title”);

 

element를 찾고 나면 어떤 HTML element이든지 간에, JS에 의해 뭐든지 가져오고 저장한 후 변경할 수 있다.

ex) 알맞은 함수로 변수 저장 후, title.innertext = “Hi” (변수명.요소 = 변경내용) 입력하면 브라우저 화면에 HTML에서 작성했던 Hello가 아닌 Hi가 비춰진다.

 

 

JavaScript에서 HTML element 확인 방법

 

JavaScript에서 id 뿐만 아니라 className, innertext, autofocus 등의 다양한 HTML element를 확인할 수 있다.

태그 하나에서 가져올 수 있는 element들과 정보를 자세하게 확인하는 방법은 다음과 같이 입력하고 console창에서 확인해보면 아래와 같이 나온다.

console.dir(title);      // console.dir(변수명)

 

 

 

console창에서 HTML element 확인하기

 

JS에서 HTML 항목을 가져오고 있으니 해당 태그의 id나 className, innertext 등 모든 element들도 확인할 수 있다.

예를 들어 HTML에 className도 추가해본 후

<h1 class="hello" id=”title”>Hello</h1>

JS에서 다음과 같이 적고

console.log(title.id);
console.log(title.class);

console창에서 확인해보면 확인 가능하다.

 

 

 

 

*노마드코더 강의 '바닐라 JS로 크롬 앱 만들기' 참고*