[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener

Dom query Selector

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Process - 1</h1>

<h2>Process - 1</h2>

</body>

</html>

// DOM : Document Object Model == html 태그들 말함

// document : 웹브라우저 html 문서

// querySelector("태그") : DOM(html태그) 접근하는(선택하는) 함수

// vs css 선택자와 비슷

// 사용법 : document.querySelector("태그") : html 태그 선택

// 태그 : 속성(style:css속성) , 상세속성(backgroundColor)

// 예) document.querySelector("태그").style.backgroundColor = "값";

document.querySelector("h1").style.backgroundColor = "red";

document.querySelector("h2").style.backgroundColor = "yellow";

결과

Dom inner html

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// document.querySelector("css선택자") : js 선택 함수

// css선택자 : 기본선택자(전체(*), id, class 등)

// id 선택자로(#output) html 태그 선택

// 선택함수(querySelector() return 값 : html 태그 나옴)

// #output : div 태그 => output 변수 저장됨

let output = document.querySelector("#output");

// innerHTML : css 선택자를 이용해서 그 위치에 글자를 넣는 속성

output.innerHTML = "hello world!!!";

output.style.fontSize = "50px";

output.style.textAlign = "center";

결과

Dom detail

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div style="background-color: aqua;">안녕하세요 </div>

</body>

</html>

// DOM : Document Object Model, html 문서(태그 등이 있음)

// html 웹 문서 동작

// 1) 컴퓨터 웹브라우저에 html 문서를 읽어들임(파싱: 문법 해석)

// 2) 파싱된 문서(DOM) -> 메모리에 저장(DOM 저장됨)

// 파싱된 문서(DOM) : 트리구조(자료구조)

// 예) html 현재 문서(03_dom.detail.html)

// window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등)

// |

// document(객체, html 문서)

// |

// html(태그, 부모)

// |

// -------------------------------------

// | |

// head(태그, 자식) body(태그)

// |

// ----------------------------------------

// | |

// div(태그) - style="backgroundColor='aqua'"(속성) script - src="./js/03_dom_detail.js"

// |

// "안녕하세요"(텍스트)

// TODO: html 문서(DOM) 특징(노드) : 태그(tag), 속성(attribute), 텍스트(text), 주석(comment)

// TODO: 태그, 속성, 텍스트, 주석 별로 구분해서 트리구조로 메모리에 저장됨

// TODO: 위의 그림이 DOM을 시각화한것임

// TODO: DOM 접근(선택)함수 : querySelector(css선택자)

결과

Dom querySelectorAll

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>javascipt</li>

<li>Springboot</li>

</ul>

</body>

</html>

// DOM 접근(선택)함수 : quertSelectorAll(css선택자)

// html 문서에서(DOM) 여러 개를 선택하는 함수

// 사용법 : let 변수명 = document.querySelectorAll(css선택자);

let elements = document.querySelectorAll("ul li"); // 여러개 li(배열)

// li 태그 여러개 : 반복문

for(let i = 0; i<elements.length; i++){

console.log(elements); // elements 요소 검사

// 결과 출력 : id="output" 위치에 출력

// 문자열 붙이기 : result = result + "*" => result += "*"

document.querySelector("#output")

.innerHTML += elements[i].innerHTML;

// 줄바꿈 : 문자열 붙이기

// innerHTML(==문자열) : <여는태그>문자열</닫는태그>

document.querySelector("#output").innerHTML += "<br/>"

}

결과

exam Dom querySelector

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Header</h1>

</body>

</html>

// 연습문제 1)

// h1 태그 1개만 선택해서 아래와 같이 변경하세요

// style.color = "orange"

// style.background = "red"

// innerHTML = "From JavaScript"

// 힌트 : querySelector()

// window(생략) - document - html ...(dom 트리)

let header = document.querySelector("h1"); // h1 태그 선택

// 디자인 조작 : h1 태그 , 속성(style)

header.style.color = "orange";

header.style.background = "red";

// 문자열 조작 : h1 태그 사이의 문자열 변경(innerHTML(Header))

header.innerHTML = "From JavaScript";

// 2) h1 태그 모두 선택해서 아래와 같이 조작하세요

// style.color = "orange"

// style.background = "red"

// innerHTML = "From JavaScript"

// 힌트) querySelectorAll(css선택자) => 배열

// css (있는 html 태그에만 디자인 적용)

// js (없는 것을 다른 것으로 조작할때 주로 사용)

let headers = document.querySelectorAll("h1"); // h1 여러개 선택

// 반복문 실행 : headers(배열) h1 태그 3개 있음

// headers[0] = h1 태그, headers[1] = h1 태그,headers[2] = h1 태그

for(let i=0; i< headers.length; i++) {

// 디자인 적용

headers[i].style.color = "orange";

headers[i].style.background = "red";

// 문자열 변경 : Header -> From JavaScript

headers[i].innerHTML = "From JavaScript";

}

결과

예제1

예제2

Dom display

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>문서를 열면 팝업 창이 표시됩니다.</p>

<ul>

</ul>

</div>

</body>

</html>

// 버튼을 클릭하면 팝업창이 안 보이게 하기

// 1) .popup > button 태그 선택해서 클릭(이벤트)

// 2) .popup 태그를 안보이게 함

// 클릭 이벤트 : 90% 사용(.addEventListener() 함수 이용)

// 1) .popup > button 태그 선택해서 클릭(이벤트)

// 사용법 : document.querySelector("css 선택자")

let closeBtn = document.querySelector(".popup > button");

// 클릭 이벤트 작성

// 사용법 : 변수명.addEventListener("click", function(){})

// 변수명(버튼) 클릭하면 function(){} 실행됨

// 참고) 다른 언어와 달리(자바) 함수의 매개변수로 함수가 들어올 수 있음

closeBtn.addEventListener("click", function(){

// 클릭시 실행되는 부분

// 2) .popup 태그를 안보이게 함

document.querySelector(".popup").style.display = "none";

})

결과

버튼 클릭 후

Dom onclick

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>

<a href="#" onclick="changeBg('green')">Green</a>

<br/>

<a href="#" onclick="changeBg('orange')">Orange</a>

<br/>

<a href="#" onclick="changeBg('purple')">Purple</a>

<br/>

</li>

</ul>

</body>

</html>

// 예제) 3가지 글자 링크를 클릭하면 그 색깔로 배경색을 바꾸기

// 클릭 이벤트 함수

// 함수 사용 : changeBg('green')

function changeBg(color) {

// id=result 위치에 배경색을 바꿈

let result = document.querySelector("#result");

// 배경색 바꾸기

result.style.backgroundColor = color; // color='green'

}

결과

그린 클릭 시

오렌지 클릭 시

퍼플 클릭 시

Dom onclick elementbyid

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<img src="./img/coffee.png" alt="컵" id="cup"

onclick="myImgClick(event)">

</div>

// 권장하는 방식은 아님

// 함수의 정의

function myImgClick(event) {

// window 객체(최상위 객체)

// document(html 문서)

// event 객체 : event.target(클릭한 태그가 선택==img)

// TODO: event.target == 현재 클릭한 태그

alert("클릭한 이미지 파일명 : " + event.target.src);

}

// 참고) 다른 선택 함수 : getElementById(id이름)

// let img = document.querySelector("#cup"); // img 태그 선택

// querySelector() 함수 == getElementById(id이름);

let img = document.getElementById("cup");

</script>

</body>

</html>

결과

event mouseover

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

color: white;

background-color: skyblue;

padding: 10px;

width: 200px;

text-align: center;

}

