[JavaScript] DOM

 

 

 

DOM : Document Object Model. 웹 페이지를 객체로 접근한다.

 

 

 

 

자바스크립트로 HTML DOM 요소에 접근해 값을 변경할 때 사용된다.

위의 계층 구조를 기억하자. 루트 - 엘리먼트 - 텍스트 / 노드들의 관계를 알아두자.+ attribute 텍스트 노드는 항상 자식이다.

 

크롤링 할 때 하던거처럼 DOM요소에 접근한다.

 

nodeName / nodeValue / nodeType 잘 써먹기

appendChild 메서드로 텍스트와 태그를 붙일 수 있음

insertBefore 메서드로 부모의 특정 태그 앞에 태그를 붙일 수 있음

remove와 replace 사용해서 HTML조작 가능

 

nodelist는 인덱스로만 접근 가능, 배열은 id class값으로도 접근 가능 

 

 

JS로 form validation 수행 가능

HTML만으로도 가능하긴 함 required 사용

당연히 서버 쪽에서 검증하는거도 가능. 스프링 할 때 배웠듯 둘 다 해야됨.

 

js에도 this 쓸 수 있음.

navigator 객체는 브라우저가 어떤 요소를 가지고 있는지 담고 있음 (BOM)

 

addEventListner로 이벤트 정의하기. DOM은 하나에 함수 하나지만 aEL은 여러개 정의 가능

위의 함수에서 마지막 파라미터로 true나 false를 넣을 수 있음. 생략 시 false 기본값

false는 event bubbling / true는 event capturing

 

버블링은 부모 함수도 같이 실행되고, 캡쳐링은 자기꺼만 실행

버블링은 함수를 안에서부터 전파하는거로 생각하기

 

익명함수를 쓸 때 파라미터가 있으면 좀 다르게 써야함