728x90
반응형
#3
목차
- element를 가지고오는 방법들
- 이벤트
- 2번을 좀 다른 방법으로 한다면...
- 컬러와같은 스타일은 css에서 적용하도록 해보자.
- classList 사용해보기
1. element를 가지고오는 방법들...
<body>
<div class="hello">
<h1> ha 1 </h1>
</div>
<div class="hello">
<h1> ha 2 </h1>
</div>
<div class="hello">
<h1> ha 3 </h1>
</div>
</body>- document.getElementsByClassName("클래스 명") : 여러개의 같은 element이름을 가진 애들을 한꺼번에 불러올때.
-> document.getElementsByClassName("hello") // result : [h1.hello, h1.hello, h1.hello] - document.querySelector(".hello h1") : class명이 hello인것중 하위의 h1에대해 가져오기 단,여러개인경우 처번째것만 가져온다.
->const title = document.querySelector(".hello h1"); // title = 'ha 1' - document.querySelectorAll(".hello h1") : class명이 hello인것중 하위의 h1에대해 가져오기 단,여러개인경우 모두가져온다.
- #은 id를 뜻한다. .(온점)은 class를 뜻함.
2. event
- event : 클릭, 마우스오버, 와이파이연결이 끊겼을때... 등
- 앞에 on으로 시작하는것들은 사용가능한 이벤트다.
---js---
const title = document.querySelector("div.hello:first-child h1");
////////1.
function handletitleClick() {
consle.log("title was clicked!")
}
title.addEventListener("click", handleTitleClick)
// 해당 title을 "클릭"할경우 handleTitleClick라는 함수가 실행된다.
////////2.
function colorClick() {
title.style.color="blue";
}
title.addEventListener("click", colorClick)
//해당 title을 클릭할 경우 colorClick라는 함수가 실행된다.
title.addEventListener("mouseenter", handleMouseEnter);
//해당 title에 마우스를 갖다대면 handleMouseEnter함수가 실행됨
titel.addEventListener("mouseleave", handleMouseLeave);
//해당 title에 갖다대져있는 마우스를 떼면 handleMouseLeave함수가 실행됨3. 2번을 좀 다른 방법으로 한다면...
title.addEventListener("click", colorClick)
title.addEventListener("mouseenter", handleMouseEnter);
titel.addEventListener("mouseleave", handleMouseLeave);
와 같은 결과를 내는 코드는 아래와 같다.
title.onclick= colorClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;
//즉 대상.사용할이벤트메소드명 = 함수;
//하지만 addEventListener를 자주사용하는 이유는
// removeEventListener를 통해서 eventListener를 제거할수 있기때문이다.
4. 컬러와같은 스타일은 css에서 적용하도록 해보자.
- html파일은 css문서와 javaScript문서를 import하고있다.
- 2-7 : 변수명을 이용하여 String오류를 줄여보자.
5. classList 사용해보기
- contains : HTML element의 class에 포함되었는지 확인해줌
- add : 요소를더하는 함수
- remove : 요소를 제거하는 함수
- toggle : 아래와같은 조건(if-else를 한방에 해결해주는 코드!)
//기존코드
function handleTitleClick() {
const clickedClass = " clicked";
if (h1.className === clickedclass) {
h1.className = "";
} else {
h1.className = clickedClass;
}
}
//calssList사용
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass) { //h1에 clickedClass가있다면
h1.classList.remove(clickedClass); //clickedClass를 삭제합니다.
} else { //아니라면
h1.classList.add(clickedClass); //clickedClass를 추가합니다.
}
}
//toggle함수사용
function handleTitleClick() {
h1.classList.toggle("clicked"); //위의 if-else를 한방에..
}
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement
HTMLElement - Web API | MDN
HTMLElement 인터페이스는 모든 종류의 HTML 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현합니다.
developer.mozilla.org
728x90
반응형
'개발공부 > JavaScript' 카테고리의 다른 글
| [바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) (0) | 2022.03.26 |
|---|---|
| [바닐라 js로 크롬 앱만들기] 인강정리 (#4) (0) | 2022.03.21 |
| [바닐라 js로 크롬 앱만들기] 인강정리 (#1~#2 까지) (0) | 2022.03.17 |
| [표현정규식] 아이디, 이름, 비밀번호,이메일, 휴대폰번호 유효성검사 (0) | 2021.10.12 |
| [자바스크립트] 모달창 띄우는 간단한 방법. (0) | 2021.02.25 |
댓글