---

오늘 배울 내용

입력양식 데이터 검증

• 입력항목에 다양한 이벤트 처리

새창열기 / 창닫기

• 아이디 중복 검색
• 이미지 클릭 => 상세보기
  
  

---

DOM API

=> Id, class, tag-name으로 가져올건지 속성을 알고 있어야 함
=> Node(단일), NodeList(다중:배열), Element, Attr, Text


ES5
- id : document.getElementById("id-name"); => Node

- class : document.getElementsByClassName("class-name"); => NodeList

- tag-name : document.getElementsByTagName("tag-name"); => NodeList


ES6
- document.querySelector("selector"); => Node

- document.querySelectorAll("selector"); => NodeList

- id : document.querySelector("#id-name"); => Node
- class : document.querySelectorAll(".class-name"); => NodeList

- tag-name : document.querySelectorAll("tag-name"); => NodeList

DOM CSS(스타일) 적용

- style - lookup-object.style.property = "value" - property명 규칙 : font-size => fontSize

• css 사전 선언 하고 class로 지정해서 사용하는 방법
  - lookup-object.style.className = "class-name1 class-name2"
  
• 속성추가 : setAttribute("속성명", "속성값")
  - lookup-object.setAttribute("style", "font-size:12px; color:red;");
  
  

DOM 보이기 / 감추기 속성(property)

• Visibility : 영역은 유지한채 내용 (컨텐츠) 제거
  - visible
  - hidden

• display : 영역도 함께 제거
  - block
  - none
  
  

입력양식(form) 입력데이터 가져오기

• 입력데이터의 타입은 string => 데이터길이 : length 속성

• document.getElementById("form-id").input-name.value => input data

• document.form-name.input-name.value=> input data

• document.querySelector("#form-id").input-name.value => input data
  

• document.getElementById("input-id").value => input data

checkbox가 단일 항목 => Node
checkbox가 여러개 항목 => NodeList(배열)

폼양식 데이터 검증

1. submit

   • onclick="return 데이터검증함수명();"

   • function 데이터검증함수명() {
     if (데이터검증조건올바르지않으면) {
     ....
     return false;
     }

     ..
     }

비밀번호표시 체크박스 이벤트 처리

• 체크 on상태 : 비밀번호, 비밀번호 확인 type을 text로 바꿔주기
• 체크 off상태 : 비밀번호, 비밀번호 확인 type을 password로 바꿔주기

새창열기

window.open(URL, name, specs, replace)
(참고사이트) https://www.w3schools.com/jsref/met_win_open.asp

• spec 지정 방법
  => key=value, key=value
  => width=400, height=300, scrollbar=no
  
  

부모창 접근

window.opener.document....
(참고사이트)https://www.w3schools.com/jsref/prop_win_opener.asp