Dev-dotoli TIL

inf 6 dom



DOM

demo3.html



  • DOM 소개, DOM 트리

  • JavaScript variable / function

  • JavaScript HTML element 제어



DOM ?

DOM(Doucumnet Object Model)은

HTML, XML문서를 다루는 programming interface

  • 문서의 구조화된 표현을 제공,
    programming언어가 DOM구조에 접근할 수 있는 방법을 제공
    구조 스타일 내용 등을 변경할 수 있도록 도움

  • “노드(tag)” / “property(속성)” / “기능(JS function method)”
    을 가진 object로 문서를 표현함
    이들은 WEBpage를 script또는 proragmming언어들에서 사용할 수 있게 연결시킴

  • WEBpage는 수정가능한 문서
    이 문서는 WEB browser를 통해 그 내용을 해석해
    WEB browser화면에 나타내거나 HTML source자체로 나타나기도 함

  • WEBpage 문서를 표현하고, 저장하고, 조작하는 방법을 제공
    우리는 JS같은 scripting language로 DOM을 수정하기도 함


DOM tree

  • 위에서 아래로 노드가 쌓임

                document
            /       \
        head       body
                   /   \
                 div   div
                 /
                p
               /
          Hello world!


Javascript

  • WEBpage를 위한 programming언어

  • DOM기능을 사용해서 HTML을
    우리 주변의 WEBservice가 application으로 이용할 수 있게 도움

Variable

  • programming에서 variable / scalar는 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적 이름

  • 말 그대로 ‘변하는 수’, 정보를 담는 ‘상자’로 비유함 이름이 적힌 상자를찾으면 그 내용물을 볼 수 있음

  • 수학에서 x, y, z등의 변수를 다루는 것 과 거의 동일 함

  • var let const등으로 선언하는 것을 권장

    x = 10;
console.log(x);
//: 10

x = 20; //재할당
y = 10;
console.log(x + y);
//: 30

let x = 20;


Function

  • 특정 작업을 수행하기 위한 코드의 집합으로 코드를 재사용하기 위해 쓰는 기능

  • 수학에서 f(a,b)=a+b 같이 argument를 활용하는 것처럼 JS의 function에도 argument를 집어 넣을 수 있음

    function 이름() {
    실행할 code;
}

이름();
//function 호출

function 더하기(a,b){
    return a+b;
}
더하기(10,10);
//: 20


JavsScript와 DOM

  • JavaScript + DOM = DOM API (WEB / XMLpage)
    page contents는 DOM에 저장되고 JS를 통해 접근하거나 조작할 수 있음

  • 초기에는 JS와 DOM이 밀접하게 연관되어 있었지만
    점점 분리되어 발전함


JS와 DOM의 조합

모든 div element에 대한 list를 return하는 method
.getElementByID(tag name)로 JS와 DOM에 대해 알아보기

  • document
    WEBpage의 document object

  • document.querySelector
    해당 selector를 가진 element

  • property nodeName
    element의 node이름(tag이름)을 반황하는 속성

var element = document.querySelector("head");
condole.log(element.nodeName);
//: head

script를 사용할 때 inline-script를 사용하거나

WEBpage안에있는 script loading명령을 사용

또는 문서자체를 조작하거나 문서의 children을 얻기위해

document 또는 window element를 위한 API를 즉시 사용할 수 있음

  • 문서가 load될때 DOM을 사용할 수 있게되면 실행하는 함수지정
    새로운 h1 element를 생성하고
    해당 element에 text를 추가하며
    h1을 이 문서의 tree에 추가하는 함수

    window.onload = function () {
  var heading = document.createElement("h1");
  heading.innerText = "hello, World";
  document.body.appendChild(heading);
};

//: Hello, world

    • document.querySelector
      selector의 정보를 통해 element를 집어내는 JS function

    • document.createElement
      JS로 HTML element를 만드는 function

    • document.body.appendChild
      body라는 markup element 내부에 새로운 element를 넣는 function



복습하다보니

학생들이 프로젝트로 만든 수업이라

정리가 잘 안되어있고 본인의 정리능력도 비루해서

더욱 내용이 중구난방인 것 같은 느낌

나중에 따로 정리를 해볼 것