자바스크립트 5일차 JS Window, DOM, BOM, EVENT

Window 객체

자바스크립트의

최상위 객체,

전역 객체,

모든 객체가 소속된 객체

이다. (가장 큰형님) 자바로 치면 Object 쯤 되는 객체 되시겠다.

우리가 곧 공부 할 내용인

DOM , BOM , JavaScript(CORE) 도 모두 window 를 형님으로 모시고 있다.

DOM (Document Object Model , 문서 객체 모델)

‘객제지향모델’ 로써 구조화된 문서를 표현하는 형식이다.

(완전 내 마이웨이 대로 설명하면, 디자인 패턴 같은 하나의 형식 이라는 이야기 같다.)

텍스트 파일로 이루어진 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다.

여기서 브라우저가 웹 문서를 쉽게 이해할 수 있도록 구성된 형태를 DOM 이라고 하는 것이다.

모든 요소들 과의 관계를 부자 관계로 표현할 수 있는 트리 구조이다.

주로 만나게되는 노드 4가지

문서 노드(Document Node)

트리의 최상위에 존재하며 각각의 하위 요소들(Element, Attributes, Text)에 접근하려면 이 노드를 거쳐야한다. 예시(document.getElement ~

요소 노드(Element Node)

쉽게 말하자면 태그 이름이다. <div> 의 요소는 div 이고, <img>의 요소는 img …

(심화)  아직은 이해가 안되지만 일단 적어둠

JS DOM 에서 Node 는 node의 constructor 이고, HTMLElement는 element의 constructor이다.

paragraph는 node이자 동시에 element이다.

어트리뷰트 노드 (속성 노드, Attribute Node)

<input> 태그 안에는 name, value 등의 속성을 사용할 수 있는데 이러한 속성(Attribute) 들을 가리키는 노드이다.

텍스트 노드 (Text Node)

태그 내 텍스트를 가리킨다. 텍스트 노드는 요소 노드(Element Node)의 자식이며

자신은 자식 노드를 가질 수 없기 때문에 DOM 트리의 최종단 이다.

<p> 텍스트!!! </p> 에서 ‘텍스트!!!’ 가 바로 텍스트 노드이다.

1. DOM 노드 취득(접근)

HTMLCollection과 NodeList

• HTMLCollection과 NodeList는 DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체이다.
• HTMLCollection과 NodeList는 모두 유사 배열 객체면서 이터러블이다.
• 따라서 for...of 문으로 순회할 수 있으며 배열로 변환할 수 있다.

HTMLCollection

• getElementsByTagName, getElementsByClassName 메서드가 반환하는 객체이다.
• 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) DOM 컬렉션 객체이다.
• HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에 for문으로 순회하면서 노드 객체의 상태를 변경하는 경우 주의해야 한다.
  • 반복문 역방향 순회 혹은 while문 사용 등을 통해 회피할 수 있다.
  • 하지만 HTMLCollection 객체를 사용하지 않고 배열로 변환하는 것이 권장 된다.

NodeList

• querySelectorAll 메서드가 반환하는 객체이다.
• 실시간으로 노드 객체의 상태를 변경하지 않기(non-live) 때문에 HTMLCollection의 부작용을 해결할 수 있다.
• NodeList 객체는 NodeList.prototype.forEach 메서드를 상속 받아 사용할 수 있다.
• NodeList.prototype은 forEach 외에도 item, entries, keys, values 메서드를 제공한다.
• 대부분의 NodeList는 non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.

노드 객체의 상태 변경과 상관 없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다. 각각의 객체가 메서드를 제공하지는 하지만 배열의 고차 함수만큼 다양한 기능을 제공하지 않는다. 두 객체 모두 유사 배열 객체이면서 이터러블이므로 스프레드 문법이나 Array.from 메서드를 사용하여 간단하게 배열로 변환할 수 있다

배열로 변환하여 사용하는 것을 권장한다!!!!!!

굿.

2. DOM 노드 탐색

요소를 취득한 다음, 취득한 요소를 기점으로 DOM 트리의 노드를 옮겨다니며 부모, 형제, 자식 노드 등을 탐색(traversinig)해야 할 때가 있다.

DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다. ( 기능이 스레기 같아서 안쓰지만 )

노드 탐색 프로퍼티는 모두 참조만 가능한 읽기 전용 접근자 프로퍼티이다. 읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시된다.

child(자식) , parent(부모) , sibling(형제)

3. DOM 노드 수정

innerHTML

• setter와 getter 모두 존재하는 접근자 프로퍼티로 요소 노드의 HTML 마크업을 취득하거나 변경한다.
• textContent 프로퍼티는 HTML 마크업을 무시하고 텍스트만 반환하지만 innerHTML 프로퍼티는 HTML 마크업이 포함 된 문자열을 그대로 반환한다.

insertAdjacentHTML

• Element.prototype.insertAdjacentHTML(position, DOMString) 메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.
• 첫번째 인수로 전달할 수 있는 문자열은 'beforebegin', 'afterbegin', 'beforeend', 'afterend'의 4가지이다.
• insertAdjacentHTML 메서드는 기존 요소에 영향을 주지 않고 새롭게 삽입될 요소만을 파싱하여 자식 요소로 추가하므로 기존의 자식 노드를 모드 제거하고 다시 처음부터 새롭게 자식 노드를 생성하여 자식 요소로 추가하는 innerHTML 프로퍼티보다 효율적이고 빠르다. 단, HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅 공격에 취약하다는 점은 동일함

