DOM(Document Object Model)

1.정의

  • 웹 브라우저가 HTML이나 XML 문서를 인식하는 방식 : 문서의 구조를 트리 형태로 펼쳐 놓은 것
  • document 객체와 관련된 객체의 집합: body 태그 내에 존재하는 태그
  • body 태그: document.body

2.document 객체의 프로퍼티 나 메소드

document.body: body 태그
document.innerHTML: body 태그 내의 내용 - HTML을 기재하면 body 태그에 출력
document.write 나 writeln(HTML 내용): innerHTML 속성에 기재한 것과 동일한 효과
document.referrer: 이 URL에 어떻게 접근했는지를 저장하고 있는 속성, 마케팅에서 중요한 속성

  • 웹 사이트의 메인 페이지에 어떻게 접속했는지 어떤 페이지에 어떻게 접속했는지를 아는 것은 웹 로그 분석에서 가장 중요한 이슈 중의 하나
  • 이러한 데이터를 수집해서 대시보드에 출력할 수 있도록 해주는 솔루션 중의 하나가 구글 애널리틱스입니다.

3.document 객체를 이용한 문서 객체(태그) 가져오기

document.getElementById(id): id를 가진 객체 1개를 리턴 - 가장 권장
document.getElementsByName(name): name을 가진 객체를 배열로 리턴
document.getElementsByTagName(tag): tag을 가진 객체를 배열로 리턴
document.getElementsByClassName(class): class를 가진 객체를 배열로 리턴

document.폼이름.요소이름 으로 폼의 요소에 접근 - 최근에는 권장하지 않음

document.getElementById(select 의 id).options[index]를 이용해서 select의 각 옵션에 접근할 수 있고 document.getElementById(select 의 id).options[document.getElementById(select 의 id).selectedIndex]

  • 최근의 html을 구현할 때 테이블에 출력할 수 있는 개수를 선택하도록 하는 경우가 많습니다.
  • select에서 선택한 데이터를 찾아올 수 있어야 합니다.

4.DOM 객체의 속성 사용

1) 속성 변경
DOM객체.속성이름 = 값;

img 태그의 이미지 파일 경로 변경

img객체.src = "이미지 파일 경로";

2) 스타일시트 값 변경
DOM객체.style.속성이름 = 값;

3) 태그 내용 변경
DOM객체.innerHTML = 값;

4) 폼의 입력 객체들의 값을 변경하거나 가져올 때는 value 속성 이용
DOM객체.value

5) body 태그의 내용을 자바스크립트에서 수정할 때는 태그의 내용이 먼저 나오고 스크립트가 나와야 합니다.

  • 스타일시트는 body에 내용을 전부 읽고 화면에 출력할 때 적용되기 때문에 style은 body 태그의 내용이 나오기 전이나 후 상관이 없습니다.

DOM 객체의 이벤트 처리

1.event

  • 사용자나 시스템이 다른 것에 영향을 미치는 사건
  • input 객체 안에서 사용자가 키보드를 누르는 것 등

2.javascript 의 이벤트

  • 마우스 이벤트
  • 키보드 이벤트
  • DOM 객체 관련 이벤트
  • 기타 이벤트

3.이벤트 처리 방식

1) 인라인 방식
<태그 on이벤트이름="이벤트 처리 내용"></태그>

2) 스크립트 안에서 작성 - 고전적 이벤트 처리 

DOM객체.on이벤트이름 = function(매개변수){
    이벤트 처리 내용;
}

3) 스크립트 안에서 작성 - 표준 이벤트 모델 

DOM객체.addEventListener("이벤트이름", function(매개변수){
    이벤트 처리 내용;
});

