웹프로그래밍/JavaScript

프로그래밍 언어 응용 33일차 (24/12/26)

wkun 2024. 12. 26. 15:58

CONTENTS

 

JavaScript

12.DOM 문서객체

6)이벤트

7)HTML DOM 요소

8)DOM노드 탐색

9)HTML 요소(noes) 추가

10)HTML 요소(noes) 삭제

11)HTML 요소(noes) 변경

12)HTMLCollection

 

--------------------------------------------

 

JavaScript

 

12.DOM 문서객체

 

6)이벤트

-자바스크립트 사용의 궁극적인 목적은 동적 웹 페이지의 작성임. 따라서 사용자가 웹 페이지의 HTML 요소를 클릭하거나 마우스를 이동하는 등의 경우 이벤트가 발생하며, 이벤트가 발생하면 그에 반응하는 과정을 자바스크립트에 의해 처리할 수 있음

-사용자가  HTML 요소를 클릭할 때 코드를 실행하려면 자바스크립트 코드를 HTML 이벤트 속성에 추가함. 이벤트는 주로 다음의 경우에 발생함.

 

1.웹 페이지가 로드되었을 때

2.사용자가 마우스를 클릭하거나 요소 위로 또는 위에서 움직일 때

3.이미지가 로드되었을 때

4.입력 필드가 변경되었을 때

5.HTML 양식이 제출되었을 때

6.키보드를 사용할 때

 

◎이벤트 속성

-HTML 요소에  이벤트를 지정하기 위해  이벤트를 속성으로 사용함. 예를 들어 onclick 속성

 

event

  <h1 onclick="changeText(this)">Click on this text!</h1>
  <!-- 클릭한 요소의 DOM 객체 -->
  <!-- h1 태그에 이벤트 핸들러(onclick)을 두었다. -->
   <script>
    function changeText(id) {
      id.innerHTML = "Ooops!"
    }
   </script>

 

*DOM이벤트핸들링에서 this는 이벤트가 발생하는 요소를 가르킴(h1=this)

 

event2

  <button id="myBtn">Try it</button>
  <p id="demo"></p>
  <script>
    document.querySelector("#myBtn").onclick = displayDate;
    function displayDate() {
      document.querySelector("#demo").innerHTML = Date();
    }
  </script>

 

◎EventListener

-앞서 이벤트의 호출은 HTML에서, 정의는 자바스크립트에서 사용할 수 있음. 또한 자바스크립트의 EventListener를 이용하기도 함

HTML에서 <element onclick = "myScript">
자바스크립트에서 object.onclick = function() {myScript};
EventListener에서 object.addEventLisener("click", myScript)

 

EventListener

  Enter your name: <input type="text" id="fname">
  <script> //1.요소 선택하기 2.이벤트 할당하기 3.함수 정의하기
    //let x = documnet.querySelecor("#fname");
    //x.addEventListener("click", myFunction);                                                      
    document.querySelector("#fname").addEventListener("click", myFunction);
    function myFunction() {
      document.querySelector("#fname").style.backgroundColor = "red";
    }
  </script>

 

-이벤트: 처리해야할 특정 사건

-이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수

-이벤트 핸들러 등록하는 메서드: addEventListener()

 

◎addEventListener()

-기존 이벤트 처리기를 덮어 쓰지 않고 요소에 이벤트 처리기를 연결함. addEventListener() 메서드를 사용할 때 자바스크립트는 HTML 마크업과 분리되어 가독성을 높이고 HTML 마크업을 제어하지 않아도 EventListener를 추가할 수 있음. removeEventListener() 메서드로 이벤트 수신기를 제거도 가능함

element.addEventListener(event, function, useCapture);

 

event 매개변수에는 'on'접두어를 사용하지 않음. function은 이벤트가 발생할 때 호출할 함수임. useCapture는 이벤트 캡처 사용할지 여부를 지정하는 부울값으로 선택적으로 사용함

 

