자바스크립트

https://www.w3schools.com/js/default.asp

DOM (Document Object Model)

노드

- HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드

 

elements node와 textnode

- 요소노드 : 태그 그 자체를 의미

- 텍스트노드 : 태그에 기록되어 있는 문자

노드 탐색	자식	childNodes	자식 노드들
		firstChild	첫번째 자식 노드
		lastChild	마지막 자식 노드
	형제	nextSibling	다음 형제 노드
		previousSibling	이전 형제 노드
	부모	parentNode	부모 노드
요소 탐색	자식	children	자식 요소들
		firstElementChild	첫번째 자식 요소
		lastElementChild	마지막 자식 요소
	형제	nextElementSibling	다음 형제 요소
		previousElementSibling	이전 형제 요소
	부모	parentElement	부모 요소

 

요소 검색 메소드

원하는 요소 노드에 접근하기

document.getElementById("id명") 태그의 id 속성 값을 이용해 태그 엘리먼트 객체의 정보를 가져옴 요소에 id 속성이 있으면 위치에 상관 없이 (부모, 자식, 형제 등의 상대적 위치와 관계 없이)document.getElementById(id) 메소드를 통해 접근할 수 있다.

<div id="area1" class="area"> div 영역 <p id="area2">p 영역</p> </div> <script> // 요소 접근 let elem = document.getElementById('area1'); // 요소의 스타일 속성을 이용하여 배경색 변경 elem.style.backgroundColor = 'skyblue'; //let area2 = 10; =>이름 충돌 area2.style.backgroundColor = 'blue'; => id가 아닌 전역변수에 접근 </script>

document/element .getElementsByTagName(“태그명”)

태그명을 이용하여 해당 태그들의 객체 정보를 컬 렉션에 담아 가져옴

document/element .getElementsByClassName(“클래스명”)

클래스 명을 이용하여 해당 태그들의 객체 정보를 컬렉션에 담아 가져옴

document .getElementsByName(“이름“)

태그의 name 속성 값을 이용해 태그들의 객체 정보를 컬렉션에 담아 가져옴

 

document.querySelector(“선택자“) 선택자와 일치하는 문서 내 첫 번째 element 반환 document.querySelectorAll(“선택자”) 선택자와 일치하는 문서 내 모든 element 반환 element.querySelector(“선택자“) 선택자와 일치하는 element 내 첫 번째 element 를 반환 element.querySelectorAll(“선택자“) 선택자와 일치하는 element 내 모든 element 를 반환

<div class="first"> <div class="second"> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> </ul> </div> </div> <script> let first = document.querySelector(".first"); let myLi = first.querySelector(".second li:nth-child(3)"); let myLis = first.querySelectorAll("li"); console.log(myLi); console.log(myLis); myLi.style.color = 'red'; myLis[0].style.backgroundColor = 'gray'; </script>

element.closest(“선택자“) 자신을 포함하여 선택자와 일치하는 가장 가까운 조상 요소를 반환

<div class="area"> <ul class="korean-food"> <li class="menu">제육볶음</li> <li class="menu">된장찌개</li> <li class="menu">김치찌개</li> </ul> </div> <script> let menu = document.querySelector('.menu'); console.log(menu); console.log(menu.closest('.korean-food')); console.log(menu.closest('.area')); // null -> h3은 li의 조상 요소가 아니므로 console.log(menu.closest('h3')); </script>

element.matches(“선택자”) element가 선택자와 일치하는지 여부 반환 요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용하게 사용할 수 있다.

<div class="area"> <ul class="korean-food"> <li class="menu">제육볶음</li> <li class="menu">된장찌개</li> <li class="menu">김치찌개</li> </ul> </div> <script> for(let elem of document.body.children) { if(elem.matches('.area')){ console.log(elem); } } </script>

 

주요 노드 프로퍼티

innerHTML 요소 안 HTML을 문자열 형태로 받아올 수 있음 요소 안 HTML을 수정하는 것도 가능함 innerHTML로 요소의 내용 변경하기 자바스크립트에서 태그 엘리먼트의 값을 읽거나, 변경할 때 innerHTML 속성을 사용함