4. 노드 이동 교체 삭제

node insert move

node copy replace remove

요소 사이에 값을 넣고 싶을 때 !!!!!!!!!!!!!!!!!!!! 바로 그때가 되면 !!!!!!!!!!! 찾아보세요 .

5. 어트리뷰트 (속성)

attributes , getAttribute , setAttribute , hasAttribute , removeAttribute

6. 스타일

className ( 반환 문자열 ) , classList ( 반환 DOMTokenList ?? )

classList 메소드

add , item ( 0 ) , contains ,
replace(old , new) , toggle , remove

BOM (Browser Object Model, 브라우저 객체 모델)

BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델이다.

공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM 이라고 한다. Window객체를 통해 접근이 가능하다.

바로 F12 를 열어서 콘솔에 해당 메소드를 실행시켜 보면 엄청나게 많은 프로퍼티들을 볼 수 있다,

navigator , location , history , screen

EVENT ( 이벤트 )

표준 이벤트 모델

w3 에서 공식적으로 지정한 이벤트 모델. 한번에 여러개의 이벤트 핸들러 설정가능 IE 는 9버전부터 지원

[참고] HTML DOM 이벤트 종류

https://www.w3schools.com/jsref/dom_obj_event.asp

addEventListener ( type , listener() , option ) 인자 설명

type : 언제 (작동 원인) = 위에 있는 문서에 들어가면 종류가 정리되어있다.

자주 사용되는 type들

이벤트 명설명
change : 변동이 있을 때 발생

click : 클릭 시 발생

focus : 포커스를 얻었을 때 발생

keydown : 키를 눌렀을 때 발생

keyup : 키에서 손을 땟을 때 발생

load : 로드가 완료 되었을 때 발생

mousedown : 마우스를 클릭 했을 때 발생

mouseout : 마우스가 특정 객체 밖으로 나갔을 때 발생

mouseover : 마우스가 특정 객체 위로 올려졌을 때 발생

mousemove : 마우스가 움직였을 때 발생

mouseup : 마우스에서 손을 땟을 때 발생

select : option 태그 등에서 선택을 햇을 때 발생

출처:

https://chlolisher.tistory.com/10

[클로리셔 작은 공간:티스토리]

listner() : 무엇을 (취할 행동) = 호출할 함수

addEventListener ( type , listener() , option )

option 프로퍼티

option {
( capture 설명은 좀 자신이 없네요 false 와 useCapture 가 엄밀히 말하면 다른거같은데 
그냥 놓고 보면 똑같거든요)

capture : 이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에,
 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다. 
명시하지 않을 경우 기본 값은 false(useCapture)입니다. ( 본인부터 실행되고 부모를 실행함)
true  :   ( 최상위 부터 실행되고 자식을 실행함)

once : 수신기가 최대 한 번만 동작해야 함을 나타내는 불리언 값입니다. true를 지정할 경우, 
수신기가 발동한 후에 스스로를 대상에서 제거합니다. 명시하지 않을 경우 기본 값은 false입니다.

passive : true일 경우, 이 수신기 내에서 preventDefault()를 절대 호출하지 않을 것임을 
나타내는 불리언 값입니다.

}

preventDefault() 예제 문서

사용자의 행동을 방지하게 해주는 메소드이다.

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

 

이벤트가 발생한 해당 요소 객체에 접근하는 방법

+자바스크립트 this 가 무엇을 가리키는지…

<button id = "btn4">고전이벤트방식</button>
    <button onclick="test6();">인라인이벤트방식</button>
    <button id = "btn5">표준이벤트방식</button>

    <script>
        // 고전이벤트 방식 
        var btn4 = document.getElementById("btn4");
      
        btn4.onclick = function(e){//e 매개변수  : 발생한 이벤트 객체
            //MouseEvent객체
            console.log(e);           // PointerEvent 객체 정보
            console.log(window.event);  // PointerEvent 객체 정보

            //현재 이벤트가 발생한 요소에 대한 정보를 가져오고자 한다면 세가지 방법
            console.log(e.target);     // Element 요소 정보   (객체)
            console.log(window.event.target);    // Element 요소 정보   (객체)
            console.log(this);       // Element 요소 정보 (객체)

            e.target.style.color = "white";
            this.style.backgroundColor="red";
        }

        //인라인방식 -- 위 버튼에서 인라인으로 호출
        function test6(e){
            console.log(e);//매개변수로 이벤트 객체아는것은  불가능   undefined
            console.log(window.event.target); //정상    Element 요소 정보 (객체)
            console.log(this);// window 객체를 가리킴 (이벤트 객체를 아는 것은 불가능 )
        }

        //표준이벤트 방식 
        var btn5 = document.getElementById("btn5");
        btn5.addEventListener('click', function(e){
            console.log(e.target);     // Element 요소 정보 (객체)
            console.log(window.event.target);   // Element 요소 정보 (객체)
            console.log(this);   // Element 요소 정보 (객체)
        });

input type = submit 에게 이벤트를 만들어주면

이벤트를 우선 실행. return이 true 이면 그 다음 submit 실행. false 이면 submit 실행 안함