[TIL 6] 문서 객체 모델, Node.js 개발환경 구축

nini·2025년 3월 11일
CSSJavaScriptKBKB it's your lifeTILhtmlnode.jsweb

KB IT's Your Life

목록 보기
6/40

문서 객체 모델

문서 객체 모델의 기본 용어와 개념

  • 자바스크립트로 제어를 하기 위해 필요

  • 문서 객체(Document Object): HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것

  • HTML 문서의 요소는 부모-자식 관계를 가짐 —> DOM Tree로 표현

    • 요소노드와 텍스트 노드
      • 컨텐츠를 담고 있는 텍스트 노드는 부모 노드(root)로는 역할을 하지 못하고 맨 마지막, leaf 노드로만 존재 가능

  • 문서 객체 모델 기본 용어

    • 텍스트 노드를 갖지 않는 태그
    • 정적 생성: 웹페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성
    • 동적 생성: 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성
    • 객체 모델: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식
document.querySelector('h1').style.backgroundColor = 'red';
// null return -> 예외 발생(실행 순서에 따른 문서 객체 사용 오류)
// DOM 완성이 먼저 되어야 함
1. script 태그 위치 옮기기(<script>를 맨 마지막에 위치함, <body><h1>이후)
2. 이벤트 활용하기(브라우저에서 최상위 객체인 window의 handler 설정 이벤트명(onload) window.onload = function() {};)
-> 실제 실행을 DOM 완성 이후에 할 수 있음

문서 객체 선택

  • HTML 태그를 자바스크립트에서 문서 객체로 변환

  • 문서 객체를 선택하는 메서드

    • document.getElementById(아이디) → 아이디로 1개 선택
    • document.querySelector(선택자) → 첫번째 값만 return(CSS 선택자로 1개 선택)
    • document.getElementsByName(이름) → name 속성으로 여러 개 선택(배열처럼 사용 가능)
    • document.getElementsByClassName(클래스) → class 속성으로 여러 개 선택
    • document.querySelectorAll(선택자) -> CSS 선택자로 여러 개 선택
<!DOCTYPE html>
<html>
  <head>
    <title>DOM Basic</title>
    <script>
	    // 이벤트 연결
      window.onload = function () {
	      // 문서 객체 선택
        let headers = document.querySelectorAll('h1');
        console.log(headers);

        for (let i = 0; i < headers.length; i++) {
		      // 변수 선언
          let header = headers[i];
          // 문서 객체 조작
          // 스타일 바꾸기
          header.style.color = 'orange';
          header.style.background = 'red';
          // 내용 바꾸기
          header.innerHTML = 'From JavaScript';
        }
      };
    </script>
  </head>
  <body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
  </body>
</html>

querySelectorAll( ) 메서드를 사용해 문서 객체 여러 개 선택하기

  • NodeList
  • 배열인 것처럼 사용, 실제로는 객체 -> 유사 배열 객체
    headers -> { '0' : h1
    '1' : h1
    '2': h1
    'length' : 3 }
  • for( in ), for( of ) 사용 불가능 → length까지 포함해서 순회할 수 있음
  • 배열의 메소드 사용 불가능(.find() X)

    on~ 이 붙은 건 이벤트

문서 객체 조작

  • 글자 조작
    • 글자 속성
      • textContent: 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
        • < > < >
      • innerHTML: 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
  • 스타일 조작
    • 자바스크립트로 CSS 속성 값을 추가, 제거, 변경
      • background-color(X) → backgroundColor
  • 속성 조작
    • 문서 객체의 속성 조작 메서드
      • setAttribute(속성 이름, 속성 값) : 속성 지정
      • getAttribute(속성 이름) : 속성 추출
      • ‘data-’로 시작하는 사용자 지정 속성은 반드시 속성 조작 메서드로 접근

이벤트

  • 이벤트

    • 키보드 누르기, 마우스 클릭 등 어떤 현상이 프로그램에 영향을 미침 window.onload = function() { };
      • 이벤트 핸들러: 해당객체.on~(on이벤트명)

  • 이벤트 연결

    • 이벤트 모델: 문서 객체에 이벤트를 연결하는 방식

    • DOM 레벨 0

      • 인라인 이벤트 모델

        • HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식
          • <태그 on이벤트="자바스크립트코드">…</태그>
          • 주로 함수 호출문을 지정
          • script 태그에 인라인 이벤트 모델 사용하기 - 유지보수 어려움, 권장X
            <script>
	function buttonClick() {
		alert('click');
	}
</script>

      • 고전 이벤트 모델

        • ex. button.onclick = function() {}
        • 이벤트 핸들러를 하나만 등록 가능
          • 겹치면 뒤에꺼 실행됨

    • DOM 레벨 2

      • 마이크로소프트 인터넷 익스플로러 이벤트 모델
      • 표준 이벤트 모델
        • .addEventListener(이벤트명, function)

  • 이벤트 사용

    • 모든 이벤트 핸들러에는 이벤트 정보를 담고 있는 이벤트 객체가 매개변수로 전달됨
    • 이벤트 객체를 사용하면 이벤트와 관련된 정보를 알 수 있음
    • 기본 이벤트
      • 특정 태그가 가진 기본적인 이벤트
      • <a> 의 기본 이벤트

        • href에 지정한 페이지로 이동

        • 이벤트 핸들러에서 false를 리턴하면 기본 이벤트 핸들러 호출되지 않음

          // 이벤트 핸들러에서 return false
button.onclick = function () {
	// 기본 이벤트를 제거
	return false;
};
      • <form> 엔터 - submit
    • 이벤트 핸들러에서는 this를 어떻게 처리?
      • 화살표 함수?
