day04[DOM]

DOM(Document Object Model) 객체
    HTML 태그들을 하나씩 객체화한 것.
    HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체이다.
    HTML 태그 당 DOM 객체가 하나씩 생성된다.
    HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다.

 

 

-----
for..in / for..of
in 뒤에 있는 자료구조의 key값을 i에 담을 수 있다.(lists가 배열형태니까 i가 인덱스임.)
of 뒤에 있는 자료구조의 value값을 list에 담을 수 있다.

prototype : 객체화 없이 static변수처럼 바로 필드에 접근할 때 사용
HTMLCollection.prototype.forEach = Array.prototype.forEach; //HTML객체에도 forEach쓰는 방법
(nodeList는 원래 forEach 쓸 수 있음. 구현되어 있음.)
-----
form태그에서는 name을 붙이면 바로 객체로 만들어짐.

html에서 checked를 쓰지 말고, 스크립트의 프로퍼티에서 true, false로 바꾸는 게 나음! 헷갈리니까, 스크립트하면 더 정확하고 편함.

HTML 태그에 checked 속성을 부여하면, js checked 프로퍼티를 false로 설정해도

checked 속성이 HTML 요소로 남아있다.
따라서 체크 여부를 검사할 때에는 js 프로퍼티로 검사하는 것이 정확하다.
-----
<객체를 동적으로 생성, 삽입, 삭제>

DOM 트리에 동적으로 객체를 삽입할 수 있다.
createElement("태그명"), appendChild("태그객체"), removeChild("태그객체")
위 3개 메소드를 이용해서 새로운 객체를 생성, 삽입, 삭제한다.
-----
부모의 10% 넓이, 10vw = 10%  
부모의 10% 높이, 10vh = 10%
-----
focus : 커서가 있는 곳에 위치
blur : 포커스아웃
-----