JS DOM, Event 복습!

 

 

 

 

 

 

HTML DOM

HTML DOM은 문서 객체 모델(Document Object Model)의 약자로, 웹 페이지의 구조화된 문서를 표현하고 프로그래밍 언어에서 조작할 수 있도록 제공되는 인터페이스를 말합니다. HTML 문서는 트리 구조로 이루어져 있으며, DOM은 이러한 트리 구조를 프로그래밍 언어에서 사용할 수 있는 객체 모델로 제공합니다.

 

HTML 요소 선택

1. getElementById:
   • 해당 메소드는 문서 내에서 특정 ID를 가진 요소를 선택합니다.
   • 예시: document.getElementById("myElementId")
2. getElementsByClassName:
   • 해당 메소드는 특정 클래스를 가진 모든 요소를 선택합니다.
   • 예시: document.getElementsByClassName("myClassName")
3. getElementsByTagName:
   • 해당 메소드는 특정 태그 이름을 가진 모든 요소를 선택합니다.
   • 예시: document.getElementsByTagName("p")
4. getElementsByName:
   • 해당 메소드는 특정 이름을 가진 모든 요소를 선택합니다.
   • 예시: document.getElementsByName("myName")
5. querySelector:
   • 해당 메소드는 CSS 선택자를 사용하여 문서 내에서 첫 번째로 일치하는 요소를 선택합니다.
   • 예시: document.querySelector("#myElementId")
6. querySelectorAll:
   • 해당 메소드는 CSS 선택자를 사용하여 문서 내에서 일치하는 모든 요소를 선택합니다.
   • 예시: document.querySelectorAll(".myClassName")
7. parentNode:
   • 해당 속성은 현재 요소의 부모 노드를 반환합니다.
   • 예시: myElement.parentNode
8. children:
   • 해당 속성은 현재 요소의 모든 자식 노드를 나타내는 HTMLCollection을 반환합니다.
   • 예시: myElement.children
9. nextSibling:
   • 해당 속성은 현재 요소의 다음 형제 노드를 반환합니다.
   • 예시: myElement.nextSibling
10. previousSibling:
    • 해당 속성은 현재 요소의 이전 형제 노드를 반환합니다.
    • 예시: myElement.previousSibling

 

HTML 요소의 내용 변경

<div id="myDiv">기존 내용</div>

<script>
  // JavaScript에서 내용 변경
  document.getElementById("myDiv").innerHTML = "새로운 내용";
</script>

 

 

HTML 이벤트 핸들러

 

onClick 이벤트: 사용자가 요소를 클릭했을 때 발생하는 이벤트입니다.

<button onclick="myFunction()">Click me</button>

<script>
  function myFunction() {
    alert("Button Clicked!");
  }
</script>

 

 

onChange 이벤트: 입력 요소의 값이 변경되었을 때 발생하는 이벤트입니다.

<input type="text" id="myInput" onchange="handleChange()">

<script>
  function handleChange() {
    var inputValue = document.getElementById("myInput").value;
    alert("Input value changed to: " + inputValue);
  }
</script>

 

onMouseOver 및 onMouseOut 이벤트: 마우스가 요소 위로 이동하거나 떠날 때 발생하는 이벤트입니다.

<div onmouseover="mouseOverFunc()" onmouseout="mouseOutFunc()">Hover me</div>

<script>
  function mouseOverFunc() {
    alert("Mouse over the div!");
  }

  function mouseOutFunc() {
    alert("Mouse out of the div!");
  }
</script>

onSubmit 이벤트: 폼을 제출할 때 발생하는 이벤트입니다.

<form onsubmit="submitForm()">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

<script>
  function submitForm() {
    alert("Form submitted!");
  }
</script>

addEventListener 메소드를 사용한 이벤트 처리: addEventListener 메소드를 사용하여 이벤트를 동적으로 처리할 수도 있습니다.

<button id="myButton">Click me</button>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
  });
</script>