</style>

</head>

<body>

마우스를 올려보세요

</div>

</body>

</html>

// js 함수 정의

// 클릭 함수

function changeText(event) {

// event.target == 현재 클릭한 태그(h2)

// 클릭하면 문자열 변경 : 클릭해 보세요! -> 클릭하셨네요!

event.target.innerHTML = "클릭하셨네요!";

}

// 마우스 위로 함수 : 배경색을 변경(오렌지)

function mouseOver(event) {

// event.target == 현재 마우스위로 올라간 태그(div)

event.target.style.backgroundColor = "orange";

}

// 마우스 나갔을때 함수 : 배경색을 변경(하늘색)

function mouseOut(event) {

// event.target == 현재 마우스위로 올라간 태그(div)

event.target.style.backgroundColor = "skyblue";

}

결과

클릭해보세요 버튼 클릭 전

클릭 후

exam dom

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button onclick="innerhtml()">innerHTML로표시</button>

</body>

</html>

function innerhtml(){

let now = new Date();

document.querySelector("#output").innerHTML = Date()

}

결과

(innerHTML로표시 버튼 클릭 시)

exam dom2

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!-- 연습문제 2) 아래 버튼을 클릭하면 p 태그의

글자색을 빨간색으로 바꾸기 -->

<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt.

Laboris adipisicing est sint aliquip nulla pariatur velit

irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem

reprehenderit velit. Duis veniam irure cillum anim excepteur culpa

pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit

incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad

minim occaecat qui pariatur adipisicing laborum quis.</p>

</body>

</html>

function changeColor(){

document.querySelector("p").style.color="red"

}

결과

(글자색 바꾸기 버튼 클릭 시)

exam dom3

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

- 국어 : <span id="kor"></span>점<br>

- 영어 : <span id="eng"></span>점<br>

- 수학 : <span id="math"></span>점<br><br>