*하위 브라우저에서는 attachEvent(), detachEvent() 메서드를 사용하며 기능과 사용방법은 동일함

 

addEventListener

  <p>addEventListener</p>
  <button id="myBtn">Try it</button>
  <p id="demo"></p>
  <script>
    var x = document.querySelector("#myBtn");
    x.addEventListener("mouseover", firstFunction);
    x.addEventListener("click", secondFunction);
    x.addEventListener("click", thirdFunction);
    x.addEventListener("mouseout", forthFunction);

    function firstFunction() {
      document.querySelector("#demo").innerHTML+="Moused over!<br>";
    }
    function secondFunction() {
      alert("This function was also executed!");
    }
    function thirdFunction() {
      alert("Hello World");
    }
    function forthFunction() {
      document.querySelector("#demo").innerHTML+="Moused out!<br>";
    }
  </script>

 

◎addEventListener

마우스 이벤트 설명
click 마우스를 클릭했을 때 이벤트가 발생
dbclick 마우스를 더블클릭했을 때 이벤트가 발생
mouseover(mouseenter) 마우스를 오버했을 때 이벤트가 발생
mouseout(mouseleave) 마우스를 아웃했을 때 이벤트가 발생
mousedown 마우스를 눌렀을 때 이벤트가 발생
mouseup 마우스를 떼었을 때 이벤트가 발생
 mousemove 마우스를 움직였을 때 이벤트가 발생

 

키 이벤트 설명
keydown 키를 눌렀을 때 이벤트 발생
keyup 키를 떼었을 때 이벤트 발생(1번)
keypress 문자 키를 누른상태에서 이벤트 발생(연속적)
폼 이벤트 설명
focus 포커스가 이동되었을 때 이벤트가 발생
blur 포커스가 벗어났을 때 이벤트가 발생
change 값이 변경되었을 때 이벤트가 발생
submit submit 버튼을 눌렀을 때 이벤트가 발생
reset reset 버튼을 눌렀을 때 이벤트가 발생
select input나 textarea 요소 안의 텍스트를 드래그하고 선택하여 인벤트가 발생

 

로드, 기타 이벤트 설명
load(DOMContentLoaded) 로딩이 완료되었을 때 이벤트가 발생
abort 이미지의 로딩이 중단되었을 때 이벤트가 발생
resize 사이즈가 변경되었을 때 이벤트가 발생
scroll 스크롤바를 움직였을 때 이벤트가 발생

 

onload, onunload

<body onload="onLoadEvent();">
  <h1 id="id1">my head title</h1>
  <script>
    // document.body.addEventListener("load", onLoadEvent);
    function onLoadEvent() {
      document.body.style.backgroundColor = "red";
    }
  </script>  

 

onchange

  enter your name: <input type="text" id="fname" onchange="myFunction()">
  <!-- <input type="text" id="fname"> -->
  <p>transforms</p>
  <script>
    // document.querySelector("#fname").addEventListener("change", myFunction);
    function myFunction() {
      var x = document.querySelector("#fname");
      x.value = x.value.toUpperCase();
    }
  </script>

 

onmouseover/onmouseout

  <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: #d94a38; width: 120px; height: 20px; padding: 40px;">
    frist display...
  </div>
  <script>
    function mOver(obj) {
      obj.innerHTML = "Thank you";
    }
    function mOut(obj) {
      obj.innerHTML = "Mouse over me";
    }
  </script>

 

onmousedown/onmouseup

  <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: #d94a38; width: 120px; height: 20px; padding: 40px;">
    click me...
  </div>
  <script>
    function mDown(obj) {
      obj.style.backgroundColor = "#1ec5e5";
      obj.innerHTML = "Release me";
    }
    function mUp(obj) {
      obj.style.backgroundColor = "yellow";
      obj.innerHTML = "Thank you";
    }
  </script>

 

