HTML과 자바스크립트¶

DOM¶

DOM은 Document Object Model의 약자로 문서 객체 모델로 번역을 합니다. DOM은 HTML 또는 XML 문서에 대한 프로그래밍 인터페이스를 제공합니다. DOM은 자바스크립트 또는 파이썬 등의 프로그래밍 언어들이 웹문서들을 다룰 수 있는 도구들을 제공합니다.

브라우저가 웹문서(HTML)을 읽어 파싱하여 DOM 객체로 변경하면 자바스크립트와 같은 언어들이 DOM 객체에 접근할 수 있게 됩니다.

자바스크립트가 DOM 객체에 접근하는 일반적인 방법은 웹페이지에 <script> 태그를 이용하는 것입니다. window 객체를 통하여 브라우저를 다룰 수 있고 document를 이용해서 웹페이지 DOM 을 다룰 수 있습니다. document는 window.document 와 같습니다.

HTML 요소 찾기¶

메소드	설명
getElementById()	id를 이용해 하나의 HTML 요소를 찾습니다.
getElementsByTagName()	태그 이름을 이용해 여러 개의 HTML 요소들을 찾습니다.
getElementsByClassName()	클래스 이름을 이용해 여러 개의 HTML 요소들을 찾습니다.
querySelectorAll()	CSS 선택자를 이용해 여러 개의 HTML 요소들을 찾습니다.
getElementsByName()	이름을 이용해 여러 개의 HTML 요소들을 찾습니다.
getElementsByTagNameNS()	주어진 이름공간에 속해있는 태그 이름을 갖는 요소들을 찾습니다.

document.getElementById("id_name");

HTML 요소를 만들기¶

document.createElement("Button");

HTML 요소에 속성 설정하기¶

Element.setAttribute(name, value)

HTML 요소 부모에 추가하기¶

Node.insertBefore() 함수를 이용해서 요소를 추가할 수 있습니다.

parentNode.insertBefore(newNode, referenceNode)

parentNode는 새롭게 추가될 newNode의 부모 노드를 의미합니다.
newNode는 referenceNode의 앞에 삽입될 새로운 노드입니다. newNode가 이미 다른 부모를 가지고 있는 기존의 노드라면 기존 부모 노드로부터 자동으로 제거되고 추가하려는 부모 노드인 parentNode에 삽입이 됩니다.
referenceNode는 newNode가 referenceNode의 앞에 추가될 parentNode의 자식노드를 의미합니다.

다음은 body 요소 안에 elmt 앞에 div 요소를 추가합니다. elmt는 body의 자식이어야 합니다.

elmt = document.getElementById("color");
div = document.createElement('div');

document.body.insertBefore(div, elmt);

또는 parentNode.append(), element.appendChild() 메소드들을 이용할 수 있습니다.

이벤트(Event)¶

DOM Event는 리소스, 네트워크, 포커스, 웹소켓, 세션 기록, CSS 애니메이션, CSS 트랜지션, 폼, 프린팅, 텍스트 컴포지션, 뷰, 클립보드, 마우스, 드래그 앤 드랍, 미디어, 프로그래스, 스토리지, 업데이트, 값 변경 등의 이벤트가 존재합니다.

이벤트는 요소(element)에 할당하며 이벤트가 할당된 요소에 해당 이벤트가 발생하면 지정된 함수를 이용해 반응을 할 수 있습니다.

마우스 이벤트¶

요소의 속성으로 정의¶

요소의 속성으로 이벤트와 이벤트 함수를 정의할 수 있습니다. 요소의 속성으로 정의할 때는 이벤트 타입에 on을 앞에 붙여 사용합니다.

다음은 <p> 요소에 onmousedown 이벤트와 onmouseup 이벤트를 추가하고 각각 mouseDown() 함수와 mouseUp() 함수를 할당한 것입니다.

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">

다음과 같이 mouseDown과 mouseUp 함수는 스크립트에 정의되어 있어야 합니다.

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}

function mouseUp() {
  document.getElementById("myP").style.color = "green";
}
</script>

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<body>

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
현재 텍스트 문단을 마우스로 누르고 있으면 색깔이 빨간색으로 바뀌고, 마우스 클릭을 놓으면 초록색으로 바뀝니다.
</p>

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}

function mouseUp() {
  document.getElementById("myP").style.color = "green";
}
</script>

</body>
</html>

자바스크립트에서 정의¶

자바스크립트에서 요소를 찾은 후 그 요소에 이벤트를 추가할 수 있습니다.

다음은 자바스크립트 안에서 getElementById 메소드를 이용해서 <p> 요소를 찾은 후 onmousedown 이벤트를 추가하는 예제입니다. 이벤트에 함수를 정의해서 이벤트에 묶인 함수가 실행될 때 mouseDown() 함수가 실행되는 코드입니다.

<!DOCTYPE html>
<html>
<body>

<p id="demo">여기를 눌러 주세요.</p>

<script>
document.getElementById("demo").onmousedown = function() {mouseDown()};

function mouseDown() {
  document.getElementById("demo").innerHTML = "마우스 버튼을 눌렀습니다.";
}
</script>

</body>
</html>

addEventListener를 이용¶

addEventListener() 메서드는 지정한 이벤트가 타겟에 전달될 때 마다 호출될 함수를 설정합니다. 일반적인 타겟은 Element, Document, Window 지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 타겟일 수 있습니다.

addEventListener를 이용할 때 onmousedown이 아니라 mousedown임을 구분하시기 바랍니다.

<!DOCTYPE html>
<html>
<body>

<p id="demo">여기를 눌러 주세요.</p>

<script>
document.getElementById("demo").addEventListener("mousedown", mouseDown);

function mouseDown() {
  document.getElementById("demo").innerHTML = "마우스 버튼을 눌렀습니다.";
}
</script>

</body>
</html>

마우스 이벤트 성질 및 메소드¶

마우스와 관련된 성질과 메소드들은 다음과 같습니다.

성질/메소드	설명
altKey	마우스 이벤트가 발생했을 때 Alt 키가 눌렸는지를 반환합니다.
button	마우스 이벤트가 발생했을 때 어떤 마우스 버튼이 눌렸는지를 반환합니다.
clientX	마우스 이벤트가 발생했을 때 마우스 포인터의 현재 윈도우를 기준으로한 상대적인 가로 좌표를 반환합니다.
clientY	마우스 이벤트가 발생했을 때 마우스 포인터의 현재 윈도우에 기준으로한 상대적인 세로 좌표를 반환합니다.
screenX	마우스 이벤트가 발생했을 때 컴퓨터 스크린을 기준으로한 가로 좌표를 반환합니다.
screenY	마우스 이벤트가 발생했을 때 컴퓨터 스크린을 기준으로한 세로 좌표를 반환합니다.
offsetX	대상 요소의 끝을 기준으로한 상대적인 가로 좌표를 반환합니다.
offsetY	대상 요소의 끝을 기준으로한 상대적인 세로 좌표를 반환합니다.

mousedown 예제¶

<!DOCTYPE html>
<html>
<body>

<p id="demo">여기를 눌러 주세요.</p>

<script>
document.getElementById("demo").onmousedown = function() {mouseDown()};

function mouseDown() {
  document.getElementById("demo").innerHTML = "마우스 버튼을 눌렀습니다.";
}
</script>

</body>
</html>