JSON

JSON

• {key : value} 형태로 이루어진 자료 표기법
• JavaScript의 Object와 유사한 형태를 가지고 있지만
  • Object는 타입(Type)
  • JSON은 형식이 있는 문자열(String)
• JSON을 Object로 사용하기 위해서는 변환 작업이 필요

변환

• Object -> JSON 으로 변환

  • JSON.stringify(object)
  • object를 JSON으로 변환

• JSON -> Object 으로 변환

  • JSON.parse(object)
  • JSON을 object로 변환

  

DOM이란?

• 문서 객체 모델(Document Object Model)
• XML, HTML 문서의 각 항목을 계층으로 표현하여 생성,변형,삭제할 수 있도록 돕는 인터페이스
• DOM은 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현
• HTML 문서의 요소를 제어하기 위해 지원
• 상단의 document 노드를 통해 접근

DOM의 주요 객체

• window
  • DOM을 표현하는 창
  • 가장 최상위 객체
  • window 키워드 생략 가능
• document
  • document는 window의 속성
  • 브라우저에 렌더링된 웹 페이지
  • 우리가 보고 있는 웹페이지의 최상단
  • document 키워드로 접근

DOM 조작

• Document가 제공하는 기능을 사용해서 웹 문서를 조작

• DOM 조작 순서

  • 1. 접근(Select)
    • getElementById("string") //id의 이름으로 첫번째 요소를 반환

    			let ele = document.getElementById("a")
    //손흥민 div태그가 선택됨
    //존재하지 않는 id값인 경우 null을 반환
    			```
    - querySelector("css selector") //#id, .class, tag, \[property] 활용해서 첫번째 요소를 반환
        ```javaScript
    			let ele = document.querySelector(".b") // div#a.b
    let ele2 = document.querySelector("[name='c']")
    //class 기호와 이름으로 첫번째 요소를 반환
    			```
    - querySelectorAll("css selector") //css selector를 만족시키는 모든 요소를 NodeList로 반환(유사배열이라 for문을 돌릴 수 있음)
            ```javaScript
    			let list = document.querySelectorAll("#a")
    let list = document.querySelectorAll(".b")
    let list = document.querySelectorAll("p")
    let list = document.querySelectorAll("[name='c']")
    //
    			```

  • 2. 조작(Manipulation)

    • 생성
      createElement("tagName") 작성한 tagName의 HTML 요소를 생성해서 반환, 태그의 이름을 만들어서 반환해줄 뿐이지 화면에 보이지는 않는다.
      

    • 추가
      createTextNode("text") 텍스트 노드를 생성, appendChild를 사용해서 노드 요소에 텍스트를 추가
      

    • 수정

    • 삭제