DOM

Document Object Model :웹페이지에 대한 인터페이스

• 여러 프로그램들이 페이지의 콘텐츠, 구조, 스타일을 읽고 조작할 수 있도록 api를 제공한다.
• nodes, property, method를 가지고 있는 Object로 문서로 표현한다.
• 웹페이지를 JS 또는 다른 프로그래밍 언어로 연결해서 사용할 수 있도록 해준다.
• 웹페이지의 객체 지향 표현이며 JS를 이용해 DOM을 수정할 수 있다.

참고한 블로그

---

DOM 요소 생성

document.createElement("div")

새 요소 만들기

<div id="content">
    <h1>DOM요소</h1>
</div>

<script>
    let p = document.createElement("p")
    👉p 태그가 만들어졌다.
</script>

document.createTextNode("text")

텍스트 노드 만들기

let textnode= document.createTextNode("내용");
👉//"내용"이라는 textnode를 작성했다.

---

DOM 요소 추가

parent.appendChild(element)

부모요소의 자식요소로 추가
이미 자식요소가 있을 경우 마지막 자식요소로 추가

p.appendChild(textnode); 
👉//p의 자식요소로 textnode를 추가했다. <p>내용</p>
    
const content = document.getElementById("content");
content.appendChild(p);
👉//content의 자식요소로 p를 추가했다.

parent.insertBefore(el,position)

부모요소의 자식요소 앞에 추가

el-삽입할 요소

position 삽입할 위치

• firstElementChild
• lastElementChild
• children[i]
• el.nextElementSibling
• el.previousElementSibling

content.insertBefore(p, content.firstElementChild)
👉//content의 첫번째 자식요소의 앞에 p를 추가했다.

parent.insertAdjacentHTML(where,html)/Text(where,txt)/Element(where,el)

where 삽입할 위치

• afterbegin
• afterend
• beforebegin
• beforeend

content.insertAdjacentElement("afterbegin",p)
👉//content가 시작한 후에 p를 추가했다.

node.append()

노드 맨 끝에 삽입

const div = document.createElement('div');
div.append('hi');
👉//<div>hi</div>

node.prepend()

노드 맨 앞에 삽입

div.append('hi');
👉//<div>hi</div>

node.before()

노드 이전에 삽입

node.after()

노드 이후에 삽입

---

DOM 요소 삭제

node.remove()

let box2 = document.querySelector("#box2");
function removeDiv(){
	box2.remove();
}

removeChild()

let ul =document.querySelector("ul");
let li =document.querySelector("li:nth-child(1)");
👉//1번째 자식 li지정
ul.removeChild(li);
👉//Ul의 자식요소 li를 삭제

응용

spans.forEach(i=>{
	i.addEventListener("click",function(){
		this.parentElement.remove();
	})👉해당되는 spans가 클릭될 때 부모요소 삭제
});

---

DOM 요소 복사

elem.cloneNode(true/false)

true = 자식요소까지 전부 복제
false = 자식요소를 제외하여 비어 있는 요소로 복제

  <div id="box1">
    <h2>안녕하세요</h2>
  </div>
<script>
  let div1= document.querySelector("#box1");
  let div2= div1.cloneNode(true);
  div1.after(div2)
</script>

DOM 요소 선택

children

자식요소 선택

lastElementChild

자식요소 중 마지막 요소 선택

firstElementChild

자식요소 중 첫번째 요소 선택

parentElement

부모요소 선택

---

Event

function 바로가기

시작하기 전에

• MouseOver와 MouseEnter의 차이
  상위요소로 전파되는 것을 막기위해 이벤트 버블링이 일어나지 않는 것 위주로 작성했다.
  (❗ 아직 이것까지 이해하기엔 내가 부족하다!)

1. html요소의 속성으로 설정

	<button onclick="name()"></button>

html에서 요소의 속성으로 event를 설정한다.

이벤트 명

• onclick
  : 클릭했을 때
• onscroll
  : 스크롤했을 때
• onmouseenter
  : 요소에 마우스를 올렸을 때
• onmouseleave
  : 요소에서 마우스를 내렸을 때
• onmousemove
  : 요소에서 마우스를 움직일 때

  ---

2. DOM 프로퍼티에 설정

let name=documnet.querySelector("button");
name.onclick = function(){
};

script에서 대상을 부르고 event를 설정한다.

---

3.표준 이벤트 리스너

해당하는요소.addEventListener("이벤트명",함수)

