DOM queryselector

// TODO: 1. 태그선택해서 속성 조작하기
// TODO: 사용법 : document.querySelector("태그명").속성 = "값";
// TODO: html 문서에서 태그를 선택해서 속성을 조작하는 방법을 사용
// TODO: =>1) js 파일에서 html 문서를 읽어들임 : html 태그 - 속성(style, src, class)
// TODO: =>2) js queryselector(태그) 함수를 이용해서 태그를 선택
// TODO: =>3) 선택된 태그의 속성을 접근 : 속성, 속성 - 속성2
// TODO: =>4) 속성의 값을 조작
// TODO: => JS 에서 태그나 속성을 접근하는 방법 : 객체. 속성과 유사
// TODO: (참고) JS 실행 : html 문서보다 늦게 실행됨, 제일 아래에 넣기
document.querySelector("h2").style.backgroundColor = "red";
document.querySelector("h3").style.backgroundColor = "yellow";

DOM innerHTML

// 02_dom_innerHTML.js
// TODO: HTML을 넣기 : 여는태그와 닿는 태그 사이에 끼워넣기(문자열, 숫자, html 태그 등)
// TODO: 사용법 : document.querySelector("선택자").innerHTML ="값";
// TODO: 값 - 문자열, 숫자, html 태그 등
// js : css 선택자 사용 가능 (태그, id, class, 전체, 특수 ...)
// document.querySelector("#output").innerHTML = "hello world";
// document.querySelector("#output").innerHTML = "hello world";

// TODO: 주의 : html 태그를 넣을 수 있는 속성등은 해킹의 위험이 있음
// 사례 : document.querySelector("#output").innerHTML = ""; //해킹
// => html 5 버전에서 방지됨
// 사례 2: 해킹됨 : xss 공격
// document.querySelector("#output").innerHTML =
// "";

DOM_display

// TODO: 클릭(click) : 마우스를 누르는 행위, 90%이상 코딩
// TODO: js : 클릭, 키다운, 마우스 무브 등
// let button = document.querySelector(".popup>button"); // 자식 선택자

// TODO: 클릭 이벤트 (추천)
// TODO: 사용법 : 1) let 변수 = document.querySelector("버튼선택");
// TODO: 2) button.addEventListener("click", function () {실행문;});
// console.log(button);

// button.addEventListener("click", function () {
// alert("hello world");
// });

//TODO : 예제 2) button 태그를 클릭하면 공지사항 배너를 사라지게 하세요

let button3 = document.querySelector(".popup>button");
button3.addEventListener("click", function () {
// TODO : 공지사항 배너 == div 태그 선택(.popup)
document.querySelector(".popup").style.display = "none";
});

// TODO: (참고) 태그에 onclick 속성에 js 함수를 연결하는 방식
// TODO: 동작 : 태그를 클릭하면 onclick 속성에 연결된 js 함수가 실행됨
// TODO: 복습 : js 함수 작성법
1)function 함수명() {}
2)function 함수명(param){}

function changeBg(param) {
// 클릭시 실행문
alert(param);
}

// function changeBg2(param) {
// 클릭시 실행문
// alert(param);
// }

event_mouseover

// function changeText(event) {
// TODO: event 객체(웹 브라우저에서 제공)
// alert("안녕");
// TODO:(참고) innerHTML : 여는태그와 닫는태그사이에 글씨 넣기
// TODO: event.target == 현재 이벤트가(클릭, 마우스) 걸린 태그를 자동 선택함ㅋ
// event.target.innerHTML = "안녕";
// }

// 간단 연습 : h2 태그를 클릭하면 배경색을 orange로 변경하세요

function changeText(event) {
event.target.style.backgroundColor = "orange";
}

// TODO : (참고) 마우스 커서 위로 이벤트 : mouseOver

function mouseOver(event) {
// alert("위");
event.target.style.backgroundColor = "orange";
}

// TODO: (참고) 마우스 커서 밖으로 이벤트 : mouseout
function mouseOut(event) {
event.target.style.backgroundColor = "skyblue";
}