1. Dom

Document Object Model

• HTML 문서에 접근하기 위한 모델, 인터페이스
• 문서의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
• HTML을 컨트롤하기 위한 방법 그 자체를 기술한다 봐도 무방

Dom Tree

브라우저가 HTML 문서를 로드한 후 생성하는 모델
객체 트리로 구조화 되어 있어서 DOM tree라고 부른다

Dom Tree 노드 종류

• 문서노드
  • Document 객체 그 자체 (Domtree 시작점)
• 요소노드
  • HTML 요소들 (중첩에 의한 부자관계를 가짐)
  • 속성노드와 텍스트노드로 접근하기 위해선 요소노드에 먼저 접근
• 속성노드(어트리뷰트 노드)
  • 해당 HTML 요소의 속성을 표현하는 노드
• 텍스트노드(컨텐츠 노드)
  • 자신의 자식요소를 가질수 없는 HTML 요소의 컨텐츠

1. getElementById

id 속성값으로 요소 노드를 한 개 선택한다
복수개가 선택되면 가장 마지막 요소만 리턴
return : 해당 요소 그 자체

2. querySelector

요소노드를 1개 선택하는 document 객체의 메서드
요소의 선택

var elem = document.querySelector('li.red1');
// 클래스 속성의 값을 변경
elem.className = 'blue';

여러개의 요소 노드 선택

• getElementsByClassName(class)
  • 속성값으로 요소노드를 모두 선택
  • 공백으로 구분하여 여러개의 class를 지정할수 있음

• querySelectorAll

---

Dom 탐색하기

부모노드 탐색 : parentNode
자식노드 탐색 : firstChild, lastChild
형제노드 탐색: previousSibling, nextSibling, previousElementSibling, nextElementSibling

---

2. 속성노드로의 접근과 수정

className, classList

var test123 = document.querySelectorAll('li');

for(var i =0; i<test123.length; i++) {
    test123[i].classList.replace('red1', 'blue');
}
// 클래스 속성값 확인 contains()

// 클래스 속성값 변경 replace()

hasAttribute : 해당 속성이 있는지 검사

getAtrribute : 속성값을 가져옴

setAtrribute : 속성값 설정

removeAtrribute : 속성값 제거

attr Exam

버튼을 누를때마다 비밀번호와 텍스트로 바뀌게하라

var pw = document.querySelector('input[type=password]');
var showbtn = document.querySelector('.show'); // btn의 클래스 명을 지정해서 가져옴
console.log(showbtn)

var showIs =false; // 아래 선언한 지역변수는 t/f 값을 조정하면서 
                   //  text와 pw의 스위칭을 조정할 것 
function clickEvt() {
                      
    pw.setAttribute('type', showIs ? 'password' : 'text');
    // 전역변수 showIs를 false로 선언하여
    // 속성명 type을 삼항연산자함으로 false인 속성 값 text로 나온다 
    showIs = !showIs;
    // false를 true로 스위칭 해준다 
    showbtn.innerHTML = showIs ? 'hide' : 'show';                   
    // showIs가 true가 됨으로 hide로 이름을 바꿔준다