JavaScript(1) - 20220419

이번 포스팅은 JavaScript의 순수 언어로써의 특징보다는 웹과 상호작용할 때 필요한 부분을 먼저 정리할 것이다.

 

1. DOM (Document Object Model - 문서 객체 모델)

1. DOM은 HTML 문서의 프로그래밍 인터페이스이다.

• HTML 문서를 계층적 구조로 표현
• 구조화된 표현을 제공하여 문서의 구조, 스타일, 내용 등을 바꿀 수 있다.
• window객체는 말 그래도 창전체를 의미하고 document객체는 웹페이지 자체를 의미한다. 그래서 웹페이지를 구성하는 요소에 접근, 생성, 요소에 대한 이벤트 추가 등을 할 때 document객체로부터 시작된다.

• 노드객체는 DOM에서 정보를 저장하는 계층적 단위이다.
• 노드의 종류
  1. 문서노드 - 최상위노드
  2. 요소노드(elementNode) - 속성노드를 가지는 유일한 노드(태그를 의미)
  3. 속성노드(attributeNode) - 태그가 가지는 속성을 의미
  4. 텍스트노드 - HTML문서내에 요소이외에 있는 텍스트들을 의미

 

2. event

1. event는 웹브라우저가 알려주는 HTML요소에 대한 사건의 발생을 알려주는 객체이다.

2. event.preventDefault() 해당요소가 가지고 있는 기본 동작을 막는다는 의미이다. 자주 사용하고 용이한 메서드이다.

 

3. JavaScript와 HTML

1. 요소에 접근하는 방법

document.querySelector("css선택자")	#id일때는 유일하지만 .class일때는 가장 첫번째 보이는 요소를 반환
document.querySelectorAll("css선택자")	.class일때 class에 속한 모든 요소를 배열로 반환
document.getElementById("id");	id값으로 요소를 찾음
document.getElementsByClassName("classname");	class에 속한 모든 요소를 배열로 반환 class에 속한 요소가 하나라면 그것을 이용하기 위해선 뒤에 인덱스 [0]을 붙여줘야함
document.getElementsByTagName("tagname");	지정한 tag를 배열로 모두 반환

 

 

2. 알아두면 편리한 태그 관련 메서드(모두 문서노드 또는 선택된 요소에서 메서드를 사용한다.)

• firstChild, lastChild, firstElementChild, lastElementChild -> 요소가 가지고 있는 첫번째 또는 마지막 자식들을 반환 보통은 마지막 두개를 사용
• childNodes, children -> 요소가 가지고 있는 자식을 배열로 반환
• classList -> 요소가 가지고 있는 클래스를 배열로 반환 || add("클래스 이름") -> 요소의 클래스에 다른 클래스를 추가 || remove("클래스 이름") -> 클래스 삭제
• append("추기힐 요소"), appendChild("추기힐 요소") -> 요소에 자식(또 다른 요소)을 추가할 때 사용
• remove() -> 자기 자신을 삭제 || removeChild("자식 요소") -> 자식을 삭제 
• append(), remove()의 경우는 js가 제공하는 메서드
• innerText -> 요소에 텍스트를 작성 || createTextNode와는 조금 다름
• innerHTML -> 요소에 HTML을 직접 작성 가능
• addEventListener -> 요소에 event에 대한 동작, 기능을 정의할 때 사용
• getAttribute("태그 속성이름") -> 요소에 대한 속성에 접근을 한다.