[웹소프트웨어] Lec.8 JavaScript DOM

4/18, 20

 

DOM(Document Object Model)

- HTML 문서를 트리처럼 계층구조로 만든거.

- Document: 웹 브라우저에 로딩될 때, document 객체가 된다. html 객체는 또한 html 문서의 root이다.

- Property: 얻거나 바꿀 수 있는 값

- Method: HTML 요소로 할수 있는 action

변경-HTML 컨텐츠, 요소, 속성, CSS 스타일

추가-새로운 HTML 요소와 속성, HTML 이벤트

삭제-존재하는 HTML 요소와 속성

 

*HTMLCollection 객체

-getElementsBy~~ 들이 반환한다.

-배열 비슷한 리스트이다.

-인덱싱, length은 가능하지만, valueof(), pop(), push(), join()은 안된다.

*NodeList

- querySelectorAll()이 반환

-얘도 동일하게 배열 비슷한 리스트

 

 

DOM navigation

• 모든노드의 관계는 부모/자식/형제

그렇게 나오는게

부모노드/자식노드/첫자식/마지막자식/다음형제/이전형제/textContent/노드값/노드이름&노드타입(read-only)

 

document.createElement(element)/removeChild(element)/appendChild(element)/replaceChild(new, old)**(이거 순서 중요)

 

JS Events

onclick: 클릭 할 때

onchange: 변경되면

onmouseover/onmouseout: 마우스 포인터가 들어오면/나가면