onfocus/onblur 이벤트

  enter your name: <input type="text" id="fname" onfocus="focusFunction()" onblur="blurFunction()">
  <script>
    function focusFunction() {
      document.querySelector("#fname").style.backgroundColor = "red";
    }
    function blurFunction() {
      document.querySelector("#fname").style.backgroundColor = "yellow";
    }
  </script>

 

◎removeaddEventListener()

-removeaddEventListener() 메서드로 첨부된 이벤트 핸들러를 제거함

 

remove 이벤트

  <p>click button</p>
  <button onclick="removeHandler()" id="myBton">remove</button>
  <button id="myDIV">Try mousemove</button>
  <p id="demo"></p>
  <script>
    document.querySelector("#myDIV").addEventListener("mouseover", myFunction);
    function myFunction() {
      document.querySelector("#demo").innerHTML = Math.random();
    }
    function removeHandler() {
      document.querySelector("#myDIV").removeEventListener("mouseover", myFunction);
    }
  </script>

 

 

7)HTML DOM 요소

-HTML DOM 노드 관계를 사용하여 노드 트리를 탐색할 수 있고, HTML DOM에 새 요소를 추가하거나 삭제할 수 있음. W3C HTML DOM 표준에 따르면 HTML 문서의 모든 것이 노드임(12종류)

-텍스트 노드는 자식노드가 없음

 

1.전체 문서가 문서 노드임

2.모든 HTML 요소는 요소 노드임

3.HTML 요소 안의 텍스트는 텍스트 노드임

4.모든 HTML 속성은 속성노드임

5.모든 주석은 주석 노드임

 

◎DOM 노드

-HTML 문서가 웹 브라우저에 로드되면 웹 페이지는 문서 객체가 됨. document 객체는 HTML 문서의 루트 노드임. document 객체는 자바스크립트 내에서 모든 노드 객체에 접근하기 위한 속성 및 메서드를 제공함

 

1.노드 트리에서 최상위 노드를 루트(루트 노드)라고 함

2.모든 노드에는 루트(부모가 없음)을 제외하고 정확히 하나의 부모 노드가 있음

3.노드에는 여러 자식 노드가 있을 수 있음

4.형제 또는 자매 노드는 같은 부모를 가진 노드들임

 

 

 

8)DOM노드 탐색

노드 탐색 설명
parentNode  현재 노드의 부모 노드를 찾음
childNode[nodenumber]
childern[elementnumber]		 자식 노드를 모두 탐색하여 nodenumber로 접근/  [index]
자식 요소 노드를 모두 탐색하여  number로 접근
firstChild
firstElementChild		 첫번째 자식 노드 반환
첫번째 자식 요소 노드 반환
lastChild
lastElementChild		 마지막 자식 노드 반환
마지막 자식 요소 노드 반환
nextSibling
nextElementSibling		 자신의 다음 형제 노드 반환
자신의 다음 형제 요소 노드 반환
previousSibling
previousElementSibling 		자신의 이전 형제 노드 반환
자신의 이전 형제 요소 노드 반환

 

*주의)

-텍스트도 같이(공백포함), 노드.

-요소노드 반환, 요소노드.

-읽기 전용->수정x

 

 

◎nodeValue

-노드 탐색을 위해서는 먼저 노드와 값에 대한 이해가 필요함

-속성에 접근하여 바꿀 수 있음

-get, set 가능

 

<title id=dome>DOM tutorial</title>

 

-요소 노드 <title>은 텍스트를 포함하지 않음. 대신 텍스트 노드에 "DOM tutorial" 값이 들어있음

-innerHTML 속성은 요소의 콘텐츠를 다룰 때 사용하며, nodeValue는 텍스트 노드의 값(텍스트)를 다룰 때 사용함

-nodeValue 속성은 텍스트 노드의 텍스트를 반환하므로 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null 반환함

 

document.querySelect("div").innerHTML  //<div>"안녕"</div>  다 포함

document.querySelect("div").firstchild.nodeValue;  //"안녕"

document.querySelect("div").textContent;  //"안녕" "안녕2"

 