일반 함수: 이벤트 핸들러에서 this는 이벤트가 바인딩된 DOM 요소
화살표 함수: this는 상위 스코프의 this를 참조하기 때문에 DOM 요소를 직접적으로 참조하지 않음
그래서 이벤트 핸들러에서 this가 DOM 요소를 가리키도록 하려면 일반 함수를 사용하는 것이 좋다!

Node.js 개발환경 구축

백엔드 개발 기본 개념 다지기

학습할 백엔드 개발 기초 지식

  • 자바스크립트에 기반한 노드
  • 익스프레이스 프레임워크
  • 데이터베이스 관리를 위한 몽고DB
  • API 구축하기

노드란

  • 노드의 정의 : Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임
  • 하나의 언어로 프론트, 백엔드 모두 개발 가능
  • 개발자 커뮤니티의 규모가 크고 다양함
  • 서드파티 모듈이 많음

노드 설치

  • 환경 벗어나기 .exit

  • node xxx.js 파일 실행

  • run 버튼으로 실행
  • 터미널에서 실행
function hello(name) {
  console.log(name + '님, 안녕하세요?');
}
hello('홍길동');

실습

clock.innerHTML = now.toLocaleString();

clock.innerHTML = now.toLocaleString(’en-US’);

clock.innerHTML = now.toLocaleString(’ko-KR’);

clock.innerHTML = now.toLocaleString(’ja-JP’);

let days = ['일', '월', '화', '수', '목', '금', '토'];
let yy = now.getFullYear(); //년
let mm = now.getMonth() + 1; //월, 1월 -> 0, 2월 -> 1
let dd = now.getDate(); //일
let i = now.getDay(); //요일(0~6)
let day = days[i];

let hh = now.getHours();
let mi = now.getMinutes();
let ss = now.getSeconds();

let result = yy+"-"+mm+"-"+dd+"-"+day+"요일"+hh+":"+mi+":"+ss;

clock.innerHTML = result;
Math.ceil() : 소수점 올림, 정수 반환

Math.floor() : 소수점 버림, 정수 반환

Math.round() : 소수점 반올림, 정수 반환

toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환

parseInt() : 문자 -> 정수   "123" -> 123 (소수점은 무조건 자름)

parseFloat() : 문자 -> 실수 "45.3" -> 45.3

Number() : 문자 -> 정수&실수

let num = 85.9876543
console.log(num.toFixed(3)); // 85.988
console.log(num.toFixed(0)); // 86

let a = "1.7"
console.log(a + 3); // "1.73"
console.log(parseInt(a) + 3); // 1 + 3 = 4
console.log(Math.floor(a) + 3); // 1 + 3 = 4
console.log(Number(a) + 3); // 1.7 + 3 = 4.7
console.log(~~(a) + 3); // Math.floor()와 비슷, 4
var str = "100 + 1";
console.log(eval(str)); // 문자열 -> 수식 변환, 101
eval() : 문자열 → 수식 변환 
<!DOCTYPE html>
<html>
  <head>
    <title>DOM Basic</title>
    <script>
      // 이벤트 연결
      window.onload = function () {
        // 문서 객체 선택
        let header = document.getElementById('header');
        console.log(header);

        // 스타일 바꾸기
        header.style.color = 'orange';
        header.style.background = 'red';
        // 내용 바꾸기
        header.innerHTML = 'From JavaScript';
      };
    </script>
  </head>
  <body>
    <h1 id="header">Header</h1>
  </body>
</html>
  • getElementById( ) 메서드를 사용해 문서 객체 1개 선택하기(아이디로 1개 선택)

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Basic</title>
    <script>
      window.onload = function () {
        let header = document.querySelector('h1');

        header.style.color = 'orange';
        header.style.background = 'red';
        header.innerHTML = 'From JavaScript';
      };
    </script>
  </head>
  <body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
  </body>
</html>
  • querySelector( ) 메서드를 사용해 문서 객체 1개 선택하기(CSS 선택자로 1개 선택)

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <script>
      window.onload = function () {
        let headers = document.querySelectorAll('h1');
        // 배열인 것처럼 사용, 실제로는 객체 -> 유사 배열 객체
        // headers -> { '0' : h1 '1' : h1 '2': h1 'length' : 3 }
        // for(in), for(of) 사용 불가능
        // 배열의 메소드 사용 불가능(.find() X)

        console.log(headers);

        for (let i = 0; i < headers.length; i++) {
          let header = headers[i];
          header.style.color = 'orange';
          header.style.background = 'red';
          header.innerHTML = 'From JavaScript';
        }
      };
    </script>
  </head>
  <body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
  </body>
</html>
  • querySelectorAll( ) 메서드를 사용해 문서 객체 여러 개 선택하기

<!DOCTYPE html>
<html>
  <head>
    <title>내부 글자 변경</title>
    <script>
      // 이벤트 연결
      window.onload = function () {
        // 변수 선언합니다.
        let output = '';
        for (let i = 0; i < 10; i++) {
          output += '<h1>Header - ' + i + '</h1>';
        }
        // 문서 객체 내부의 글자 변경
        document.body.textContent = output; //innerText
        // innerHTML 속성 사용
        //document.body.innerHTML = output;
      };
    </script>
  </head>
  <body></body>
</html>

내부 글자 변경

  • textContent - 문자 그대로 출력
  • innerHTML - CSS 스타일을 반영해야 할 때만 사용하면 좋음
profile
nini
사용자를 고려한 디자인과 UX에 관심있는 개발자
이전 포스트

[TIL 5] 자바스크립트 기본 문법

다음 포스트

[TIL 7] Node.js 개발환경 구축-패키지, 자바스크립트 기초 문법과 모듈

0개의 댓글