[Day-36] 자바스크립트④

chap 12

4. 노드 추가/삭제하기

 

구분	메서드	설명
노드 생성	createElement()	요소 노드를 생성합니다.
	createTextNode()	텍스트 노드를 생성합니다.
	createAttribute()	속성 노드를 생성합니다.
노드 연결	<기준 노드>.appendChild(<자식 노드>)	기준 노드에 자식 노드를 연결합니다.
	<기준 노드>.setAttributeNode(<속성 노드>)	기준 노드에 속성 노드를 연결합니다.
노드 삭제	<부모 노드>.removeChild(<자식 노드>)	부모 노드에 연결된 자식 노드를 삭제합니다.

p나 a 삭제하는 거

 

 

5. 폼 조작하기

1) form 태그 선택하기

 

● forms 속성 사용하기

document 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환합니다. 

 form 태그를 참조하는 HTMLCollection 객체가 반환됩니다. 반환된 HTMLCollection 객체를 사용해 화면에 있는 form 요소 노드를 선택할 수 있습니다.

 

● name 속성 사용하기(일반적)

form 태그에 name 속성을 사용하면 forms 속성보다 훨씬 직관적으로 form 요소 노드를 선택할 수 있습니다. 

 

* nodename
tag에 해당하는 요소 노드
tag는 대문자로 저장되고
나머지는 소문자로

 

2) 폼 요소 선택하기

● form 요소 노드의 elements 속성은 하위 노드의 폼 요소를 반환합니다. 반환된 객체를 사용해 개별 폼 요소 노드에 인덱스로 접근할 수 있습니다.

●  폼 요소의 name 속성값으로 폼 요소 노드에 바로 접근할 수 있습니다.

 

 

 

 

3) 폼 요소의 입력값 다루기

 

● 한 줄 입력 요소 다루기

value 속성을 참조하면 입력한 값을 가져올 수 있고, value 속성에 값을 할당하면 새로운 값을 설정할 수 있습니다.

<form name="frm">
  <input type="text" name="id">
  <input type="password" name="pw">
</form>
<script>
  document.frm.id.value = 'jscoding';
  document.frm.pw.value = 'aaaccc';
</script>

 

● 여러 줄 입력 요소 다루기 : textarea 사용

 

<form name="frm">
  <textarea name="desc"></textarea>
</form>

<form name="frm">
  <textarea name="desc"></textarea>
</form>
<script>
  document.frm.desc.value = 'setting!';
</script>

 

● 체크박스 다루기

체크박스도 value 속성으로 값을 가져올 수 있습니다

하지만 한 줄 입력 요소와는 다르게 체크박스에 체크 표시가 있는 것만 값을 가져와야 하는 경우가 더 많습니다. 

반복문 사용하여 독립적으로 개별적으로 접근

<form>
  <label><input type="checkbox" value="apple">사과</label>
  <label><input type="checkbox" value="banana">바나나</label>
  <label><input type="checkbox" value="orange">오렌지</label>
  <label><input type="checkbox" value="melon">멜론</label>
</form>

//콘솔창 코드
//const checkboxEls = document.querySelectorAll("[type='checkbox']");
//for(let i = 0; i < checkboxEls.length; i++){
//  if(checkboxEls[i].checked === true){
//    console.log(checkboxEls[i].value);
//  }
//}

 

 

<form>
  <label><input type="checkbox" value="apple">사과</label>
  <label><input type="checkbox" value="banana">바나나</label>
  <label><input type="checkbox" value="orange">오렌지</label>
  <label><input type="checkbox" value="melon">멜론</label>
</form>
<script>
  const checkboxEls = document.querySelectorAll("[type='checkbox']");
  for(let i = 0; i < checkboxEls.length; i++){
    checkboxEls[i].checked = true; //강제로 체크박스 모두 체크된 상태로 바꾸기
  }
</script>

 

● 라디오버튼 다루기

여러 개의 항목 중 하나만 선택하게 할 때 사용하는 폼 요소입니다(중복선택 x)

라디오버튼은 체크박스와 같은 방식으로 값을 다룹니다.

<form>
  <label><input type="radio" name="fruits" value="apple">사과</label>
  <label><input type="radio" name="fruits" value="banana">바나나</label>
  <label><input type="radio" name="fruits" value="orange">오렌지</label>
  <label><input type="radio" name="fruits" value="melon">멜론</label>
</form>

* 선택된 상태로 만드는 방법

<form>
  (중략)
</form>
<script>
  const radioEls = document.querySelectorAll("[type='radio']");
  for(let i = 0; i < radioEls.length; i++){
    if(radioEls[i].value === 'banana'){
      radioEls[i].checked = true;
    }
  }
</script>

 

● 콤보박스 다루기

select 태그로 만드는 콤보박스는 여러 항목에서 하나를 선택하는 형태의 폼 요소

selected 속성으로 선택 항목을 확인할 수 있습니다.

<form>
  <select>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="orange">오렌지</option>
    <option value="melon">멜론</option>
  </select>
</form>

 

 

<form>
  (중략)
</form>
<script>
  const optionEls = document.querySelectorAll("option");
  for(let i = 0; i < optionEls.length; i++){
    if(optionEls[i].value === 'banana'){
      optionEls[i].selected = true;
    } 
  }
</script>

 

● 파일 업로드 요소 다루기

 

파일 업로드 요소는 input 태그의 type 속성값을 file로 지정하면 표시되는 요소

<form name="frm">
  <input type="file" name="upload">
</form>


// console창 입력 코드
//const filesObj = document.frm.upload.files;
//console.log(filesObj);

파일 업로드 요소에서 핵심은 files 속성으로 반환되는 FileList 객체입니다. 

 FileList 객체는 파일 업로드 요소로 선택한 파일에 대한 다양한 정보를 담고 있는 객체

