브라우저에서의 자바스크립트 동작 알아보기.1

현재 Codeit | JavaScript 중급과정을 중 'Browser에서 자바스크립트 동작'부분을 학습 중이다. 이 부분에서 새롭게 알게 된 정보와 중요하다고 생각되는 내용 그리고 배운 내용과 관련된 간단한 예제코드등을 정리해보았다.

🙄⁉브라우저도 객체이다?!

강의 내용에서 이런 말을 듣고 관련 내용을 검색해보았는데, 단순히 '브라우저=객체'가 아닌 웹 브라우저는 여러 객체들을 가지고 있다. 라고 표현하는게 맞는거 같다.

그렇다면 웹 브라우저가 가지고 있는 객체들은 무엇일까?

window (최상위 객체)
location
navigator
history
screen
document (DOM이라고도 부른다)

이 위의 객체들은 자바스크립트가 아닌 웹브라우저에서 제공하는, 즉 웹브라우저가 가지고 있는 객체라고 정의해도 괜찮지 않을까 싶다.

자바스크립트는 이 웹브라우저가 가지고 있는 이 여러 객체를 통해서 다양한 동작을 가능하게 만들어 주는 거 같다.

✔window 객체란?

웹브라우저의 최상의 객체이자 전역 객체이다.(global-object라고도 불린다)
한마디로 브라우저를 대변하는 객체가 widnow 객체인 것이다.

console.log(window); //outputs:콘솔로 확인하면 정말 무수히 많은 프로퍼티와 메소드들이 출력된다.

위의 코드처럼 우리가 흔히 사용하는 console역시 window 객체의 프로퍼티인 것이다. 굳이 console프로퍼티 앞에 window.console.log() 처럼 window 객체를 앞에 붙이지 않는 이유는 브라우저에서는 어디서든 전역객체인 window를 품고 있기 때문에 console.log()라고 쳐도 자동으로 window프로퍼티인지 인식한다.

자바스크립트는 객체들을 다루기 굉장히 용이한 언어이다. 그런만큼 브라우저가 가진 여러 객체들로 다양하게 활용이 가능할 거 같다.

✔DOM(Document Object Model)이란?

상단에 나온 웹브라우저가 가지고 있는 객체 중 하나인 'document 객체'이다.
여기서의 'document 객체'란 웹브라우저는 사용자가 원하는 컨텐츠를 보여주기 위해서 웹페이지의 HTML문서(파일)을 해석하는데 바로 이때 웹페이지의 DOM 객체를 생성시켜준다.

실질적인 HTML문서의 값들이 담겨진 DOM 객체이기에 자바스크립트에서는 document의 다양한 프로퍼티와 메소드들을 통해 다양한 동작들의 컨트롤이 가능해지는 것이다.

console.log(document); //outputs:window객체와 마찬가지로 다양한 프로퍼티와 메소드들이 출력된다.

✔DOM 트리란?

DOM객체가 생성되면서안의 각 태그 구조와 값들을 트리 구조로 만들어준다. 여기서의 트리 구조란 HTML문서와 똑같이 '부모'와 '자식'의 계층 구조로 만들어준다는 의미이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>JS with me</title>
  </head>
  <body>
    <h1>Hello JJuice</h1>
    <p>Welcome</p>
  </body>
</html>

위와 같은 html 코드를 DOM객체로 생성한다는 것은
브라우저(window) >> document >> html >> head,body 와 같은 트리 구조로 되어 있다.

자바스크립트는 이러한 트리 구조의 부모,자식 요소들을 객체로 다룬다.
브라우저(window)객체 >> document객체 >> html객체 >> head,body객체
이 각각의 객체를 노드(Node)라고도 부릅니다.

HTML문서를 구성하는 노드는

문서 노드(document node)
요소 노드(element node)
속성 노드(attribute node)
텍스트 노드(text node)
주석 노드(comment node)

이렇게 5가지 종류가 있다. 이 중에 대표적인 노드인 '요소 노드'와 '텍스트 노드'에 대해서 조금 더 자세히 알아보고 넘어가자.

노드 종류	설명	EX
요소 노드	모든 HTML 요소를 말한다.속성 노드를 가질 수 있는 유일한 노드	head,title,body,h1등
텍스트 노드	모든 텍스트를 말한다.	title요소 노드 안의 JS with me 값

대부분의 DOM객체는 요소(Element) 노드와 텍스트(text) 노드로 구성이 되어 있다.

그 다음으로 각 노드 간은 관계로 맺어져있다.
노드간의 관계의 종류 크게 4가지이다.

루트 노드(Root node)
부모 노드(Parent node)
자식 노드(Child Node)
형제 노드(Sibling Node)

보통의 웹페이지 HTML 트리 구조에서 가장 상위는 는 루트 노드라고 한다. 루트 노드를 제외한 부모,자식,형제 노드는 오직 단 하나의 부모 노드만을 가질 수 있다. 그리고 모든 요소 노드는 자식 노드를 가질 수 있다.

<body>
    <div>
        <h1>Hello</h1>
        <p>JJuice</p>
    </div>
</div>

위의 코드를 기준을 봤을때

<body>의 자식 노드는 <div>이다.
<h1>의 부모 노드는 <div>이다.
<div>의 자식 노드인 <h1>과 <p>이 둘의 노드는 형제 노드이다.

DOM트리와 자바스크립트에서 다양한 프로퍼티와 메소드를 이용해 노드에 접근해보자.

<html>
<head>
    <title>JS 노드 접근해보기</title>
