정보보안공부
웹보안_6. HTML DOM/BOM 본문
<HTML DOM>
HTML DOM을 문서 객체 모델이라 하고, HTML에 대한 표준 객체 모델 및 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하면 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 그들의 문서 구조 및 스타일, 내용 등을 변경할수 있게 된다. HTML 요소를 가져오거나, 변경하거나, 추가하거나, 삭제하는 방법의 표준을 말한다.
#document
document 객체는 웹 페이지를 나타낸다.
document만 입력해보면 웹페이지의 구성을 알수있다.
이제 해당파일을 아래와같이 작성한뒤 DOM방식을 실습해보자.
실습하기위해서는 해당 자바스크립트 코드를 실행한 상태에서 요소들을 찾거나 변경 삭제 해야하기 때문에 웹브라우저에서 아래와같이 해당파일에 접근한다.
#getElementById
ID로 HTML 요소 찾기
id값은 무조건하나이므로 TagName과 ClassName과는 달리 요소가 배열이아니다.
#getElementsByTagName
태그 이름으로 HTML 요소 찾기
한가지 태그방식을 여러번 사용했을때 해당 태그에 관한요소는 배열로 나타낸다.
#getElementsByClassName
클래스 이름으로 HTML 요소 찾기
#innerText
요소의 내용을 가져오거나 바꾸는 데 유용하게 사용한다.
getElementsByTageName을 통해 요소를 찾고 innerText를 통해 요소를 변경시켰다.
<참고>
innerText와 innerHTML차이
innerText는 해당문자열에 태그를 포함한 내용을 출력시키고
innerHTML은 해당문자열에 태그를 적용시킨 내용만 출력시킨다.
#getAttribute
요소의 속성정보를 불러온다.
#setAttribute
요소의 속성을 변경할 수 있다.
#onmouseover / onmouseout
이벤트를 나타내는 한종류이다. 마우스의 위치에따라 이벤트가 발생한다. 아래와같이 코드를 작성한후 실행시키면 JavaScript부분에 마우스를 올려놓으면 Mouse_over, 마우스를 다른곳으로 이동하면 Mouse_out이 나타난다.
<실행했을때>
<마우스를 올려놓았을 때>
<마우스를 뗐을 때>
#onkeydown
키보드에서 입력받은 값을 숫자로 변환시켜 나타낸다.
event.keyCode를 통해 키보드를 누르면 해당문자에 숫자로 값이 변환된다.
String.fromCharCode(key)를 통해 key변수의 값을 다시 해당 문자로 바꿔주는 코드이다.
<HTML BOM>
HTML BOM을 브라우저 객체 모델이라 하고, 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다.
#window
브라우저 전체를 담당한다. document도 window객체 안에 들어있다.
window.open() : 새창을 연다.
window.open('주소') : 새탭으로 해당주소창 열기
window.open('주소', '_self') : 현재 탭에서 해당주소창 열기
window.open(' ', ' ', 'width=200, height=200') : 가로세로 200px의 팝업창
팝업창을 만들고 document를 이용해 작성할 수도 있다.
#history
앞으로가기 또는 뒤로가기를 할 수 있다.
뒤로가기
앞으로가기
뒤로 갈수 있는 페이지 개수
#location
주소에 대한 정보를 알려준다.
'정보보안 > 웹보안' 카테고리의 다른 글
| 웹보안_8. GET/POST방식 (0) | 2018.02.21 |
|---|---|
| 웹보안_7. php (0) | 2018.02.20 |
| 웹보안_5. Javascript문법 (0) | 2018.02.13 |
| 웹보안_4. 리눅스를 이용한 HTML과 간단한Javascript (0) | 2018.02.13 |
| 웹보안_3. HTML태그 (0) | 2018.02.12 |
