자바스크립트 중급편 문서 객체 모델(DOM)

안녕하세요 홍가 입니다.

오늘은 문서 객체 모델에 대해 글을 작성하려고 합니다.

 

 document기능 및 구조를 알아보기 위해 작성을 해보았습니다.

 

이런식으로 구조가 잡혀있으며 부모 자식을 알 수 있습니다. 

 

큰 사진과 작은 사진을 나눠서  제품을 보여주게 만들었습니다.

querySelectorAll을 사용하여 for문을 썻습니다. 

 

이미지를 클릭하면 이미지가 교체 되도록 만들었습니다.

getElementById부분과 querySelector의 차이는 ById는 id선택자만 Selector은 class, id등 상관없이 선택이 가능합니다.

그래서 selector은 ById에 비하여 속도가 느리다는 단점이 있습니다.

 

아까 위에서 본 부분에 상세 설명 보기를 클릭 시 상세 설명이 나타나도록 했습니다.

콜백함수를 사용하여 자바스크립트의 단점인 비동기 처리 방식을 해결 하였습니다.

 

도형 위로 마우스 포인터를 올려놓으면 도형이 동그라미가 되도록 만들었습니다. 

자바스크립트서 변수.스타일.적용하고싶은 내용을 작성하면 자바스크립트 내에서 css사용이 가능합니다.

 

신청 리스트를 만들었습니다. 이름을 입력하고 신청 버튼을 클릭시 밑에 내용이 저장되며 X를 클릭시 삭제가 됩니다.