</head>
<body>
    <h1>오버워치 캐릭터 알아보기</h1>
    <ul id="tanker-list">
        <li>라인하르트</li>
        <li>자리야</li>
        <li>시그마</li>  
    </ul>
    <script src='index.js'></script>
</body>
</html>

index.js파일에서 원하는 노드로 접근해 결과값을 출력시켜보자.

■ 부모,자식,형제 노드 관계를 이용하는 프로퍼티를 이용해 노드 접근해보기.

부모 요소 프로퍼티 : parentElement
자식 요소 프로퍼티 : children, firstElementChild, lastElementChild
형제 요소 프로퍼티 : previousElementSibling , nextElementSibling

//index.js
//1.자식 요소 프러퍼티
const tankerList = document.querySelector('#tanker-list');
console.log(tankerList.children[1]); //outputs: <li>자리야</li>
console.log(tankerList.lastElementChild); //outputs: <li>시그마<li>

//2.부모 요소 프로퍼티
console.log(tankerList.parentElement); //outputs: <body>...</body>

//3.형제 요소 프로퍼티
console.log(tankerList.previousElementSibling); //outputs:<h1>오버워치 캐릭터 알아보기</h1>
console.log(tankerList.nextElementSibling); //outputs:<script...></script>

<ul id="tanker-list">의 자식들은 <li></li> x 3개이기 때문에 배열의 index와 같이 대가로 표기법을 사용해 노드에 접근할 수 있다.
출력값은 해당하는 요소 노드(element node)를 가져온 것이다.
혹시나 요소 노드가 아닌 텍스트 노드값을 가져오고 싶다면 textContent프로퍼티를 이용하면 아래 코드와 같이 요소 노드가 아닌 텍스트 노드값만을 출력할 수 있다.

console.log(tankerList.firstElementChild.textContent); //outputs:라인하르트

자식,부모,형제 프로퍼티를 같이 사용해서 노드값에 접근할 수도 있다.

console.log(tankerList.children[1].previousElementSibling); //outputs:<li>라인하르트</li>

■ innerHTML, outerHTML, textContent 프로퍼티를 이용해 노드 접근해보기.

const tankerList = document.querySelector('#tanker-list');
console.log(tankerList.innerHTML); //outputs: <li>...</li> x 3
console.log(tankerList.outerHTML); //outputs: <ul id='...'><li>...</li> x3 </ul>
console.log(tankerList.textContent); //outpust: 라인하르트 자리야 시그마

위의 결과값에 알 수 있듯이

innerHTML : 접근한 노드 자식들의 요소 노드값 + 텍스트 노드값을 가져온다.(요소안의 줄바꿈이나 들여쓰기 전부 가져온다)
outerHTML : 접근한 노드 요소 노드값 + 자식들의 요소 노드값 + 텍스트 노드값을 가져온다.(요소안의 줄바꿈이나 들여쓰기 전부 가져온다)
textContent : 접근한 노드 자식들의 요소 노드값안의 텍스트 노드값만을 가져온다.

위 3개의 프로퍼티는 노드에 접근하는 것 말고도 노드값의 수정이 가능하다.

tankerList.innerHTML = '<li>레킹볼</li>'; //기존의 3개의 <li>값이 사라지고 새로운 innerHTML값으로 출력된다.
tankerList.outerHTML = '<li>디바</li>'; //기존의 <ul id...><li>..</li></ul> 노드가 전부 사라지고 outerHTML 값으로 출력된다.
tankerList.textContent = '<li>로드호그</li>'; //⛔주의할점:textContent 프로퍼티값에 태그,즉 기본 요소값이 들어가면 요소가 아닌 텍스트로 인식한다. 그렇기에 실제 보여지는 값은 '로드호그'가 아닌 '<li>로드호그</li>`값 전체가 보여진다.

혹시나 기존의 <li>값을 유지한채 값을 추가하고 싶다면

//<li>시그마</li> 다음에 값 추가
tankerList.innerHTML = tankerList.innerHTML + '<li>레킹볼</li>';
tankerList.innerHTML += '<li>레킹볼</li>';

//<li>라인하르트</li> 앞에 값 추가
tankerList.innerHTML = '<li>레킹볼</li>' + tankerList.innerHTML;

outerHTML 같은 경우 해당하는 요소 노드부터 자식들의 노드까지 값이 수정되기 때문에 조심해야 한다.

//기존의 <ul id='#tanker-list'>는 삭제된다.
tankerList.outerHTML = '<li>윈스턴</li>';

//새로운 <ul>리스트를 추가한다.
tankerList.outerHTML += '<ul><li>디바</li><li>레킹볼</li></ul>';

'브라우저에서의 자바스크립트 동작 알아보기.1' 첫 번째 포스트는 여기에서 마무리 하고 다음 포스트에서는 직접 요소 노드를 추가 / 노드 삭제와 이 / HTML 표준 속성(attribute) 다루기 / CSS Style 다루기 / HTML 비표준 속성 다루기를 정리해보도록 하겠습니다.

브라우저에서의 자바스크립트 동작 알아보기.2

저작자표시 변경금지 (새창열림)

'🍖 WELL-DONE Project > Javascript' 카테고리의 다른 글

this 개념 이해하기 (0)	2021.02.17
브라우저에서의 자바스크립트 동작 알아보기.2 (0)	2020.12.18
HTML에서의 자바스크립트가 어떻게 동작하는지 알아보기. (0)	2020.12.15
자바스크립트 문자열(String) 익히기 - 배열(Array)과 공통점&차이점 (0)	2020.12.08