📝 JavaScript 기초

📢 DOM

문서 객체 모델(DOM)이란?
Document Object Model 은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
DOM은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
계층 구조로 표현되며, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

DOM의 종류

Core DOM : 모든 문서 타입을 위한 DOM 모델
HTML DOM : HTML 문서를 위한 DOM 모델
XML DOM : XML 문서를 위한 DOM 모델

참고

💡 Document

Document 객체란?
웹 페이지를 의미한다. 웹에 존재하는 HTML 요소에 접근하고자 할 때는 Document객체부터 시작해야한다.

Document 메소드를 통해 HTML 요소에 관련된 작업을 수행한다.

HTML 요소 선택 메소드	설명
document.getElementById(아이디)	해당 아이디의 요소를 선택
document.getElementByClassName(클래스이름)	클래스에 속한 요소 모두 선택
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector(선택자)	해당 선택자로 선택되는 요소를 1개 선택

HTML 요소 생성 메소드	설명
document.createElement(HTML요소)	지정된 HTML 요소를 생성
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력

HTML 이벤트 핸들러 추가 메소드	설명
요소.onclick = function(){ 실행할 코드 }	마우스 클릭 이벤트와 연결될 이벤트 핸들러

사용 예시

var selectedTag = document.getElementByTagName("div");
// 선택된 요소의 색상 변경
selectedTag.style.color = "blue";
// 내용 변경
selectedTag.innerHTML = "HELLO WORLD";

📢 Node객체

Node란?
HTML DOM에서 정보를 저장하는 계층적 단위를 말한다.
HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장이 되는데, 노드 트리는 노드들의 집합으로 노드 간의 관계를 보여준다.
자바 스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 할 수 있다.

노드의 종류

• 문서 노드 : HTML 문서 전체를 나타내는 노드
• 속성 노드 : 모든 HTML 요소의 속성은 속성노드이며, 요소 노드에 관한 정보를 가짐
• 텍스트 노드 : HTML 문서의 모든 텍스트
• 요소 노드 : 모든 HTML 요소는 요소노드이며, 유일하게 속성노드를 가질 수 있음
• 주석 노드 : HTML 문서의 모든 주석

노드 접근 방법

1. 노드간의 관계를 이용하여 접근하는 방법

   • parendNode : 부모노드
   • chileNodes : 자식 노드 리스트
   • firstChild : 첫 번째 자식 노드
   • lastChile : 마지막 자식 노드
   • nextSibling : 다음 형제 노드
   • previousSibling : 이전 형제 노드

2. getElementsByTagName() 메소드를 이용하는 방법

   • 이 메소드는 특정 태그 이름을 가지는 모든 요소를 노드 리스트 형태로 반환
   • 노드 리스트를 이용하여 접근 가능

노드에 대한 정보는 nodeName, nodeValue, nodeType과 같은 프로퍼티를 통해 접근 가능하다.

• nodeName : 노드 고유의 이름을 저장, 수정 x, 읽기 전용 프로퍼티
• nodeValue : 노드의 값을 저장하는 프로퍼티
• nodeType : 노드 고유의 타입을 저장, 수정 x, 읽기 전용 프로퍼티

// nodeName을 이용하여 노드 이름에 접근
document.childNodes[0].nodeName;
// nodeValue를 사용해 노드값에 접근
document.getElementById("first").firstChild.nodeValue;
// nodeType을 사용하여 노드 타입에 접근
document.getElementById("first").firstChild.nodeType;

---

📝 JavaScript 심화

📢실행 컨텍스트(Execution context)

💡 실행 컨텍스트란?
코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화 하기 위해 객체 형태로 나타낸 것으로 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 생각하면 된다.

실행 가능한 코드

• 전역 코드 : 전역 영역에 존재하는 코드
• 함수 코드 : 함수 내에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드

실행에 필요한 여러가지 정보

• 변수 : 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효범위(scope)
• this

실행 컨텍스트 스택

실행 컨텍스트는 논리적 스택 구조를 가진다. 함수를 실행하면 실행 컨텍스트가 생성이 되고, 또 다른 함수가 실행이 되면 그 위에 실행 컨텍스트가 생성되어, 스택구조로 콜스택 메모리에 쌓인다.

1. 컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다. 스택은 LIFO(Last In First Out, 후입 선출)의 구조를 가진다.
2. 전역 코드(Global code)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다.
3. 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다.
4. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.

💡 메모
자바스크립트가 실행될 때 전역 실행 컨텍스트 생성
함수가 실행될 때 함수 실행 컨텍스트 생성

실행 컨텍스트의 3가지 프로퍼티

• 활성객체(변수 객체, Variable Object,VO)
• 스코프 체인(Scope Chain)
• this

실행 컨텍스트 생성 및 실행 과정

1. 활성객체(변수객체 생성)
2. arguments 객체 생성
3. 스코프 정보 생성
4. 변수 생성
5. this 바인딩
6. 코드 실행

---

Reference :

참고 사이트
참고 velog
참고 블로그

---

📢 this

💡 this란?
this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성을 의미한다.

바인딩이란?
식별자와 값을 연결하는 과정으로 this 바인딩은 this와 this가 가르킬 객체를 바인딩 하는 것이다.

• 함수의 호출환경에 따라 this는 동적으로 세팅된다.
• this가 환경에 따라 바뀌는 것을 동적 바인딩이라 한다.
• bind, apply, call 메서드 사용 시, 메서드의 첫번째 인수로 전달하는 객체에 this가 바인딩 된다. (명시적 바인딩)

함수가 호출되는 상황

1. 함수 호출 - 함수를 직접 호출
2. 메서드 호출 - 객체의 메서드를 호출
3. 생성자 호출 - 생성자 함수를 호출
4. 간접 호출 - call,apply,bind 함수를 호출

---

전역범위

console.log(this)
// Window {0: global, 1: global, 2: global, …}

javascript에서 가장 평범하게 this를 호출한다면 this는 window 객체를 가르킨다.

함수 호출

// 1. 일반 함수내에서 호출
function test() {
  	console.log(this); //this는 window
	// 2. 함수 안의 함수 내부에서 호출
  	function test2(){
      console.log(this); //this는 window
    }
}

함수 안에서 this는 함수의 주인에게 바인딩 되는데 함수의 주인은 window객체이다. 함수 안에서 또 함수를 선언하더라도 this는 window이다.

객체의 메소드

var student = {
  	name : "jenny",
  	hello : function(){
    	console.log("hello my name is " + this.name);
      	//여기서 this는 객체인 student를 가리킨다.
    }
student.hello(); // hello my name is jenny

this는 해당 메소드를 소유한 객체에 바인딩 된다.

생성자 함수 호출

생성자 함수
- 함수이름의 첫글자는 대분자로 시작
- 반드시 new연산자를 붙여 실행

function Fruit(name) {
	this.name = name;
}

var apple = new Fruit('apple');

console.log(apple.name); //apple

생성자 함수가 생성하는 객체로 this가 바인딩 된다.

call(), apply(), bind()

function Student(){
	console.log(this);
}
var name = {
 name : "jenny" 
}
Student.call(name); // {name:"jenny"}

this는 특정 객체에 바인딩이 된다.

화살표 함수

화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리키지만 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

• 화살표 함수의 this는 정해지면 바꿀 수 x
• call, bind, apply를 사용해도 바뀌지 x
• this가 바뀌는 상황에서 유용

---

참고:
1. 참고 velog
2. 참고
3. 참고

---