<body>
    <span id="disp">텍스트</span>
    <!-- 인라인 이벤트 모델: 태그 안에서 이벤트 처리
    태그에 스크립트 코드가 알아보기가 어렵고(유지보수가 어려움) 길게 작성하기가 어려움 -->
    <input type="button" id="stylebtn" value="글자색상변경" 
    onclick="document.getElementById('disp').style.color='red';"/>


    <input type="button" id="contentbtn" value="텍스트 내용 변경"/>
    <input type="button" id="standardbtn" value="내용과 스타일 변경"/>

    <script>
        //DOM 객체 찾기
        var disp = document.getElementById("disp");
        var contentbtn = document.getElementById("contentbtn");
        var standardbtn = document.getElementById("standardbtn");

        //고전적 이벤트 처리 모델 - 이전에도 많이 사용했고 최근에도 많이 사용
        contentbtn.onclick = function(e){
            //태그 안의 내용 변경
            disp.innerHTML = "변경된 텍스트";
        };
        //표준 이벤트 처리 모델 - W3C에서 권장
        standardbtn.addEventListener("click", function(e){
            disp.innerHTML = "표준 이벤트 모델";
            disp.style.backgroundColor = "papayawhip";
        });
    </script>
</body>

4.이벤트 처리 함수에 넘어가는 데이터

1) this: 이벤트가 발생한 객체로 별도의 설정없이 바로 사용 가능

2) 이벤트 처리함수의 매개변수

  • 매개변수가 1개가 넘어가는데 이 매개변수가 이벤트 처리 객체
  • 이벤트에 대한 정보를 가지고 넘어갑니다.
  • 이벤트 처리 객체는 브라우저 별로 다르게 가져와서 사용합니다.
  • 웹 클라이언트에서는 IE를 고려해야 합니다.
  • IE에서는 window.event로 가져오고 나머지 브라우저에서는 이벤트 처리함수의 매개변수를 이용
function(e){
    //e가 true이면 e를 대입하고 아니면 window.event를 대입
    //숫자 0이나 객체가 null 이면 false로 간주
    //python이나 javascript 와 같은 script 계열(R, Kotlin, Swift 등)의 언어에서 많이 등장하는 방법
    var e  = e || window.event;
}

3) 이벤트 처리 객체의 속성

  • data: 드래그 앤 드랍을 했을 때 드랍되는 데이터
  • modifier: 같이 누른 조합키
  • screenX, screeeY: 이벤트가 발생한 좌표 - 마우스 이벤트에서 이용
  • which: 키보드이벤트에서 누른 키보드의 ascii 코드 값

5.이벤트 트리거

  • 객체의 이벤트를 강제로 발생시키는 것
  • 객체.on이벤트명() 으로 이벤트를 강제로 발생시킬 수 있습니다.

6.DefaultEvent

  • 일부 객체는 기본적인 이벤트 처리 코드가 포함되어 있습니다.
  • a 태그는 클릭을 하면 href 속성에 대입된 URL로 이동
  • submit 은 form의 데이터를 서버에게 전송합니다.
  • reset은 form의 데이터를 삭제

  • <button> 태그로 만들어지 버튼은 form안에 있는 경우 submit으로 동작

  • 기본 이벤트 처리 코드를 동작하지 않도록 하고자 할 때는 이벤트 처리 객체가 preventDefault() 메소드를 호출하면 됩니다.

7.이벤트 버블 방지

  • 포함하고 있는 객체와 포함된 객체에 이벤트 처리 코드가 모두 작성된 경우 포함된 객체에서 이벤트가 발생하는 경우 포함하고 있는 객체의 이벤트 발생을 Event Bubbling 이라고 합니다.
  • 자바스크립트에서는 이벤트 버블링을 방지하기 위해서는 IE에서는 이벤트 처리 객체의 cancelBubble 이라는 속성에 true를 대입하면 되고 그 이외의 브라우저는 stopPropagation()이라는 함수를 호출하면 됩니다.

8.이벤트 종류

1) click : 마우스로 클릭

2) dblclick : 더블 클릭

