[DOM] chapter

Visual Studio Code

[DOM] chapter_01

DEVELOPERS_Ivan ㅣ 2023. 8. 21. 16:28

01_dom_querySelector
브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부른다. 자바스크립트 항상 html 태그 보다 밑에 작성해야 한다.

<!DOCTYPE html>

<head>

<title>querySelector 사용방법</title>

</head>

<body>

<h1>Process = 1</h1>

<h2>Process = 2</h2>

</body>

</html>

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

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

// quertSelector() : DOM 접근하는(선택하는) 함수

// vs css 선택자와 비슷

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

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

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

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

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

02_dom_innerHTML
innerHTML : css 선택자를 이용해서 그 위치에 글자를 넣는 속성
output.innerHTML = "hello world!!!";

<!DOCTYPE html>

<head>

</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";

03_dom_detail
html 문서(DOM) 특징(노드) 개념 이해도
요약 : 태그(tag), 속성(attribute), 텍스트(text), 주석(comment) 별로 구분해서 트리구조로 메모리에 저장됨
※ DOM 접근(선택)함수 : querySelector(css선택자)
※ 텍스트(tex) innerHTML 속성을 많이 사용한다.

<!DOCTYPE html>

<head>

</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"

// |

// "안녕하세요"(텍스트, == innerHTML 속성)

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

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

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

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

04_dom_quertSelectorAll
querySelectorAll 로 문자열만 반복하기

<!DOCTYPE html>

<head>

<title>querySelectorAll 로 문자열만 반복하기</title>

</head>

<body>

<ul>

<li>Javascript</li>

<li>Springboot</li>

</ul>

</body>

</html>

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

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

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

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

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

document.querySelector("#text").innerHTML =

"======== innerHTML 문자열만 반복문으로 복사됨, 점은 들고오지 않음 ==========";

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/>";

}

05_exam_dom_quertSelector
querySelector와 ALl(For 문) 조작 예제

<!DOCTYPE html>

<head>

<title>querySelector와 ALl(For 문) 조작 예제</title>

</head>

<body>

<ul>

<h1>Header</h1>

</body>

</html>

// 연습문제 1) // TODO querySelector h1 단일 변경

// 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.backgroundColor = "red";

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

header.innerHTML = "From JavaScript";

// 연습문제 2) // TODO querySelectorALL h1 반복문 전체 변경

// 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";

}

06_dom_display
버튼을 클릭하면 팝업창이 안보이게 하기
.addEventListener() 함수
function
다른 언어와 달리(자바) 함수의 매개변수로 함수가 들어올 수 있음

<!DOCTYPE html>

<head>

</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(){} 실행됨

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

// .popup {

// display:none;

// }

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

// 클릭시 실행될 부분

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

document.querySelector(".popup").style.display = "none"; // 사라짐

});

07_function
onclick 클릭하면 함수(컬러 입히기) 실행

<!DOCTYPE html>

<head>

<title>onclick 클릭하면 함수 실행</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>

a:link,

a:visited {

color: black;

text-decoration: none;

}

ul {

list-style: none;

width: 500px;

margin: 10px auto;

padding: 0;

}

li {

display: inline-block;

width: 120px;

border: 1px solid #ccc;

padding: 10px 15px;

font-size: 16px;

text-align: center;

}

#result {

width: 500px;

height: 300px;

margin: 30px auto;

border: 2px solid #ccc;

border-radius: 15px;

}

p {

width: 80%;

padding: 10px;

line-height: 2em;

}

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

// 클릭 이벤트 함수

// 함수 정의 -> 함수 사용 : changeBg('green')

function changeBg(color) {

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

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

// 배경색 바꾸기

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

}

08_dom_onclick_getElementByid
예전 방식으로 이미지 클릭을 하면 팝업창이 뜨고 함수 실행이 된다.
출력위치 및 함수 정의를 분리하지 않고 html에서 script로 사용도 가능하다. (권장하는 방식 아님)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

// 권장하는 방식은 아니지만 파일을 분리하지 않고 html에서 script로 사용도 가능하다.

// 함수의 정의

function myImgClick(event) {

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

// document(html 문서)

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

// 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>

09_event_mouseover
마우스 이벤트 클릭
※ 이벤트 : 클릭, 마우스 동작, 키보드 동작 등을 말한다.

<!DOCTYPE html>

<head>

<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";

}