const files = document.frm.upload.files;
files[0].name; // 파일 이름
files[0].size; // 파일 크기
files[0].type; // 파일 타입
files[0].lastModifiedDate; // 파일 마지막 수정일

폼 요소 관련 기타 메서드

메서드	설명
submit()	폼 요소의 값을 전송(submit)합니다.
focus()	폼 요소에 포커스(커서)를 이동합니다.

HTMLFormElement - Web APIs | MDN (mozilla.org)

 

---

 

6. 이벤트 다루기

이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미합니다. 이벤트가 발생하면 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있습니다.

 

1) 이벤트 종류

구분	이벤트	설명
마우스 이벤트	onclick	마우스로 클릭하면 발생합니다.
	ondblclick	마우스로 빠르게 두 번 클릭하면 발생합니다.
	onmouseover	마우스 포인터를 올리면 발생합니다.
	onmouseout	마우스 포인터가 빠져나가면 발생합니다.
	onmousemove	마우스 포인터가 움직이면 발생합니다.
	onwheel	마우스 휠(wheel)을 움직이면 발생합니다.
키보드 이벤트	onkeypress	키보드 버튼을 누르고 있는 동안 발생합니다.
	onkeydown	키보드 버튼을 누른 순간 발생합니다.
	onkeyup	키보드 버튼을 눌렀다가 뗀 순간 발생합니다.
포커스 이벤트	onfocus	요소에 포커스가 되면 발생합니다.
	onblur	요소가 포커스를 잃으면 발생합니다.
폼 이벤트	onsubmit	폼이 전송될 때 발생합니다.
리소스 이벤트	onload	웹 브라우저의 리소스 로드가 끝나면 발생합니다.

 

2) 이벤트 등록하기

이벤트가 발생할 때 어떤 작업을 할지 자바스크립트 코드로 작성하는 것을 이벤트 등록

 

● 인라인 방식으로 이벤트 등록하기

 HTML 태그에 속성으로 이벤트를 등록하는 방법

 

● 프로퍼티 리스너 방식으로 이벤트 등록하기

프로퍼티 리스너(property listener)는 요소 노드에 직접 속성으로 이벤트를 등록하는 방법입니다. 

 

<button>클릭</button>
<script>
  const btnEl = document.querySelector("button");
  btnEl.onclick = function(){
    alert("click");
  }
</script>

 

● 이벤트 등록 메서드로 이벤트 등록하기

DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트를 등록할 수도 있습니다. 3가지 방법 중 가장 권장하는 방식입니

<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);

<button>클릭</button>
<script>
  const btnEl = document.querySelector("button");
  btnEl.addEventListener("click", function(){
    alert("button Click");
  });
</script>

 

---

7. 이벤트 객체와 this

이벤트 객체는 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어 있는 객체 집합이라고 생각하면 됩니다. 이벤트 객체는 개발자가 직접 생성하는 것이 아니라 이벤트가 발생하면 실행되는 함수의 매개변수로 같이 전달

 

1) 이벤트 객체 사용하기

PointerEvent 객체의 주요 속성

속성	설명
clientX	마우스가 클릭된 x좌표(수평 스크롤 포함 X)
clientY	마우스가 클릭된 y좌표(수직 스크롤 포함 X)
pageX	마우스가 클릭된 x좌표(수평 스크롤 포함 O)
pageY	마우스가 클릭된 y좌표(수직 스크롤 포함 O)
screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표

KeyboardEvent 객체의 주요 속성

속성	설명
keyCode	키보드에서 눌린 키의 유니코드 값을 반환합니다.
ctrlKey	Ctrl 키가 눌렸으면 true, 그렇지 않으면 false를 반환합니다.
altKey	Alt 키가 눌렸으면 true, 그렇지 않으면 false를 반환합니다.
shiftKey	Shift 키가 눌렸으면 true, 그렇지 않으면 false를 반환합니다.

2) 이벤트 취소하기

HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있습니다. 대표적으로 a 태그와 form 태그가 그렇습니다. a 태그는 생성된 요소를 클릭하면 다른 페이지로 이동하도록 클릭 이벤트가 연결된 상태입니다. form 태그는 폼 내부에서 버튼이 눌리면 전송되도록 전송 이벤트가 연결된 상태입니다.

그런데 preventDefault() 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있습니다

<a href="https://www.naver.com">네이버 이동</a>
<a href="https://www.daum.net">다음 이동</a>
<script>
  const aEls = document.querySelectorAll("a");
  for(let i = 0; i < aEls.length; i++){
    aEls[i].addEventListener("click", function(e){
      // 기본 이벤트 취소
      e.preventDefault();
    });
  }
</script>

 

3) this 키워드 사용하기

이벤트 함수 내부에서 this 키워드를 참조하면 이벤트를 발생시킨 요소 노드를 가리킵니다.

전체 요소가 아닌 그 때 그 때 들어오는 값을 독립적으로 개체를 움직이고 싶을 때 this를 사용

<script>
  const pEls = document.querySelectorAll("p");
  pEls.forEach((el) => {
    el.addEventListener("click", function(){
      if(this.style.color === 'red'){
        this.style.color = 'black';
      }else{
        this.style.color = 'red';
      }
    });
  })
</script>

※  this 키워드를 사용할 때 한 가지 주의할 점

이벤트 함수를 화살표 함수로 작성하면 this의 범위가 달라져서 this가 이벤트 발생 노드를 가리키지 않습니다

target 속성을 사용해야 합니다. target 속성은 이벤트 발생 노드를 가리키는 이벤트 객체의 속성입니다.

전역함수 윈도우로 되어있어서 안돼