<div id="area1"> 자바스크립트에서 태그 엘리먼트의 값을 읽거나, 변경할 때 innerHTML 속성을 사용함 </div> <button onclick="checkValue();">innerHTML 확인</button> <script> function checkValue(){ // 아이디를 이용하여 요소 접근 let divEl = document.getElementById('area1'); // 읽어온 요소가 가지는 값 alert 출력 alert(divEl.innerHTML); // 값 변경하기 divEl.innerHTML = "innerHTML 속성으로 값 변경함"; } </script>

outerHTML outerHTML 속성에는 요소 전체 HTML이 담김 outerHTML은 innerHTML에 요소 자체를 더한 것 innerHTML은 요소 값을 수정하지만 outerHTML은 요소 값을 수정하지 않음

<div id="area2"> area2 영역입니다. </div> <script> let area2 = document.querySelector("#area2"); console.log(area2.outerHTML); </script>

textContent 요소 내의 텍스트에 접근할 수 있으며 태그는 제외하고 오로지 텍스트만 추출함 사용자의 입력 값을 받아 처리해야 하는 경우 사용자가 입력한 예상치 못한 HTML이 침투하는 것을 막기 위해 사용함

<div id="area3"> <p>area3 영역입니다</p> <p>문단을 나누어봅니다</p> </div> <div id="area4"></div> <div id="area5"></div> <script> // 태그 제외하고 텍스트만 추출 let area3 = document.getElementById('area3'); console.log(area3.textContent); let input = prompt("값을 입력하세요", "<p><b>강조할거에요</b></p>"); let area4 = document.querySelector("#area4"); let area5 = document.querySelector("#area5"); area4.innerHTML = input; area5.textContent = input; </script>

hidden hidden은 요소를 보여줄지 말지 지정할 때 사용함 HTML 안에 쓸 수도 있고 자바스크립트에서도 쓸 수 있음 기술적으로 style="display:none"과 동일함

<div hidden>숨겨진 div</div> <div id="area6">area6 영역도 숨기기</div> <script> let area6 = document.getElementById('area6'); area6.hidden = true; </script>

 

 

value input, select, textarea 의 값이 저장되는 속성

<form> 이름 : <input type="text" name="username" id="username"> <input type="button" onclick="readValue();" value="input 값 확인"> </form> <div id="area7" class="area"></div> <script> function readValue(){ let input = document.querySelector('#username'); if(input.value == ''){ alert('이름을 입력하세요'); input.focus(); }else{ document.querySelector("#area7").innerHTML = input.value + "라고 입력되었습니다."; } }

 

DOM 프로퍼티와 HTML 속성

HTML에서 태그는 복수의 속성을 가질 수 있다.

브라우저는 HTML을 파싱해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고,

이 표준 속성을 사용해 DOM 프로퍼티를 만든다.

비표준 속성은 DOM 프로퍼티로 전환되지 않는다.

 

비표준 속성에게도 활용할 수 있는 메소드

- element.hasAttribute(name) : 속성 존재 여부 확인

- element.getAttribute(name) : 속성 값을 가져옴

- element.setAttribute(name, value) : 속성 값을 변경함

- element.removeAttribute(name) : 속성 값을 지움

 

appendChild()	insertBefore()
자식 노드의 마지막에 노드가 삽입된다.	insertBefore()는 appendChild()와 비슷하지만, 전달인자가 두 개라는 점이 다르다. 첫 번째 전달인자는 삽입하려는 노드고 두 번째 전달인자는 삽입 기준이 되는 노드로, 새 노드는 이 앞에 놓는다. 이 메서드는 삽입할 노드의 부모 객체가 될 노드에서 샐행된다. 그리고 두 번째 전달인자는 이 부모 노드의 자식 노드여야 한다. 두 번째 인자가 null이면, insertBefore()는 appendChild()처럼 작동하여 자식 노드의 끝에 삽입한다.

createElement()	removeChild()	cloneNode()
새로운 Element 노드를 생성하는 메서드이다.	노드 삭제하기	노드 복제하기

removeChild()	replaceChild()
문서 계층 구조에서 하나의 노드를 삭제한다. 주의할 점은 이 메서드는 삭제하려는 노드가 아니라 이 노드를 자식으로 가진 부모 노드에서 실행된다는 점이다. 따라서 메서드 전달인자로 삭제할 자식 노드를 넘기고, 부모 노드의 메서드로 호출한다. 문서의 n 노드를 삭제하기 위해선 대음처럼 작성한다.	자식 노드 하나를 삭제하고 새 노드로 교체한다. 부모 노드에서 이 메서드를 실행할 때, 첫 번째 전달인자로 새 노드를, 두번째 전달인자로는 교체될 노드를 넘긴다. 텍스트 문자열로 노드 n을 교체하기 위해선 다음처럼 작성한다.

 

이벤트 타입

https://www.w3schools.com/jsref/dom_obj_event.asp

◆ 자바스크립트 변수

const : 변하지 않는 값 ※ 대문자로 네이밍 하는게 좋음

let : 변할 수 있는 값

 

◆ 변수명 선언 규칙

변수는 문자와 숫자, $와 _만 사용

첫글자는 숫자가 될 수 없다

예약어는 사용할 수 없다.

가급적 상수는 대문자로 선언

변수명은 읽기 쉽고 이해할 수 있게 선언

 

◆ 형변환

String() : 문자형으로 변환

Number() : 숫자형으로 변환

Boolean() : 불린형으로 변환