let name=documnet.querySelector("button");
name.addEventListener("click",function(e){
};

❗ 위의 function에서 e는 event 객체를 뜻하는 것으로
e.pageX 좌표값과 e.pageY 좌표값으로 마우스 위치값을 가지고 있다.

이벤트명

• click
  : 클릭했을 때
• mouseover
  : 요소에 마우스를 올렸을 때
• mouseout
  : 요소에서 마우스를 내렸을 때
• mousedown
  : 요소를 드래그할때
• mouseup
  : 드래그한 요소를 내려놓을 때
• mousemove
  : 마우스가 움직일때
  💡 마우스커서의 현재 위치를 계속 기록하는 것에 주로 이용
• focus HTML
  : 요소에 포커스가 갔을때
• blur HTML
  : 요소가 포커스에서 벗어났을때
• keypress
  : 키를 누를 때, 키를 누르고 있는 순간 계속해서 반복
• keydown
  : 키를 누를 때
  • key와 관련한 event의 code (e.code)
    기본값= 입력한 값
    엔터= Enter
    숫자= Digit
• keyup
  : 키를 눌렀다가 뗄 때
• load
  : 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때
• resize
  : 브라우저 창의 크기를 조절할때
• scroll
  : 스크롤 할 때
  ❗ 페이지에 스크롤바가 없다면 이벤트는 발생하지 않음.
• unload
  : 브라우저 창을 닫을 때
• change
  : 폼 필드의 상태가 변경되었을 때
  💡 라디오 버튼 클릭시, 셀렉트 박스에서 값을 선택할 때 주로 이용

window.addEventListener('scroll',function(e){
//window를 scroll 했을때 function을 실행한다.
        
let scrollT = document.documentElement.scrollTop;
//현재 위치의 스크롤 값으로, 위와 아래의 let scrollT는 똑같이 작동한다.
let scrollT = window.scrollY;
            
document.querySelector("p").innerHTML = scrollT;
//위 함수로 얻은 값을 p에 출력했다.

if(scrollT>500){
	document.querySelector("body").style.background ="red";
	//스크롤 값이 500이 넘으면 body 색상을 red로 변경
}else {
	document.body.style.background = "beige";
	//스크롤 값이 500을 넘지 않으면 body 색상을 beige로 한다.
	//body를 지정할 때에는 .body로 지정해도, querySelector를 이용해도 된다.
	}
})

스크롤 값의 변경에 따라 background 컬러를 변경시켰다.

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

p.addEventListener('click',function(){
//함수 p를 click했을 때 function을 실행한다.
window.scrollTo({top:500, behavior:"smooth"});
//window를 scroll높이 top:500으로 smooth하게 이동한다.
})

요소를 클릭했을때 스크롤 값을 변경시키는 함수를 작성할 수 있다.

💡 window 높이 구하기

	window.innerHeight

---

Form

name = 서버에 값이 저장될 장소
value = 서버에 저장되는 값

form 안의 요소들은 js에서document.forms.폼네임.요소네임으로도 선택할 수 있다.
❗ form안의 요소를 만들 때 클릭할 버튼은 form 밖에 작성해야 새로고침이 되지 않는다.

checkbox

check되면 checked 속성의 값이 true가 된다.
check되지 않으면 checked 속성의 값이 false가 된다.

select

  <select name="num" id="num">
    <option value="가">10</option>
    <option value="나">20</option>
    <option value="다">30</option>
    <option value="라">40</option>
  </select>
  
  <script>
    document.querySelector("#num").addEventListener("change",function(){
      console.log(this.value);
    })
  </script>

focus

input에 커서가 가 있는 것을 의미한다.
💡 일정 글자 수를 입력했을 시 다음 입력란으로 넘길때 주로 사용한다.

submit

<body>
  <form action="join.php" method="get" onsubmit="return formCheck();">
    <p>ID <input type="text" id="userId" name="userId"/></p>
    <p>PW <input type="text" id="userPw" name="userPw"/></p>
    <p><button type="submit">전송</button></p>
  </form>
  <script>
    document.querySelector("form").addEventListener("submit",function(e){
      e.preventDefault()
    });
    function formCheck(){
      console.log("폼을 확인합니다.");
    }
  </script>
</body>

form에 onsubmit으로 "return 함수()"를 입력하면 함수가 정상적으로 완료되면 action이 실행된다. 함수가 제대로 완료되지 않고 return false값을 받으면 action이 실행되지 않는다.

❗ false값을 받았는데도 불구하고 action이 실행된다면
e.preventDefault() 값을 줘서 event 값을 default로 전환시킨다.

주소창

주소창 API