10_exam_dom_1
마우스 이벤트 클릭 현재 시간 표시하기

<!DOCTYPE html>

<head>

</head>

<body>

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

</body>

</html>

// 함수 정의

function innerhtml() {

// 현재 시간 가져오기(변수 선언)

let now = new Date(); // 현재 날짜 (년, 월, 일, 시, 분, 초);

// innerHTML 에 출력

document.querySelector("#output").innerHTML = now;

}

11_exam_dom_2
마우스 이벤트 클릭하면 글자색 변경
HTML onclick="changeColor() === JS function changeColor() {
// 클릭하면 p 태그 선택해서 빨간색으로 바꾸기
document.querySelector("p").style.color = "red";
}

<!DOCTYPE html>

<head>

</head>

<body>

<!-- 연습문제 1) 아래 버튼을 클릭하면 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() {

// 클릭하면 p 태그 선택해서 빨간색으로 바꾸기

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

}

12_exam_dom_3
마우스 이벤트 클릭시 합계 구하기

<!DOCTYPE html>

<head>

</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; // 평균

// ex 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; // 평균

}

13_exam_dom_4
마우스 이벤트 설명 버튼 보기 닫기
style.display = "none" (사라짐)
style.display = "block" (나타남)

<!DOCTYPE html>

<head>

</head>

<body>

상세 설명 보기

</button>

<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) 사라짐

// 2) #open 버튼 나타남

}

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

function hideDetail() {

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

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

// 2) #open 버튼 나타남

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

}

14_exam_dom_5
마우스, 키보드 입력시 선택 이벤트 대화상자

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

let input = prompt("글자를 입력해주세요.");

if (input === "y") {

// 글쓰기 버튼 추가

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

} else {

// 글수정 버튼 추가

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

}

15_exam_dom_6
마우스 이벤트 클릭시 대화상자 열기

<!DOCTYPE html>

<head>

</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>

a:link,

a:visited {

color: black;

text-decoration: none;

}

ul {

list-style: none;

width: 500px;

margin: 10px auto;

padding: 0;

}

li {

display: inline-block;

width: 120px;

border: 1px solid #ccc;

padding: 10px 15px;

font-size: 16px;

text-align: center;

}

#result {

width: 500px;

height: 300px;

margin: 30px auto;

border: 2px solid #ccc;

border-radius: 15px;

}

p {

width: 80%;

padding: 10px;

line-height: 2em;

}

function myGreen() {

// 대화상자 : Green

alert("Green");

}

function myOrange() {

// 대화상자 : Orange

alert("Orange");

}

function myPurple() {

// 대화상자 : Purple

alert("Purple");

}

16_dom_image
JS파일 빈이미지 id속성을 이용하여 첨부넣기

<!DOCTYPE html>

<head>

<title>빈이미지 id속성을 이용하여 첨부넣기</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";

17_dom_mouseover2
도형 위로 마우스 이벤트 포인터

<!DOCTYPE html>

<head>

<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>

// #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>

// <div id="container">

// 도형 조작

// 선택 함수 : #rect

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

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

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

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

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

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

myRect.style.backgroundColor = "green";

myRect.style.borderRadius = "50%";

});

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

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

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

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

myRect.style.backgroundColor = "";

myRect.style.borderRadius = "";

});

마우스가 위로 올라가면 원형 및 녹색으로 마우스가 밖으로 나가면 원상 복귀(사각형 및 색 채우기 없음)

18_exam_addEventListener
마우스 이벤트 커서시 이미지 교체 및 원복

<!DOCTYPE html>

<head>

<style>

#container {

width: 300px;

margin: 10px auto;

}

</style>

</head>

<body>

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

원상복귀 바꾸기 코딩 -->

</div>

</body>

</html>

// 선택 함수

let easys = document.querySelector("#cover");

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

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

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

// img 태그의 src 속성 조작

easys.src = "./img/easys-2.jpg";

});

// 마우스가 나가면 함수

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

// boy -> girl 이미지

easys.src = "./img/easys-1.jpg";

});

여자 이미지에 마우스를 가져다 대면 남자 이미지로 바뀌고 이미지에서 이탈하면 원상복귀(여자 이미지)된다.

