Created by useiconic.comfrom the Noun Project JH'Lab

JS - DOM(Documents Object Model) Study

 
  • 2022년 12월 30일

1. 브라우저 플랫폼


1) JS의 브라우저 플랫폼 :

  • DOM, BOM, CSSOM


2) 브라우저 객체 :

  • window에서 이용하는 객체들은 다음과 같다.
    • window
    • window.location
    • window.history
    • window.document(주로 이용할 것임.)


3) JS prompt 함수의 주의 사항 :

  • 사용자 입력은 문자열로 받기 때문에 계산을 하기 위해서는 형변환을 해줘야한다.
    • parseInt() 이용
    • parseInt()는 괄호 안의 문자열에서 문자가 있으면 문자는 빼고 숫자만 형변환 해준다.
      • ex : 12abc는 12의 숫자가 된다.



2. 이벤트 기반의 코드 실행

1) JS의 이벤트 기반 코드 작성

- html 파일의 태그 안에서 on이라고 시작하는 모든 것을 이벤트 기반의 코드라고 부른다.

<input onclick="어떠한 로직의 코드 입력">
</input>

- 이벤트 기반의 코드를 작성할 때, onclick에는 ""를 써주는데 ""안에 문자열을 쓰고 싶으면 ''인 싱글 코테이션을 안에 넣어준다.

- 이러한 모습이 JS에서 이벤트 기반 코드를 작성하는 모습이다.



3. 페이지 로드 이벤트

1) 이벤트와 함수 나누어 작성하기

  • 위의 코드처럼 JS에서 이벤트 기반의 코드를 작성 시, 코드가 길어지기 때문에 이를 해결하고자 이벤트와 함수를 나누어서 작성한다.


  • window.onload 사용 :
    • 코드 실행 순서상 함수 호출 시, 바로 실행할 수 있게 하기 위해서 onload를 실행해준다. 메모리에 올라가는 것을 생각해야 한다.(다시 듣기) - function(){printResult();}와 printResult()와 printResult를 구별하기


  • dom.html 파일과 dom.js 파일로 나누어서 dom.html에는 view단이, dom.js에는 controller 단이 입력된다.


  • dom.html 파일과 dom.js 파일을 연결해주는 도구는 dom.html에서 input 태그의 id를 입력해서 관계를 연결시켜준다.



4. 다중 초기화 함수 처리 방법

1) 다중 초기화 함수 처리 방법을 하는 이유 :

- 이름이 같은 함수를 외부파일에서 만들면 충돌 문제가 발생한다.
- window.onload는 함수가 더해져서 실행되는 것이 아니라 함수가 덮어쓰기로 교체되어서 실행되므로 기존에 실행되었던 함수가 사라지고 그 다음 함수만 실행된다.
- 이러한 문제점을 해결하기 위해서 window.addEventListener 메서드가 사용된다.

2) window.addEventListener :

	window.addEventListener("load", function(){
		console.log("라이브러리 초기화");
	});
  • window.addEventListener 메서드는 위와 같이 쓰인다.



5. 엘리먼트 객체 선택하기

1) 기존 코드처럼 controller단과 view단을 나누면 문제점

  • html 태그의 id값을 js파일에서 그대로 사용하면 문제점이 발생한다.
    • html 파일의 id명 규칙: btn-print
    • js 파일의 id명 규칙: btnPrint
  • 따라서, 변수명을 공유하기 위해서는 변수명을 맞춰주어야 한다.

2) 1)의 문제점 해결법 : document.getElementById()

  • this.document.getElementById()를 이용하여 html 파일의 id값을 가져온다.

  • 그 가져온 id 값에 새로 만든 함수를 대입해줘서 controller단과 view단을 나누면 생기는 문제점을 해결한다.(id 네이밍 문제 해결)



6. 객체를 선택하는 일반적인 방법

  • document.getElementById();
  • section.getElementByClassName();

  • section.getElementByClassName();

    • 위의 코드를 응용해서 범위를 한정해서(document에서 section으로) 탐색한다.
    • 메모리적으로 효율적이다.



7. Selectors API

  • querySelector();

  • quertSelectorAll();

    • 앞으로 html 태그나 style.css와 같이 속성을 넣어주기 위해서 많이 쓰일 예정인 API이다.


  • selection.querySelector(“input[type=text]”);

    • input의 속성으로도 불러올 수 있다.
© JH'Lab 2021
검색