◎textContent

-요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경함(시작 태그와 종료 태그 사이의 모든 텍스트)

 

node1)

  <h1 id="id01">my first page</h1>
  <p id="id02"></p>
  <script>
    document.querySelector("#id02").innerHTML =
    document.querySelector("#id01").innerHTML;
  </script>

 

2)

  <h1 id="id01">my first page</h1>
  <p id="id02"></p>
  <script>
    document.querySelector("#id02").innerHTML =
    document.querySelector("#id01").firstChild.nodeValue;
  </script>

 

3)

  <h1 id="id01">my first page</h1>
  <p id="id02"></p>
  <script>
    document.querySelector("#id02").innerHTML =
    document.querySelector("#id01").childNodes[0].nodeValue;
  </script>

 

◎Root 노드

문서 본문 document.body
문서 전체 document.documentElement

 

Rootnode

1)

  <p>Hello World!</p>
  <div>
    <p>Dom is very useful</p>
    <p>document.body property</p>
  </div>
  <script>
    alert(document.body.innerHTML);
  </script>

 

2)

  <p>Hello World!</p>
  <div>
    <p>Dom is very useful</p>
    <p>document.body property</p>
  </div>
  <script>
    alert(document.documentElement.innerHTML);
  </script>

 

◎nodeName속성

1.nodeName은 읽기 전용임

2.요소 노도의 nodeName은 태그 이름과 같음

3.속성 노드의  nodeName은 속성 이름임

4.텍스트 노드의  nodeName은 항상 #text임

5.문서 노드의 nodeName은 항상 #document임

 

nodeName

  <h1 id="id01">my first page</h1>
  <p id="id02"></p>
  <script>
    document.querySelector("#id02").innerHTML =
    document.querySelector("#id01").nodeName;
  </script>

 

 

9)HTML 요소(noes) 추가

-HTML DOM 요소에 접근하려면 항상 문서 객체에 접근하여야 가능함

메서드 설명
document.createElement(요소) HTML 요소 생성
document.createTextNode(콘텐츠) HTML 텍스트 추가
document.appendChild(요소) HTML 요소 추가
document.insetBefore(요소) HTML 요소 추가

 

document.insetBefore(new Node, child Node) //첫번째 인수의 노드를 두번째 인수의 노드 앞에 삽입함

 

노드 추가

1)

  <div id="div1">
    <p id="p1">this is paragraph</p>
    <p id="p2">this is another paragraph</p>
  </div>
  <script>
    var para = document.createElement("p");
    var text = document.createTextNode("this is new");
    para.appendChild(text);
    var element = document.querySelector("#div1");
    element.appendChild(para);
  </script>

 

2)

  <div id="div1">
    <p id="p1">this is paragraph</p>
    <p id="p2">this is another paragraph</p>
  </div>
  <script>
    var para = document.createElement("p");
    var text = document.createTextNode("this is new");
    para.appendChild(text);
    var element = document.querySelector("#div1");
    var child = document.querySelector("#p2");
    element.insertBefore(para, child);
  </script>

 

 

10)HTML 요소(noes) 삭제

-동적으로 HTML 문서에서 노드를 삭제하려면 먼저 부모 노드를 알아야 함. 먼저 부모 노드를 선정하고 그 자식 노드 중에서 제거하고자 하는 노드를 선정하고, removeChild() 메서드를 이용함

메서드 설명
documetn.removeChild(요소) 자식노드 중 해당하는 요소 제거
(요소노드, 텍스트 노드 가능)
element.textContent = " " 해당 요소의 텍스트 노드 삭제

 

노드 제거

  <div id="div1">
    <p id="p1">this is paragraph</p>
    <p id="p2">this is another paragraph</p>
  </div>
  <script>
    var para = document.querySelector("#div1");
    var node = document.querySelector("#p1");
    para.removeChild(node);
  </script>

 

 

11)HTML 요소(noes) 변경

-부모 노드로부터 시작하여 replaceChild() 메서드를 사용함

