JavaScript | DOM & document

katej927·2020년 12월 24일
0

JavaScript

목록 보기
13/16
post-thumbnail

DOM (Document Object Model)

  • 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
  • 역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌
    JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함

document (전역객체)

  • JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음.

    js가 html에 접근할 때 사용

  • DOM트리의 root node에 접근하게 해줌

요소(element) / 요소의 속성(attribute) / 요소의 내용(content) 에 접근 가능

  • class, id 추가 & style 수정 가능
  • 내용(content) : innerHTML으로 접근 / 수정
            // 1.
            document.body.innerHTML = '바꿀 값';

            // 2. 
            let blueElement = document.querySelector('.blue');
            blueElement.style.backgroundColor = 'blue';

            // 3.
            createElement(tagName)

            //4.
            const 변수명 = document.getElementsByClassName('클래스명')[0];
    1. body태그 내부 모든 요소를 '바꿀 값'으로 전부 교체
      - 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줌
    1. 특정 element 접근 (css selector (class, id, tag 등)로 가능)
      - JavaScript에서 style 수정할 때

      hypen(-) 사용불가

      camelCase 사용

    1. element 생성
    • 아직 HTML의 어디에 들어가야 할지 지정해준 것 아님
      - 생성 후 어딘 가의 element에 append시켜줘야 함.
    1. class로 요소 찾는 함수와 index
    • .getElementsByClassName('클래스명')

      '클래스명'이 클래스이름인 요소를 찾음

    • [index]

      앞의 함수가 요소들을 찾으면 배열로 반환 → 원하는 위치의 index 찾음

  • 주의

    • 함수가 찾은 요소 1개→ 요소로 return

      함수가 찾은 요소들→ 배열로 return

profile
°˖✧ Dreams come true ✧˖°

0개의 댓글