19_dom_setinterval
화면에 시계 시간이 계속 흘러가게 출력
초 단위 코드를 반복 실행하는 함수 : setInterval(함수(), 밀리초)

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

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

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

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

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

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

setInterval(function () {

// 반복할 코딩 : 시간

let now = new Date();

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

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

20_exam_dom_7
마우스 이벤트로 이미지 바꾸기

<!DOCTYPE html>

<head>

<style>

#container {

width: 300px;

margin: 10px auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

// 문제 풀이

// 선택 함수

// img 선택

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

// 클릭 이벤트 함수

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

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

function chagePic() {

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

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

}

21_exam_dom_8
마우스 이벤트 버튼 클릭 이미지 바꾸기

<!DOCTYPE html>

<head>

</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";

}

22_exam_dom_9
버튼을 클릭하면 책값/할인율/배송료/지불금액 화면에 표시
※ 시나리오 풀이

<!DOCTYPE html>

<head>

</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 + "원"; //

}

// TODO 코드 시나리오 풀이

// 1) 함수 get_pay 함수를 정의한다. (정답)

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

// 적용해서 pay 변수에 넣는다.

// 3) 각각의 값을(pay, price, discount, shipping) 화면에 div 출력한다.

23_exam_handingchildren
자식 요소(element, 태그) 접근

<!DOCTYPE html>

<head>

<title>자식 요소(element, 태그) 접근</title>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO : 자식 요소(태그) 접근

// 선택함수 : querySelector(css선택자)

let ulTag = document.querySelector("ul"); // ul 태그

// TODO 사용법 : 태그.children[1] : 2nd li

// 태그.children[2] : 3nd li

let two = ulTag.children[1].innerHTML; // 2nd li의 텍스트

let three = ulTag.children[2].innerHTML; // 3rd li의 텍스트

// 출력

console.log("two", two);

console.log("three", three);

// TODO : 1st 자식요소(태그) / 마지막 자식요소(태그) 접근

// TODO 사용법 : 태그.firstElementChild; // 1st li의 자식요소(태그)

let one = ulTag.firstElementChild.innerHTML; // 1st li의 텍스트

// TODO 사용법 : 태그.lastElementChild.innerHTML; // last li의 자식요소(태그)

let last = ulTag.lastElementChild.innerHTML; // last li의 텍스트

// 출력

console.log("one", one);

console.log("last", last);

24_dom_handing_parent
부모 요소(element, 태그) 접근

<!DOCTYPE html>

<head>

<title>부모 요소(element, 태그) 접근</title>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO: 부모 요소(태그) 접근

// 선택함수 : li 태그 중 class=two 인 것

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

let liTag = document.querySelector(".two");

// TODO 사용법: 태그.parentElement; // 태그의 부모태그

let parent = liTag.parentElement;

// 출력

console.log("parent", parent);

25_dom_handing_siblings
형제 요소(태그) 접근

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO : 형제 요소(태그)

// 선택함수 : li 태그 중 class=two 인것

// TODO 사용법 : let liTag = document.querySelector(css선택자)

let liTag = document.querySelector(".two");

// TODO 사용법 : 태그.previousElementSibling;

// TODO : 태그의 앞에 있는 형제 요소(태그) 접근

let siblingPre = liTag.previousElementSibling.innerHTML;

// 출력

console.log("siblingPre", siblingPre);

// TODO 사용법 : 태그.nextElementSibling;

// TODO : 태그의 뒤에 있는 형제 요소(태그) 접근

let siblingNext = liTag.nextElementSibling.innerHTML;

// 출력

console.log("siblingNext", siblingNext);

26_dom_handing_before_after
선택한 태그의 앞/뒤에 위치 추가(문자열/태그 모두 이동 가능)

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>Vanila js</li>

<li class="movingTag" style="color: red">React</li>

</ul>

</body>

</html>

// TODO : 선택 태그 앞/뒤 추가

// 선택함수 : li 태그 중 class=two 인것

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

// 1) 선택한 태그

let liTag = document.querySelector(".two"); // 녹색

// 2) 이동할 태그

let movingTag = document.querySelector(".movingTag"); // 빨간색

// TODO : 선택한 요소(태그)의 앞에 추가 : 문자열/태그 모두 이동 가능

// TODO : 사용법 : 태그.before(이동할태그)

liTag.before(movingTag);