■ 합계 : <span id="sum"></span>점<br>

■ 평균 : <span id="avg"></span>점

</div>

</body>

</html>

// 힌트 :

// 합계 : 국어(kor) + 영어(eng) + 수학(math) = sumVal

// 평균 : sumVal / 3 = avgVal

// innerHTML 속성 이용

// id="kor" 위치에 국어(kor) 출력

// id="eng" 위치에 영어(eng) 출력

// id="math" 위치에 수학(math) 출력

// id="sum" 위치에 합계(sumVal) 출력

// id="avg" 위치에 평균(avgVal) 출력

function sum_avg(kor, eng, math) {

let sumVal = kor + eng + math; // 합계 (80 + 90 + 100)

let avgVal = sumVal / 3; // 평균

// id="kor" 위치에 국어(kor) 출력

document.querySelector("#kor").innerHTML = kor; // 국어 점수

document.querySelector("#eng").innerHTML = eng; // 영어 점수

document.querySelector("#math").innerHTML = math; // 수학 점수

document.querySelector("#sum").innerHTML = sumVal; // 합계

document.querySelector("#avg").innerHTML = avgVal; // 평균

}

결과

버튼 클릭시

exam dom4

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.

길가나 잔디밭에서 흔히 볼 수 있다.

아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나,

뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>

</div>

</body>

</html>

// 힌트 : style.display = "none" (사라짐)

// style.display = "block" (나타남)

// 상세목록 글을 보이게 만드는 함수

function showDetail() {

// 1) style.display = "block" (나타남), #desc 태그(div) 나타남

document.querySelector("#desc").style.display = "block";

// 2) #open 버튼 사라짐

document.querySelector("#open").style.display = "none";

}

// 상세목록 글을 안보이게 만드는 함수

function hideDetail() {

// 1) style.display = "none" (사라짐), #desc 태그(div) 사라짐

document.querySelector("#desc").style.display = "none";

// 2) #open 버튼 나타남

document.querySelector("#open").style.display = "block";

}

결과

(기본 결과와 상세설명 닫기 눌렀을 때)

버튼 클릭 시

exam dom5

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 문제 풀이

// 1) 입력 받기 : "y"

let charVal = prompt("글자");

if(charVal === "y") {

// 글쓰기 버튼 추가

document.querySelector("#app").innerHTML = "<button>글쓰기</button>";

} else {

// 글수정 버튼 추가

document.querySelector("#app").innerHTML = "<button>글수정</button>";

}

결과

y 입력 시

y가 아닌 다른 값 입력시

exam dom6

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>

<a href="#" onclick="myGreen()">Green</a><br/>

<a href="#" onclick="myOrange();">Orange</a><br/>

<a href="#" onclick="myPurple();">Purple</a><br/>

</li>

</ul>

</body>

</html>

// 문제 풀이

function myGreen() {

// 대화상자 : Green

alert("Green");

}

function myOrange() {

// 대화상자 : Orange

alert("Orange");

}

function myPurple() {

// 대화상자 : Purple

alert("Purple");

}

결과

green 클릭 시

dom image

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 이미지 조작

// 태그 선택

// 사용법 : document.querySelector("css선택자")

let image = document.querySelector("#Image"); // img 태그

// img 태그 속성(property) 조작 : src, width, height

// height="200" />

image.src = "http://placehold.it/300x200"; // 빈이미지

image.width = "300";

image.height = "200";

결과

dom mouseover2

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#container {

width: 400px;

margin: 50px auto;

text-align: center;

}

#rect {

width: 100px;

height: 100px;

border: 1px solid #222;

margin: 30px auto;

transition: 1s;

}

</style>

</head>

<body>

<p>도형 위로 마우스 포인터를 올려놓으세요.</p>

</div>

</body>

</html>

// 도형 조작

// 선택 함수 : #rect

let myRect = document.querySelector("#rect"); // div 태그

// 마우스 위로 이벤트 함수 : onmouseover="함수명()"

// 태그.addEventListener("mouseover", function(){})

myRect.addEventListener("mouseover", function(){

// 마우스가 위로 올라가면 함수 실행

// 배경색(backgroundColor) : 녹색, 둥근사각형(borderRadius) : 50%

myRect.style.backgroundColor="green";

myRect.style.borderRadius="50%";

})

// 마우스가 밖으로 나가면 함수 : onmouseout="함수명()"

myRect.addEventListener("mouseout", function(){

// 마우스가 밖으로 나가면 함수 실행

// 원복 : 배경색: "", 둥근사각형: ""

myRect.style.backgroundColor="";

myRect.style.borderRadius="";

})

결과

(기본 결과와 도형 밖에 마우스 포인터가 있을 때)

(도형 안에 마우스 포인터를 올렸을 때)

