🧡DOM(Document Object Model)
>> 문서 객체 모델 HTML문서의 각 요소들을 트리형태로 표현해줌
>>개발자는 자바스크립트를 이용해서 이를 생성 수정 삭제가능
>>트리 형식의 자율 구조.
>>하나의 객체를 노드라고 부름.
트리에서 위쪽은 부모 노드 아래쪽을 자식 노드라고 합니다.
>>도큐먼트를 제외하고 최상단에 있는 html은 루트 노드가 됩니다.
🧡유사 배열
>>>진짜 배열처럼 배열 관련 메서드를 사용할 수 있는건 아님
>>> for..of사용
1) document.querySelectorAll('p')
>>>NodeList 생성 --- 한 번 저장된 값을 계속 사용함
2) document.getElementsByTagName('p')
>>>HTMLCollection 생성 --- html의 변경사항이 실시간으로 반영됨
🧡부모 & 자식 & 형제 노드
1)부모
(1) .parentNode ---노드를 반환(nodelist)
(2) .parentElement ---요소노드(html태그로 이루어진 요소)를 반환(HTML list)
2)자식
(1) .childNodes --공백 노드도 반환(nodelist)
(2) .children --요소노드만 반환(HTML list)
(3) .firstchild .lastchild --> nodelist
(4) .firstElementChild .lastElementChild -->HTML list
3)형제
(1) .previousSibling .nextSibling --> nodelist
(2) .previousElementSibling , .nextElementSibling - ->HTML list
💙노드의 생성, 추가, 복제, 삭제
.nodeValue 텍스트노드가 아니면 null반환
.textContent 텍스트 노드가 아니라도 수정가능 (잘안사용해)
.innerHTML 마크업을 HTML에 직접 수정적용 (이것도 굉장히 귀찮아서 잘안써)
.createElement 노드의생성
.createTextNode 텍스트형태의 노드추가
.appendChild 노드의추가(가장 마지막 위치에 추가)
.insedtBefore(추가노드 , 어디앞에)
>이 둘은 이미 존재하는 노드에도 적용가능
.removeChild(삭제노드(예시- ul.firstElementChild)) 노드의 삭제
💛 CSS style, css 제어
요소.style.css속성값(카멜케이스) = " 원하는 속성의 값 "
요소.style["속성값"] = "원하는 속성의 값 "
요소.className = 'bg-blue txt-pink' ; 클래스를 부여함 (잘안사용해)
요소.classList.add('txt-white') ; 속성값을 가지는 이름의 클래스를 추가
요소.classList.remove('txt-white') ; 제거
요소.classList.replace('1속성','2속성') 1속성 지우고 2속성으로 바꿔
setInterval(() =>{
요소.classList.toggle('txt-white);
} , 1000) ;
>>1초에 한 번씩 글자를 하얀색으로 바꿈(클래스가 추가되었다가 삭제되었다가 함)
💛EventHandler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<button onclick="alert('click')">클릭1</button>
<button onclick="sayHello()">클릭2</button>
<button id="btn">클릭3</button>
<button id="btn2">클릭4</button>
<script>
function sayHello(){
alert("hello")
}
const el = document.getElementById("btn")
el.onclick = sayHello //onclick 더해줌
const el2 = document.getElementById("btn2")
el.addEventListener("click",sayHello) //"click" 이벤트 실행시 sayHello 함수 실행
document.addEventListener("DOMContentLoaded", () => {
document.body.style.backgroundColor = "red"
})
document.DOMContentLoaded = () => {
document.body.style.backgroundColor = "red"
}/////동작 하지 않음 이런 애들은 무조건 addEventListener 사용해야함
</script>
</body>
</html>.addEventListener 이미 자바스크립트에서 정해져 있는 이벤트를 가지고 와서 추가해줌
.removeEventListener 이벤트제거
자주쓰는 이벤트
| "click" | 클릭 시 실행 | 버튼클릭 |
| "dblclick" | 더블 클릭시에만 실행 | |
| "keydown" ,"keyup" | 입력한 글자가 찍힘 | |
| "focus" "focusin" | 인풋창에 포커스가 갈때 이벤트가 발생 | 이 항목을 입력해주세요 |
| "blur" "focusout" | 인풋창에 포커스가 가지않을 때 이벤트가 발생 | |
| "mousemove" | 마우스를 움직일 때마다 이벤트가 찍혀 | 마우스 따라 움직이는 효과 |
| "resize" | 창의 크기가 바뀔 때 이벤트발생 | 게더 사이즈 바뀔 떄 ui바뀜 |
🤍move mouse 예시 : 빨강박스 안에서 마우스가 움직일때 검정동그라미가 마우스를 따라다님
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<div id="box" style="position: relative;
width: 100px;
height:100px;
border: 2px solid red">
<div id="circle" style="
position : absolute;
width: 10px;
height :10px;
background-color:#000;
border-radius:50%;"></div>
</div>
<script>
const box = document.getElementById("box");
const circle = document.getElementById("circle");
box.addEventListener("mousemove", event => {
circle.style.top = `${event.clientY}px`; ///박스안에서 동구라미가 마우스 움직임에 따라 움직임
circle.style.left = `${event.clientX}px`;
})
</script>
</body>🧡이벤트 버블링, 이벤트 위임
대부분의 이벤트는 버블로 전파되지만 몇몇은 그렇지 않다.
예외 >>> focus, blur, mouseenter, mouseleave --->>>버블링 되게 하려면 focusin, focusout, mouseover, mouseout
🤍event위임
자기에게서 발생하는 event를 다른데에 위임(버블링 이용)
예시 : 클릭하면 그 리스트에만 빨갛게 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<style>
.on{
background-color: tomato;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li id="red">red</li>
<li id="blue">blue</li>
<li id="green">green</li>
<li id="pink">pink</li>
</ul>
</div>
<script>
const list = document.getElementById("list");
const colors = list.children; //리스트의 자식요소 공갈배열
function clickHandler(event){
for(c of colors){ //colors 의 요소 포문
c.classList.remove("on");
}
event.target.classList.add("on")
}
// document.getElementById("red").addEventListener("click", clickHandler);
// document.getElementById("blue").addEventListener("click", clickHandler);
// document.getElementById("green").addEventListener("click", clickHandler);
// document.getElementById("pink").addEventListener("click", clickHandler);
//리스트 점점 많아지면 다 추가해야하는 번거로움이있기때문에 그 부모요소에 이벤트를 위임해준다
document.getElementById("list").addEventListener("click", clickHandler);
</script>
</body>
</html >event.target : 이벤트를 발생시키는 요소
event.currentTarget : 이벤트 핸들러가 등록된 요소
'JavaScript' 카테고리의 다른 글
| useEffect hook (0) | 2022.05.28 |
|---|---|
| State (0) | 2022.05.23 |
| 코딩 앙마 왕초보 (0) | 2022.05.21 |
| 노마드 코더 바닐라 JS-2 (0) | 2022.05.20 |
| Array.map()함수 (0) | 2022.05.18 |
댓글