직접 작성한 HTML을 띄운 다음 console창에 document를 입력하면, 작성한 HTML을 가져올 수 있다
document는 브라우저에 존재하는 object인데, console.dir(document)를 호출해 보면, document.title이 HTML에서 정의한 title이랑 같은 것을 볼 수 있다.
이렇게 JS는 HTML에 접근하고 읽을 수 있게 설정되어 있어서 JS에서 HTML document 객체로부터 title을 가져올 수 있다.
물론 JS를 통해 html도 바꿀 수도 있다. document.title = "TEST"; 로 설정하면 title이 "TEST"로 바뀌게 된다.
document의 함수들
getElementById(): 말 그대로id를 통해 element를 찾아준다. 보통 하나의 값을 반환해줄때 쓴다
getElementsByClassName(): 클래스 이름을 가져오고, array에 할당
getElementsByTagName(): name을 할당 가능하고 array에 할당
querySelector: element를CSS selector방식으로 검색할 수 있음
단 하나의 element를 return해줌
querySelectorAll: querySelector에서 조건에 만족하는 element를 모두return하기, array를 가져다 준다.const tquery = document.querySelector(".hello h1"); // hello클래스 안에있는 h1을 가져오라는 뜻 CSS형식 만약 여러개라면 첫번째껄 return const tquery2 = document.querySelectorAll(".hello h1"); // 중복인 hello클래스들 모두 가져오기 const tquery3 = document.querySelectorAll(".hello h1:first-child"); // 이렇게 h1의 첫번째 자식이라고 지정도 가능 const tquery4 = document.querySelectorAll("#hello"); // class명이아닌 id로 찾을때는 #명시 class명 일때는 .명시
querySelector 예시
const h1_id = document.querySelector("div.hello h1:first-child"); // div의 첫번째 클래스 이름이 hello이고 그의 자식중 첫번째 h1가져오기HTML파일
<body> <div class="hello"> <h1 class="sexy-font">여기가 선택됨</h1> <h1></h1> </div> <div class="hello"> <h1></h1> </div> <script src="./app.js"></script> </body>
이벤트
eventListener: event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 한다.
h1_id.addEventListener("click"): 누군가가h1_id를 click하는 것을 listen할 거임 → 무언가를 해줘야함function onTestClick() { h1_id.style.color = "blue"; h1_id.innerText = "BLUE" } h1_id.addEventListener("click",onColorClick);click하면 function이 동작하길 원한다.
onTestClick함수는 단순히 h1_id의 style.color를 blue로 바꿔주고 Text도"BLUE"로 바꿔준다.
여기서 중요한 점은 onClick 함수에 () 를 넣지 않은 것이다.
h1_id.addEventListener("click",onClick);대신h1_id.addEventListener("click",onClick());을 넣게되면 클릭 여부와 관계없이 브라우저가 맘대로 실행해 버린다."click"이벤트 일때만 실행이 되어야 하기 때문에 ()를 쓰지않고 js가 직접 실행시키게 만들어 준다.
이 외에도h1_id.addEventListener("mouseenter", handleMouseEnter); // 마우스 커서가 닿았을 때 h1_id.addEventListener("mouseleave", handleMouseLeave); // 마우스 커서가 나갔을 때 window.addEventListener("resize", handleWindowResize); // 창크기가 바뀔 때 이벤트 window.addEventListener("copy", handleWindowCopy); // ctrl + c 했을 때 이벤트등등 많은 이벤트들이 있다.
JS에서 style 수정하는 onClick함수 정의하기
CSS 파일
.active { color: tomato; } .sexy-font{ font-family: 'Courier New', Courier, monospace; }JS 파일
- className 이용해서 바꾸기
function onClick_1() { // CSS 파일과 상호작용 const cssName = "active"; if (h1_id.className === cssName) { h1_id.className = ""; } else{ h1_id.className = cssName; } }
h1_id.className으로 그냥 class를 바꿔버리면 html에서 만약 h1_id에 class 이름 sexyfont를 정의해 버린것이 사라지게 된다. 그 class모두 포함해서 교체가 되는 것이다. 즉 폰트가 사라지게 되는 것이다.
- classList 이용해서 바꾸기
function onClick_2() { const cssName = "active"; if (h1.classList.contains(cssName)) { h1.classList.remove(cssName); } else{ h1.classList.add(cssName); } }
classList: 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.
className은 이전class를 상관하지않고 모든걸 교체해 버리지만,
classList를 사용하면 h1_id에 sexy-font를 적용한 것이 사라지지 않음!!
- classList의 toggle 이용해서 바꾸기
function onClick() { const cssName = "active"; h1.classList.toggle(cssName) }cssName이 있는지 파악해서 있으면 제거하고 존재하지 않는다면 추가해준다.
이렇게 간단히 두줄로 표현 가능하다
