ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 13 DOM and Layout Trees
    Computer Science/JavaScript 2019.05.06 03:44

     

    자바스크립트 핵심 컨셉 33가지

     

    Chapter 13 DOM and Layout Trees

     

    이번 장에서는 DOM에 대해 살펴보자

     

    DOM(Document Object Model)은 브라우저에서

     

    HTML 및 XML 문서를 읽는 방법을 나타내는 인터페이스다.

     

    DOM은 자바스크립트가 Web을 조작, 구조화, 스타일화 하게 한다.

     

    또한 브라우저가 HTML 문서를 읽은 후에 DOM Tree라는 모델을 생성한다.

     

    DOM Tree는 객체의 트리로 구조화되어 있다.

     

    출처: https://medium.freecodecamp.org/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d

     

    Document: 모든 HTML 문서를 취급한다.

     

    Elements: HTML, XML 내부의 모든 태그는 DOM 요소(element)로 바뀐다.

     

    Text: 모든 태그(tag)의 내용

     

    Attributes: 특정 HTML 요소(element)의 모든 속성

     

    DOM에는 메서드(methods)들이 많은데

     

    이 메서드들은 nodes(elements), events들을 연결해준다.

     

     

    우선 주요 메서드들을 살펴보자.

     

    getElementById()

     

    전달된 Id가 들어있는 element를 반환한다.

     

    const Start = document.getElementById('start');

     

    getElementsByClassName()

     

    전달된 특정 class를 포함하는 모든 요소(elements)의

     

    HTMLCollection을 반환한다.

     

    const Container = document.getElementsByClassName('container');

     

    getElementsByTagName()

     

    전달된 태그의 모든 요소(elements)를 반환한다.

     

    const buttons = document.getElementsByTagName('button');

     

    querySelector()

     

    특정 CSS selector가 전달된 첫 번째 요소(elements)를 반환한다.

     

    const resets = document.querySelector('#reset')

     

    querySelectorAll()

     

    특정 CSS selector가 전달 된 모든 요소(elements)를 반환한다.

     

    const myButtons = document.querySelectorAll('#buttons');

     

    createElement()

     

    HTML 페이지에 새로운 요소(element)를 생성한다.

     

    setAttribute()

     

    HTML 요소(elements)에 대한 새 속성을 설정할 수 있다.

     

     

    이번에는 주요 이벤트(Events)를 살펴보자

     

    click

     

    사용자가 특정 요소(elements)를 클릭했을 때 어떤 행동이 실현된다.

     

    start.addEventListener('click', function(event) {} );

     

    select

     

    특정 요소(elements)가 선택 될 때 무언가를 전달하려는 경우를 위한 것이다.

     

    start.addEventListener('select', function(event) {} );

     

     

    이제 DOM을 탐색하고 속성(property)을 사용하는 방법을 살펴보자.

     

    .childNodes

     

    주어진 요소(elements)의 child nodes의 nodeList를 반환한다.

     

    const container = document.querySelector('.container');
    
    const getContainerChilds = container.childNodes;

     

    .firstChild

     

    주어진 요소(element) 첫 번째 child를 반환한다.

     

    const container = document.querySelector('.container');
    const getFirstChild = container.firstChild;

     

    .nodeName

     

    주어진 요소(element)의 name을 반환한다.

     

    .nodeValue

     

    현재 노드의 값을 반환하거나 설정하므로 텍스트 , 주석에만 적용된다.

     

    .nodeType

     

    주어진 요소(element)의 type을 반환한다.

     

     

    오직 요소(elements)만 반환하는 속성들을 살펴보자

     

    .parentNode

     

    주어진 노드의 부모(parent)를 반환한다.

     

    .firstElementChild

     

    주어진 요소(element)의 첫 번째 자식 요소(first child element)를 반환한다.

     

    .lastElementChild

     

    주어진 요소(element)의 마지막 자식 요소(last child element)를 반환한다.

    댓글 0