3) keyboard 이벤트

  • keydown -> keypress ->keyup
  • 키보드를 누르면 keydown 과 keyup이 호출
  • 문자 키를 누르고 누르고 있는 경우에 keypress 이벤트가 발생합니다.
  • 이벤트 객체의 which 속성이 누른 키값을 리턴하는데 이 속성이 없으면 keyCode 속성을 이용해서 누른 키값을 가져옵니다.

4) mouse 이벤트

  • mousedown, mousemove, mouseout(마우스 영역 바깥으로 나갈 때), mouseover(마우스가 영역 안으로 들어온 경우), mouseup

5) move 와 resize

  • move 나 resize는 window객체나 frame 객체에 발생하는 것으로 이동하거나 크기가 변경되었을 때 발생하는 이벤트

6) 포커스 관련 이벤트

  • 포커스를 가졌을 때 발생하는 이벤트: focus, focusin
  • 포커스를 잃어버릴 때 발생하는 이벤트: blur, focusout - id 입력란에서 포커스를 잃어버릴 중복검사를 수행하는 경우가 많습니다.

7) change

  • 선택 가능한 객체들에서 선택을 변경했을 때 호출되는 이벤트

8) unload 와 load 이벤트

  • load 는 window 나 file, image 객체들에서 내용을 읽고난 후 발생하는 이벤트
  • window.load는 모든 태그를 읽고 난 후 발생하는 이벤트
  • 이 이벤트를 처리하는 코드는 모든 태그를 인식하고 난 후 수행
  • script를 body 위에 작성하는 경우
window.addEventListener("load", function(e){
}) 또는
window.onload = funcation(e){
}

  • 모든 태그를 읽어냈기 때문에 document.getElementById(id)로 모든 태그를 가져올 수 있습니다.

  • file을 읽는 이벤트는 비동기적으로 동작
    file의 내용을 읽어서 어딘가에 출력하고자 하는 경우 읽기 메소드를 호출하고 load 이벤트 처리 코드 안에 작성해야 합니다.
    file을 읽는 메소드를 호출하고 바로 출력하는 메소드를 호출하면 파일의 내용은 아직 읽지 못한 상태일 가능성이 높아서 출력되지 않습니다.

  • window.unload는 브라우저가 닫힐 때 발생하는 이벤트
    서버에서 세션과 쿠키의 개념을 사용하는데 보통 사용자가 더이상 서버에 접속되어 있지 않으면 세션을 소멸시켜야 하는데 브라우저가 강제로 닫히는 경우 서버의 이벤트로는 감지할 수 없습니다.
    unload 이벤트와 ajax를 이용해서 처리해야 합니다.

9) submit 과 reset

  • form에서만 발생하는 이벤트로 submit은 submit 버튼을 누른 경우이고 reset은 reset 버튼을 누른 경우에 발생하는 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 이벤트 처리</title>
<script>
//window가 로드 되면 function을 수행
//window가 load 된다는 것은 태그를 전부읽고 메모리에 올리고 난 후
window.addEventListener('load', function(e){
    var n = document.getElementById("name");
    n.value="이름을 입력하세요!"

    //포커스가 생길 때
    n.addEventListener("focusin", function(e){
        this.style.backgroundColor = "papayawhip";
    });
    //포커스가 없어질 때
    n.addEventListener("focusout", function(e){
        this.style.backgroundColor = "white";
    });
    //키보드를 눌렀을 때 누른 키 값을 대화상자에 출력
    n.addEventListener("keydown", function(e){
        //이벤트 객체 만들기
        var e = window.event || e;
        //누른 키 값 가져오기
        //IE가 아닌 경우는 이벤트 객체의 which 속성으로 그리고 IE 이면 keyCode 속성으로 누른 키값을 가져옵니다.
        var code = e.which ? e.which : e.keyCode;
        alert(code)
    })
});
</script>
</head>
<body>
    <input type="text" id="name" size="20"/>
    <input type="text"  size="20"/>
</body>
</html>

results matching ""

    No results matching ""