DOM제어
-
자바스크립트 이벤트 핸들링 연습1JavaScript 2020. 9. 11. 21:14
🎯 자바스크립트 DOM level0 이벤트 핸들링 문제를 연습해본다. 이벤트 핸들링 문제연습 1. 사용중인 웹 브라우저 정보 출력하기 [보기]버튼을 클릭하면 브라우저 이름,브라우저 버전, 브라우저 온라인 여부를 출력한다. 사용중인 웹 브라우저 정보 보기 보기 브라우저 이름: 브라우저 버전: 브라우저 온라인 여부: 보기 버튼은 클릭이벤트로 info()함수를 호출한다. 자바스크립트의 info 함수는 span영역과 input 값을 셀렉해서 브라우저 정보를 입력한다. 브라우저 정보는 브라우저 관련 Navigator 객체를 사용하면 된다. 2. 특정 URL 접속하기 태그를 사용하지 않고 자바스크립트 코드를 사용하여 특정 URL로 접속해야 한다. [구글 사이트로 가기]버튼을 클릭하면 구글 홈페이지로 접속되고 사이트..
-
자바스크립트 DOM 객체 제어JavaScript 2020. 9. 9. 07:48
🎯 자바스크립트 DOM 구조, 노드 객체 접근방법을 알아본다. DOM( Document Object Model ) 웹페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조이며 문서를 나타내는 최상위 객체는 document 객체이다. 자바스크립트를 사용하여 html 태그에 접근할 수 있다. 웹페이지가 로드될 때, 웹브라우저는 페이지의 DOM을 생성하고 트리구조로 관리한다. 각 객체를 노드라고 한다. 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다. 노드 속성과 메소드 자바스크립트를 이용해 페에지의 모든 태그, 속성, CSS스타일을 변경할 수 있고 이벤트 처리가 가능하다. 부모와 자식노드 관계 DOM 객체에 직접 접근하기 getElementById() - id 값으로 접근한다. document.getEl..