본문 바로가기

HTML+CSS+Javascript30

12. HTML 문서의 동적 구성 이미 로드가 완료된 HTML문서에도 새로운 HTML 코드를 추가할 수 있다. 이를 가능하게 해주는 프로퍼티가 createElement 이다. DIV 객체를 동적으로 생성,삽입,삭제하는 예제 DIV 생성 다음처럼 DIV 버튼을 누르면 새로운 div가 생성되게 된다. 즉, 새로운 태그가 생기게 된다. 2020. 3. 13.
11. document 앞서 자바스크립트를 처음 할 때 언급했지만, 자바스크립트는 하나의 큰 class 이다. 그렇기에 우리가 document.프로퍼티를 적용할 수 있는 이유는 document=new document 가 이미 실행되어 있기 때문이다. 여기서 알 수 있는 점은 document 라는 태그는 문서를 아우르는 최상위 태그라고 볼 수 있다. document 객체가 사용하는 프로퍼티와 메소드는 다음과 같다 - 프로퍼티 location url 정보를 가진 파일의 레퍼런스 정보 domain 도메인 이름 referrer HTML을 로드한 원래 문서의 url 문자열 cookie 쿠키 lastModified 문서의 최근 수정 시간 readyState 문서의 현재 로딩상태를 나타냄 title 문서의 제목 body body객체 hea.. 2020. 3. 13.
10. DOM 객체 다루기 - DOM객체의 CSS3 스타일 동적 변화 DOM객체의 스타일은 DOM 객체의 style 프로퍼티로 접근할 수 있다. 단, DOM 객체를 이용할 때는, background-color 처럼 (-)를 사용하지 않고 backgroundColor 등으로 표현한다. CSS스타일 동적 변경 이것은 문장입니다. 다음과 같이 getElement속성으로 아이디를 한정하고, 아이디 내부의 span 객체 프로퍼티를 설정해서 CSS 스타일을 변경할 수 있다. -DOM 객체의 innerHTML 프로퍼티 innerHTML을 이용하면 태그 사이의 HTML을 컨텐츠를 읽을 수 있게 해준다. Document 여기에 클릭하세요. onclick 이벤트가 일어나면 innerHTML을 이용해 p내부의 컨텐츠를 읽어내고, p태그의 컨텐츠를 변.. 2020. 3. 12.
9. HTML DOM 개요 브라우저는 HTML 페이지를 로드할 때 각 태그를 하나의 객체로 만든다. 이 태그를 동적으로 제어하기 위해서 HTML DOM을 사용한다. 이를 이용해 HTML 태그가 출력된 모양과 컨텐츠를 제어한다. 즉, DOM 객체를 이용해 CSS3를 바꾸면 태그의 스타일을 동적 제어할 뿐만 아니라, DOM 각체를 통해 HTML 콘텐츠, 즉 텍스트나 이미지를 제어하는 것도 가능하다. 따라서, HTML DOM의 종류는 HTML 태그의 종류만큼 있다. 하지만 document 객체는 DOM 객체가 아니다. 즉, HTML 태그에서 확장되어 HTML DOM은 부모자식간의 속성과 객체에 대한 프로퍼티가 추가된다. 태그로 예시를 보면, 이것은 문장입니다. var p=document.getElementById("firstP"); v.. 2020. 3. 12.
반응형

티스토리툴바