메서드 설명
document.replaceChild(새로운 내용, 기존내용) 자식 노드 수정하기
(요소 노드, 텍스트 노드 가능)
element.textContent = 수정내용 해당 요소의 텍스트 노드 수정

 

노드 변경

  <div id="div1">
    <p id="p1">this is paragraph</p>
    <p id="p2">this is another paragraph</p>
  </div>
  <script>
    var parent = document.querySelector("#div1");
    var child = document.querySelector("#p1");
    var pare = document.createElement("p");
    var node = document.createTextNode("this is new");
    para.appendChild(node);
    parent.replaceChild(para, child);
  </script>

 

12)HTMLCollection

-getElementByTagName() 메서드는 HTMLCollection 객체를 반환함. 이 객체는 HTML 요소의 배열과 같은 목록(컬렉션)임. 컬렉션의 요소는 인덱스 번호로 접근할 수 있으나 배열은 아니므로 배열 메서드는 쓸 수 없음. length 속성으로 요소의 수를 정의함

 

◎NodeList

-문서 노드의 모음

-NodeList 객체는 HTML Collection 객체와 거의 비슷함. getElementsByClassName() 같은 메서드는 HTML Collection 객체를 반환하고 querySelectorAll() 메서드는 NodeList 객체를 반환함. item(), forEach() 메서드와 length 속성을 제공함

 

*HTMLCollection과의 차이점

-HTMLCollection은 HTML 요소 모음이고, NodeList는 문서 노드의 모음임

-두 객체는 객체의 배열과 같은 목록이고, length 속성을 가지며, 컬렉션임(모음집). 그리고 배열과 같은 각 항목에 접근하기 위한 인덱스를 제공함

-다만, HTMLCollection 항목은 이름, id 또는 인덱스 번호로 접근할 수 있지만 NodeList 항목은 인덱스 번호로만 접근 할 수 있음. 그리고 NodeList 객체는 문서 노드의 모음이므로 속성 노드와 텍스트 노드를 포함 할 수 있음 

 

◎form객체

-form 객체는 document 객체의 하위 Object Collections이며, HTML <form> 요소를 나타냄

 

<form> 요소 접근 방법  설명
document.form['myForm'] name='myForm'인 form접근
document.forms[0] 1번째 form 접근
form의 name 값 form의 name 값으로 직접 접근 가능
<form> 내부 입력요소 접근 방법 설명
document.forms[0].elements[0] 1번째 form의 1번째 입력요소 접근
form의 name값.내부요소 name 값 해당 name의 입력요소 접근
forms[0].elements.item(0) 1번째 form의 1번째 입력요소 접근
forms[0].elements.nameItem(name값) 해당 name의 입력요소 접근

 

form 객체 속성 설명
acceptCharset 폼의 accept-charset 속성 값을 설정하거나 반환
action 폼의 action 속성 값을 설정하거나 반환
autocomplete  폼의 자동완성 속성 값을 설정하거나 반환
length length 폼의 요소 수 반환
method get/post 데이터 전송방식 설정하거나 반환
name 폼의 name 속성 값을 설정하거나 반환
noValidate form 데이터 유효성 검사 여부를 설정하거나 반환
target 형식의 대상 속성 값을 설정하거나 반환

 

form 객체 메서드 설명
reset() 폼을 재설정함
submit() 폼을 제출함

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 35일차 (24/12/30)  (2) 2024.12.30
프로그래밍 언어 응용 34일차 (24/12/27)  (1) 2024.12.27
프로그래밍 언어 응용 32일차 (24/12/24)  (0) 2024.12.24
프로그래밍 언어 응용 31일차 (24/12/23)  (0) 2024.12.23
프로그래밍 언어 응용 30일차 (24/12/20)  (6) 2024.12.20

'웹프로그래밍/JavaScript'의 다른글

  • 현재글프로그래밍 언어 응용 33일차 (24/12/26)

관련글

티스토리툴바