// TODO : 선택한 요소(태그)의 뒤에 추가 : 문자열/태그 모두 이동 가능

// TODO : 사용법 : 태그.after(이동할태그)

liTag.after(movingTag);

// TODO : 자바스크립트 특징 : 스크립트 언어 , line by line 으로 실행됨(컴파일 없음)

// line by line 으로 실행 : 1라인을 읽으면 1)문법 해석 -> 2)바로 실행

// 컴파일 언어 vs 스크립트 언어 속도 차이 : 컴파일 언어 빠름

// , 미리 문법해석함 -> 바로 실행

CSS(Tag two) - > React(Tag movingTag) before & after 함수에 따라 위치 변경됨

27_dom_handing_remove
태그를 이용하여 부모 또는 자식 요소(태그) 삭제
- 선택한 자기자신 삭제
- 부모의 자식중 1개를 삭제
- 자식 태그 삭제하기

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>Vanila js</li>

<li class="removeTarget">React</li>

</ul>

</body>

</html>

// TODO: 1) 선택한 자기자신 삭제

// 선택함수 : class="one" 인것

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

let liOne = document.querySelector(".one");

// TODO: 요소 삭제

// 사용법: 태그.remove();

liOne.remove();

// TODO: 2) 부모의 자식중 1개를 삭제

// 부모 선택 : ul태그

let ulTag = document.querySelector("ul");

// 삭제할 자식 태그 선택 : class="removeTarget"

let removeTarget = document.querySelector(".removeTarget");

// TODO: 자식 태그 삭제하기

// 사용법: 부모태그.removeChild(삭제할자식태그)

ulTag.removeChild(removeTarget);

선택한 자기자신 삭제()요소 삭제 / 부모의 자식중 1개를 삭제 / 자식 태그 삭제하기

28_dom_handing_classList
클래스 리스트 조작

<!DOCTYPE html>

<head>

<style>

.red {

color: red;

}

.skyblue {

color: skyblue;

}

</style>

</head>

<body>

<div id="content" class="first second third">JS classList</div>

</body>

</html>

// TODO: 클래스 리스트 조작

// 선택함수 : #content 선택

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

// TODO: 빨간색 클래스 추가

// .red css 클래스를 div 태그에 추가

// TODO 사용법 : 태그.classList.add("클래스명");

content.classList.add("red");

// TODO: 빨간색 -> 하늘색 교체

// TODO 사용법 : 태그.classList.replace("기존 클래스", "바꿀 클래스")

content.classList.replace("red", "skyblue");

// TODO: 하늘색 클래스 삭제

// TODO 사용법 : 태그.classList.remove("삭제할 클래스")

content.classList.remove("skyblue");

// TODO: 클래스 있는지 확인(있으면 true, 없으면 false) : contain()

// TODO 사용법 : 태그.classList.contains("있는지 확인 할 클래스")

let bResult = content.classList.contains("skyblue");

// 출력

console.log("bResult", bResult); // false

// TODO : 클래스가 있으면 삭제, 없으면 추가 : toggle()

// TODO 사용법 : 태그.content.classList.toggle("토글할클래스");

content.classList.toggle("skyblue"); // 추가가 됨

29_exam_classList
토글 버튼을 통해 클래스 적용하기
코드 푸는 방식은 다양하게 있다. 조건문 사용과 토글 함수의 역할로 인해 코드를 짧게 쓸수는 있음

<!DOCTYPE html>

<head>

<style>

* {

padding: 0;

margin: 0;

margin: 0 auto;

}

#container {

width: 1200px;

background-color: beige;

margin: 0 auto;

text-align: center;

padding: 20px;

}

button {

width: 100%;

height: 50px;

margin-top: 10px;

font-size: 2em;

}

.dark {

color: white;

background-color: black;

}

.light {

color: black;

background-color: beige;

}

</style>

</head>

<body>

<h1 id="content">JS classlist</h1>

</div>

</body>

</html>

// TODO 코드 푸는 방식은 다양하게 있다. 조건문 사용과 토글 함수의 역할로 인해 코드를 짧게 쓸수는 있음

// TODO 조건문을 사용하여 푸는 방법

// 함수 정의

