자바스크립트 - DOM

beans_I·2023년 9월 24일

[23-2] 웹프로그래밍

목록 보기
6/13

DOM?

  • DOM은 Document Object Model의 약자로 HTML요소를 JavaScript Object처럼 조작할 수 있도록 해주는 모델이다. 저 아래의 박스는 노드로 칭한다.

-이 관계를 꼭 익혀야지 js의 다이나믹한 코딩을 진행할 수 있다.

  • atrribue는 계층 구조를 포함하지 않는다. (자식 관계는 아니고 element를 부가적으로 설명해주는 것이기 때문.)

  • 이 돔은 Core DOM, XML DOM, HTML DOM이 있다.

HTML DOM

  • HTML DOM은 HTML의 표준 Object Model, 프로그래밍 인터페이스를 규정해준다.
  • HTML DOM에서는:
    1. Elements -> Object처럼
    2. Properties -> get이나 (attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미한다.)
    3. method()
    4. events

DOM Programming Interface

근데... Method가 뭐였더라

  1. element를 바꾸어주는 메소드들


    innerHTML : http://www.w3schools.com/js/tryit.asp?filename=
    http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_innerhtml
    .attribute : https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_image
    documents.write : https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_write

    스타일 변경

    • ~.style.color = "red"식으로 변경할 수 있다. 주의할 점으로 '-'형식이 아닌 camelCase로 작성하여야 한다.
      ex)

  2. element를 추가하거나 제거해주는 메소드들

    이벤트 - 특정한 이벤트가 발생하였을때, js를 실행하는 부분

    <p id="demo"></p>
	<script>
		document.getElementById("myBtn").addEventListener("click", displayDate);
		function displayDate() {
				document.getElementById("demo").innerHTML = Date();
			}
	</script>
  • 문법
    1. element.addEventListener (event, function, useCapture);
      • useCapture : 표현방식
    2. Passing Parameters: 
       addEventListener("click", function() {
			 myFunction(p1, p2);
		});

  1. 버블링과 캡쳐링 : 이벤트 핸들러 발생시 부모 노드까지 쭈우욱 가는거?

    블로그 글과 예제로 대체한다. 버블링이 기본값이다. 버블, 아래서 위로 뽀글뽀글 올라가는 그 느낌, 알자나

  2. removeEventListener(): 이벤트 핸들러를 제거하고 싶을때 사용하는 메서드이다.
    https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_remove

    HTML 이벤트 객체

어떤 element에서 이벤트 발생했는지 확인하는 개념 - 이벤트 객체 개념
target: 이벤트가 발생하는 element를 리턴해준다.

  • 이벤트에서 parameter가 있다면은 event parameter도 추가해줘야한다.

type: 이벤트의 이름은 리턴해준다.

JS FORMS

JavaScript Form Validation

  • https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js
    -> let x = document.forms["myForm"]["fname"].value; : 이름이 myForm인 forms에서 이름이 fname인 부분을 추출, 그리고 해당 부분의 값을 가져온다.

  • 숫자 검증: https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_number
    -> 위의 부분에서는 getElementById를 사용한다.
    숫자 검증은 알맞게 js 코드를 작성하면 된다.
    +) 위 2개의 예제 코드에서는 js에서 input란에 값이 들어왔는지를 확인하는 부분을 작성하고 있는데, input element내에 required를 작성하여 미입력을 확인할 수도 있다.

  • 일반적으로 확인하는 것들은:

    • Has the user filled in all required fields?
    • Has the user entered a valid date?
    • Has the user entered text in a numeric field?

    이고, 검증은 위의 방법 외에 php나 서버 타 프로그램으로도 진행할 수 있다. 이걸 나누어보면,

    • Server side validation: 서버에 보내지기전 html, js등에서 처리
    • Client side validation: 서버에서 php, jsp 등으로 처리

    이다. 우선은 Sever side vlidation부터 확인해보자.

HTML 제약조건

HTML Input Attributes
CSS Pseudo Selectors (나중에 할 예정)
DOM Properties and Methods


(후설명)

DOM +

  • 노드는 element, text, attribute로 구분된다.
  • attribute는 (deprecated)상태이다. 부가저 설명의 노드로서 Element의 하위 노드는 아니다.
  • text는 노드는 항상 element 노드의 하위 노드이다.

-자료구조처럼 자식, 부모, 루트 구조인 트리 구조를 가진다.

  • sibling : 형제
  • ! text노드는 상위 element의 child노드이다. 중요하니 다시 한 번

property

  1. nodename Property- 읽기만 가능.
    태그, attribute,text(text이면 #text로 출력)의 이름을 리턴

  2. nodeValue - text와 attribute value를 출력

  3. nodeType

Element 추가(DOM활용)

  1. create를 사용 후, child추가.
  2. insertBefore

Element 제거

  1. remove : 구브라우저에선 지원하지 않는다. 그래서 보통은 removeChild를 권장한다.
  1. removeChild : 부모노드랑 삭제할 노드를 지정해서 삭제할 노드를 없애준다.

Element 대체

  1. replaceChild :

HTML DOM Collection

HTML DOM List

profile
beans_I
노션으로 옮겼습니다. https://beans-i.notion.site/main?pvs=74
이전 포스트

자바스크립트

다음 포스트

PHP

0개의 댓글