dom addEventListener

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#container {

width: 300px;

margin: 10px auto;

}

</style>

</head>

<body>

<!-- 연습문제 : 아래 girl 이미지를 마우스가 위로 올라가면

boy 이미지로 바꾸기 코딩 -->

</div>

</body>

</html>

// 문제 풀이

// 선택 함수

let cover = document.querySelector("#cover"); // img 태그

// 마우스가 위로 올라가면 함수

cover.addEventListener("mouseover", function(){

// girl(./img/easys-1.jpg) -> boy(./img/easys-2.jpg)

// img 태그의 src 속성 조작

cover.src = "./img/boy.jpg"; // 이미지 바꾸기

})

// 마우스가 나가면 함수

cover.addEventListener("mouseout", function(){

// boy -> girl 이미지

cover.src = "./img/girl.jpg"; // 이미지 바꾸기

})

결과

마우스 커서가 그림 위에 있을 때

dom setInterval

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 시계 예제 : 계속 시간이 흘러가는 예제

// 선택 함수 : #clock (h1)

let clock = document.querySelector("#clock"); // h1 태그

// 사용법 : setInterval(함수(), 밀리초)

// 계속 몇초마다 코드를 반복 실행하는 함수

setInterval(function() {

// 반복할 코딩 : 시간

let now = new Date();

clock.innerHTML = now; // 시간을 h1 태그에 출력

}, 1000); // 1초마다 함수() 반복 실행

결과(1초마다 바뀜)

dom exam_dom7

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#container {

width: 300px;

margin: 10px auto;

}

</style>

</head>

<body>

<img src="./img/cup-1.png"

alt="컵"

id="cup"

onclick="changePic()"

</div>

</body>

</html>

// 문제 풀이

// 선택 함수

// img 선택

// // 방법 1

// let change = document.querySelector("#cup")

// change.addEventListener("click",function(){

// change.src = "./img/cup-2.png"

// })

// // 방법 2

let cup = document.querySelector("#cup"); // img 태그

// 클릭 이벤트 함수

// js 선택함수 이용해서 태그에 접근가능 : img 태그

// 태그의 모든 속성을 사용할 수 있음 : src, width, height, id, class 등

function changePic() {

// 이미지 바꾸기 코딩 : "./img/cup-1.png" -> "./img/cup-2.png"(파란컵)

cup.src = "./img/cup-2.png"; // 파란컵

}

결과

그림 클릭 후

dom exam_dom8

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 함수 정의

// 불켜기 함수

function lightOn() {

// img 태그의 src = "./img/light_on.png"

document.querySelector("img").src = "./img/light_on.png";

}

// 불끄기 함수

function lightOff() {

// img 태그의 src = "./img/light_off.png"

document.querySelector("img").src = "./img/light_off.png";

}

결과

기본상태와 끈 상태

켠 상태

dom exam_dom9

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

- 책값 : <span id="price"> 원</span>

- 할인율 : <span id="discount"> %</span>

- 배송료 : <span id="shipping"> 원</span>

- 지불금액 : <span id="pay"> 원</span>

</div>

<!-- 공식 : pay(지불금액)

= price(책값) - (price(책값) * (discount(할인율)/100)) + shipping(배송료) -->

</body>

</html>

// 연습문제 풀이

// 함수 정의

// get_pay(25000, 10, 5000) : 함수 사용

function get_pay(price, discount, shipping) {

// pay(지불금액) = price(책값) - (price(책값) * (discount(할인율)/100)) + shipping(배송료)

let pay = price - (price * (discount/100)) + shipping; // 지불금액

// 각각 웹 화면에 출력하기

// 선택함수 이용

document.querySelector("#price").innerHTML = price + "원"; // 25000

document.querySelector("#discount").innerHTML = discount + "%"; // 10

document.querySelector("#shipping").innerHTML = shipping + "원"; // 5000

document.querySelector("#pay").innerHTML = pay + "원"; //

}

결과

클릭 시

저작자표시

'HTML > JavaScript' 카테고리의 다른 글

[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동 (0)	2023.08.26
[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date (0)	2023.08.23
[JavaScript] 함수, 객체 (0)	2023.08.21
[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document) (0)	2023.08.18
[JavaScript] for문, 반복문 예제 (0)	2023.08.17

Dom query Selector

Dom inner html

Dom detail

Dom querySelectorAll

exam Dom querySelector

Dom display

Dom onclick

Dom onclick elementbyid

event mouseover

exam dom

exam dom2

exam dom3

exam dom4

exam dom5

exam dom6

dom image

dom mouseover2

dom addEventListener

dom setInterval

dom exam_dom7

dom exam_dom8

dom exam_dom9

'HTML > JavaScript' 카테고리의 다른 글

티스토리툴바