function setToggle() {

// 선택함수 : #content

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

// .dark 클래스 있는지 확인

if (content.classList.contains("dark") == true) {

// .light 클래스 추가 (add() , toggle())

content.classList.toggle("dark");

} else {

// .dark 클래스 추가

content.classList.toggle("dark");

}

// TODO 토글 함수를 이용해 간단하게 짜는 방법

// function setToggle() {

// container.classList.toggle("dark");

// content.classList.toggle("dark");

// }

30_dom_forbidden
선택함수사용 금칙어 입력되면 경고 표시 이벤트

<!DOCTYPE html>

<head>

<title>선택함수사용 금칙어 입력되면 경고 표시 이벤트</title>

</head>

<body>

<main>

<form>

</div>

</form>

</main>

</body>

</html>

/* css */

@charset "UTF-8";

* {

margin: 0;

padding: 0;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

tap-highlight-color: rgba(0, 0, 0, 0);

}

ul {

list-style: none;

}

table {

text-align: left;

border-collapse: collapse;

}

table th {

font-weight: normal;

}

h1,

h2 {

font-weight: normal;

}

button {

display: block;

}

label {

display: block;

}

html,

body {

width: 100%;

height: 100%;

}

body {

margin: 0;

font-family: "맑은고딕", "Malgun Gothic", serif;

font-size: 22px;

color: #ffffff;

overflow: hidden;

padding: 10px;

box-sizing: border-box;

}

h1 {

text-align: center;

font-size: 26px;

margin-bottom: 20px;

}

h2 {

font-size: 24px;

}

h1,

label,

button,

textarea,

ul,

li,

hr {

margin-bottom: 20px;

}

a {

color: #fff;

}

p {

line-height: 36px;

}

table {

margin-left: auto;

margin-right: auto;

height: 40px;

}

input,

textarea,

button,

label,

select {

font-size: 18px;

line-height: 18px;

}

select {

background-color: #fff;

}

button {

width: 300px;

}

label input {

margin-left: 20px;

}

textarea {

box-sizing: border-box;

padding: 20px;

}

code {

font-size: 18px;

font-family: monospace;

}

code.block {

padding: 10px;

display: block;

background-color: rgba(0, 0, 0, 0.3);

}

body {

color: #333333;

background-color: #d47542;

display: flex;

justify-content: center;

align-items: center;

}

main {

background-color: #fff;

width: 100%;

max-width: 640px;

padding: 40px 40px 80px;

box-sizing: border-box;

position: relative;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

}

h1 {

font-size: 32px;

}

h2 {

font-size: 22px;

}

.name-input {

margin-top: 20px;

width: 100%;

background-color: transparent;

border: none;

border-bottom: 1px solid #c1c1c1;

}

.warning-message {

color: #ff5967;

font-weight: bold;

font-size: 20px;

height: 22px;

}

.button-wrapper {

position: absolute;

width: 100%;

bottom: 20px;

left: 0;

margin-top: auto;

margin-bottom: 0;

display: flex;

justify-content: center;

}

.button-wrapper button {

margin-bottom: 0;

margin-left: 10px;

margin-right: 10px;

text-decoration: none;

color: #fff;

text-align: center;

border: none;

border-radius: 4px;

display: inline-block;

height: 40px;

line-height: 40px;

padding: 0 32px;

text-transform: uppercase;

font-size: 1.2rem;

cursor: pointer;

transition: background-color 0.2s;

width: 180px;

}

.button-wrapper button.cancel {

background-color: #959595;

}

.button-wrapper button.submit {

background-color: #d47542;

}

// 금칙어 예제

// 채팅 : 입력못하는 문자(욕, 육두문자 등)

// 선택함수 : 체크대상(.name-input 클래스를 가진 input 태그)

// 금칙어 == "test"

let nameInput = document.querySelector(".name-input"); // input 태그

// 금칙어를 화면에 출력할 태그 선택

let warningMessage = document.querySelector(".warning-message"); // p태그

// 이벤트 : 클릭, 마우스 3개 , 키보드 키입력(input)

// 사용법 : 태그.addEventListener("input", function(){실행문};

nameInput.addEventListener("input", function () {

// 금칙어 감시 코딩 : nameInput 의 값(value)

let inputStr = nameInput.value; // 현재 입력된 값

// 입력된 값 -> 소문자로 변경 : .toLowerCase()

let smallChar = inputStr.toLowerCase();

// 조건문 : test 문자가 들어 왔는지 비교

// 문자열.includes("체크문자") : 있으면 true, 없으면 false

if (smallChar.includes("test") == true) {

// 금칙어가 들어왔음 : test

warningMessage.innerHTML = "경고: test 들어옴";

// TODO test를 포함한 문자가 들어오면 무조건 경고가 들어옴(testttttt)

} else {

warningMessage.innerHTML = "";

}

});

toLowerCase 함수사용 대문자 소문자로 변경됨 / test를 포함한 텍스트는 무조건 경고 문구가 뜸

31_char_num
키보드 이벤트 글자수 입력시 카운팅 출력
※ 글자수 체크 코딩

<!DOCTYPE html>

<head>

</head>

<body>

<main>

<p>현재 <span class="string_num">0</span>글자를 입력하였습니다.</p>

</main>

</body>

</html>

/* css */

/* @import url(../../common/css/base_photo.css); */

body {

background-size: cover;

/* background: url("../common/bg_nature_4.jpg") center; */

}

.textarea {

width: 100%;

height: calc(100% - 40px);

font-size: 40px;

background-color: rgba(255, 255, 255, 0.9);

}

p {

color: white;

font-size: 24px;

font-weight: bold;

text-shadow: -1px -1px 1px #333333, 1px 1px #ffffff;

margin: 0;

}

// 예제: textarea 태그에 입력된 글자수를 출력하는 예제

// textarea : 게시판 등에 많이 사용

// 선택함수 : class="textarea" 선택

let textarea = document.querySelector(".textarea");

// 입력된 문자수를 출력할 위치 : p태그 안에 span 태그에(.string_num) 출력

let string_num = document.querySelector(".string_num");

// 키입력(키를 떼었을떄) : keyup (vs keydown , input 등)

textarea.addEventListener("keyup", function () {

// 글자수 체크 코딩

// input 태그의 값(value) == textarea 태그의 값(value)

let inputText = textarea.value; // 현재 입력된 값(문자열)

// 문자열 길이 == 문자열.length

string_num.innerHTML = inputText.length; // 글자수가 span 태그 출력됨

});

32_dom_name

성+이름 입력시 합쳐서 출력(화면 표시)

// 성 + 이름 출력하기

// 선택함수 : 성 input

let familyText = document.querySelector("#familyText"); // input 태그

// 선택함수 : 이름 input

let firstText = document.querySelector("#firstText"); // input 태그

// 성 + 이름 출력할 위치 선택

let fullName = document.querySelector("#fullName"); // input 태그

// 이벤트 : 키보드 키입력 : keyup

familyText.addEventListener("keyup", function () {

// 성이 입력되면 fullName 출력하기

// familyText.value(성 입력값) + firstText.value(이름 입력값)

fullName.innerHTML = familyText.value + firstText.value;

});

// 이벤트 : 키보드 키입력 : keyup

firstText.addEventListener("keyup", function () {

// 이름이 입력되면 fullName 출력하기

// familyText.value(성 입력값) + firstText.value(이름 입력값)

fullName.innerHTML = familyText.value + firstText.value;

});

33_date
날짜 지정하기 날짜와 시간

<!DOCTYPE html>

<head>

</head>

<body>

<form>

<hr />

</form>

</body>

</html>

function getDate() {

// 선택함수 : 달력

let dateVal = document.querySelector("#date");

alert(dateVal.value);

}

function getTime() {

// 선택함수 : 시간

let timeVal = document.querySelector("#time");

alert(timeVal.value);

}

HTML 코드<input value=" "> 값에 날짜를 지정하지 않으면 기본 제공으로 date (연도 -월 -일) / time(--(시) --(분() : --(초))이 뜬다.

HTML 코드<input value=" "> 값에 날짜를 지정시 date (연도 -월 -일) / time(--(시) --(분() : --(초)) 지정한 값이 기본으로 뜬다.

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[JQUERY] chapter_01 (0)	2023.08.24
[WINDOW] chapter_01 (0)	2023.08.23
[JavaScript] chapter_02 (0)	2023.08.21
[JavaScript] chapter_01 (0)	2023.08.16
[HTML&CSS] chapter_04 (0)	2023.08.09

기술 블로그

[DOM] chapter_01

'Visual Studio Code' 카테고리의 다른 글

티스토리툴바