TIL-211110

금일 학습 평가

• DOM을 학습한지 조금 되어서, 기억이 잘 안나는 부분들이 많았다.
• 유어클래스를 섹션1 부분부터 다시 찾아보고, 구글링을 통해서 필요한 부분을 학습하였다.
• JSON의 기본 개념을 다시 한번 리마인드 하였다, 차후 세세한 내용을 배울 때에 살을 붙여야겠다.

JSON

• JavaScript Object Notation, 데이터 교환을 위해 만들어진 객체 형태의 포맷
• 네트워크 통신은, 같은 프로그램을 사용한다면 상관없지만
• 서로 다른 프로그램을 사용한다면, 서로가 이해할 수 있는 형태로 통신해야 할 것임
• 범용적으로 읽을 수 있는 문자열 형태로 변환하여 전송, 수신하기 위함
• JSON.stringify : Object type을 JSON으로 변환, 직렬화(serialize)
• JSON.parse : JSON을 Object type으로 변환, 역직렬화(deserialize)

구분	자바스크립트 객체	JSON
key	키는 따옴표 없이 쓸 수 있음	반드시 큰따옴표를 붙여야 함
문자열 값	문자열 값은 어떠한 형태의 따옴표도 사용 가능	반드시 큰따옴표로 감싸야 함
공백		키와 값, 키-값 페어 사이에 공백 X

DOM, 재귀함수

• JS를 통한 DOM의 활용으로, 반복해서 작성해야 할 엘리먼트들을, 반복문을 통해 편하게 작성 가능함
• Document.getElementById()
  • 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
  • ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용
  • 일치하는 요소가 없으면 null을 반환
• Document.querySelector()
  • 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환
  • 일치하는 요소가 없으면 null을 반환
• Element.getElementsByClassName()
  • 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환
• document.createElement()
  • 지정한 tagName의 HTML 요소를 만들어 반환
    Element 객체
• document.append()
  • 한 노드를 특정 부모 노드의 자식 노드로 붙인다
• Node.appendChild()
  • 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다
  • 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면, 노드를 현재 위치에서 새로운 위치로 이동시킨다
• Element.setAttribute()
  • 지정된 요소의 속성 값을 설정합니다.
    • 속성이 이미 존재하면 값이 업데이트됩니다.
    • 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됩니다.
  • 속성의 현재 값을 얻으려면 getAttribute() . 속성을 제거하려면 removeAttribute()