자바스크립트로 할 수 있는 것 중 하나가 DOM을 조작하는 것이다.
DOM을 조작하기 앞서, 우선 DOM이 무엇인지 간단히 알아보자.
DOM 이란
Document Object Model (DOM) - Web APIs | MDN
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or X
developer.mozilla.org
JavaScript HTML DOM
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 W3Schools의 글을 발췌해보면,
객체 모델(DOM)을 통해 JavaScript는 동적 HTML을 생성하는 데 필요한 모든 기능을 얻을 수 있습니다.
JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다.
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.
JavaScript는 기존 HTML 요소 및 속성을 제거할 수 있습니다.
JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다.
JavaScript는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있습니다.
JavaScript는 페이지에서 새로운 HTML 이벤트를 생성할 수 있습니다.
즉, DOM을 이용해서 자바스크립트로 html의 element들을 조작할 수 있다.
그럼 DOM을 이용해서 자바스크립트로 구글 홈페이지를 변경해보자.
DOM 조작 예시
구글 홈페이지에 들어왔다.
지금부터 자바스크립트를 이용해 이 웹페이지를 변경해볼것이다.
개발자도구를 켜보자.
개발자 도구의 Elements란에는 해당 페이지의 html을 볼 수 있다.
웹페이지의 html은 크게 웹페이지의 정보가 들어 있는 <head> 태그와 페이지의 내용이 들어 있는 <body> 태그로 구성되어 있다.
태그 안에는 많은 태그들이 트리구조를 이루며 존재하고 있고, DOM은 자바스크립트로 이러한 태그들을 조작할 수 있게 한다.
자바스크립트 코드를 입력하기 위해 콘솔 창에 들어가자.
브라우저 내부에 자바스크립트를 실행시킬 수 있는 엔진이 있기 때문에, Console란에서는 자바스크립트를 실행시킬 수 있다.
그러면 구글 홈페이지의 <body> 태그를 다른 태그로 바꿔보자.
const junheeElement = document.createElement('body')
junheeElement.textContent = 'Welcome Junhee-hee Tistory'
document.body = junheeElement한줄 씩 설명하자면
첫째줄은 <body> 태그를 만들고 그것을 junheeElement로 지정하는 것이다.
여기서 document는 DOM의 최상위 노드이고, DOM에는 createElement같은 메소드들이 정의되어 있어 사용할 수 있다.
둘째줄은 위에서 만든 태그에 'Welcome Junhee-hee Tistory' 텍스트를 추가하는 것이다.
즉 <body>Welcome Junhee-hee</body>가 된다.
마지막 줄은 구글 홈페이지의 body태그에 내가 만든 태그를 대입하는 것이다.
해당 코드를 콘솔창에서 실행하면
짜잔 구글홈페이지 바뀌었다!
elements란을 보면 복잡하던 <body> 태그는 없어지고 내가 만든 태그로 대체되었다.
이렇게 자바스크립트로 html을 조작할 수 있다.
DOM을 이용하면 모든 태그의 모든 속성을 조작할 수 있다!
마지막으로 여기서 새로고침을 누르면 어떻게 될까?
당연히도 구글 홈페이지가 다시 렌더링 된다.
우리가 바꾼 것은 구글 홈페이지가 렌더링 될 때 우리 브라우저에 생긴 DOM이다.
즉 우리만 볼 수 있는 페이지의 DOM이다.
새로고침을 하면 서버로부터 다시 구글 홈페이지의 html이 받아질테고 DOM도 처음처럼 새로 만들어진다.