[TIL-41] 노마드코더 크롬앱(JS) 클론코딩 #3.0~#3.2

#3 JS로 브라우저에 HTML과 상호작용하기

• 자바스크립트를 통해 HTML의 요소들을 변경하고 읽을 수 있음.
  • document 객체
    • 콘솔에 "document" 입력하면 html 코드 볼 수 있음. 브라우저에 이미 존재하는 object 중 하나.
      • console.dir(document) : document로 가져올 수 있는 내용 다 보여줌.
      • 그런데 html 코드를 그대로 보여주기만 하는 게 아니라 객체의 형태로 가져옴.
    • document.title 등, html의 내용 확인할 수 있음. html 코드를 javascript 관점에서 보는 것.
    • 그렇다면 html 내용을 호출하는 것과 반대로, html 내용을 변경할 수도 있음.
  • 자바스크립트는 html에 이미 연결되어있음.
• html에서 특정한 뭔가를 가져오기 : document 객체와 함수 이용.
  • document.getElementById("ID명") : 특정 id 가진 요소 가져옴.
    • 요소를 찾고 나면, 가져온 요소의 id, classname, innertext, autofocus 여부 등 아주 많은 정보를 알 수 있음.
    • 그중 어떤 항목을 해당 요소(객체)의 property인 형식으로 지목해서 수정할 수도 있음.
  • document.getElementsByClassName("class명") : 특정 class에 해당하는 요소들 가져옴.
    • 이렇게 찾은 요소는 여러 개일 수 있기 때문에 결과는 배열의 형태.
  • document.getElementsByTagName("h1") : 특정 태그를 모두 가져옴.
    • 마찬가지로 배열.
  • document.querySelector(".class h1") : css selector 방식으로 요소 가져올 수 있음.
    • 조건에 해당하는 요소가 여러 개 있어도 첫번째 하나만 가져옴. 따라서 결과가 배열이 아님.
    • querySelectorAll 이라고 하면 조건에 맞는 모든 요소를 배열로 가져옴.
    • 활용성이 좋기 때문에 쿼리셀렉터를 주로 사용함. 앞의 모든 함수 대체 가능.
• [3.3] 특정 요소 선택해서 들어가보면 여러 property들 있고, 그 값을 자바스크립트 방식으로 변경할 수 있음.
  • 어떤 요소의 style에서 color 등을 바꿀 수도 있음.
  • 예) const title = document.querySelector(".hello h1");
         title.style.color = "blue";
  • [3.4] 하지만 스타일은 기본적으로 css 통해 변경되는 게 맞음.