Day - 06 [JAVA Script] - DOM(dom 가져오기, element 속성 활용, event)

Document Object Model

-> document 내 Tag를 가져와 opacity와 color속성을 변경하는 과정

 

find

HTML 태그를 가져오는데, 

HTML(ELEMENTS?) 가져오는 방법 (DOM 가져 오기)

- 객체(Object) 의 속성(Attribute)을 다루기 위해서는 우선 객체를 가져와야 한다.

 

- JS에서 원하는 태그를 가져오는 방법은 

• -> 원 id , class , tag name 을 통해 원하는 요소를 가져 올 수 있다. (3)
• -> querySelector 쿼리셀렉터를 이용, 하지만 이는 하나만 가져올 수 있기 때문에
• querySelectorAll 을 사용한다. 이는 배열에 담아서 온다.

 

- quertyselctor의 단점은

• - >하나밖에 가져올 수 없고
• -> ie8 이하에선 안된다. (아직 실제로 사용 하는 곳이 존재함)

 

- Element 내의 속성 활용하기

가져온 Element 에서 속성(Attribute)을 다룰 수 있다.

다룰 수 있는 속성은 사용자 속성과 기본 속성으로 나눠진다.

• 사용자 속성 : 사용자가 Element 에 명시한 속성
• 기본 속성 : Element 생성시 자동으로 부여된 속성

 

속성에 접근하는 2가지 방법

직접찍고 들어가는 방법과 -> 사용할 수 있는 속성이 제한적이다.

set.attribute 을 찍고 들어가는 방법이 있다. -> 모든 속성을 사용할 수 있다.

//my-attr 은 사용자 속성이다.
        var elem = document.getElementById('p1');
        console.log(elem);
        elem.innerHTML='새로운 텍스트 등장';
        elem.style.backgroundColor='yellow';

        var img = document.getElementById('image');
        //src 속성 바꾸는 방식
        //img.src='../img/img02.jpg';// 일부 건드릴수 없는 속성이 있다.
        img.setAttribute('src','../img/img03.jpg'); // 모든 속성을 수정할 수 있다.

 

event

- Event 는 어떤 "사건"을 의미 한다.

- "~가 일어난다면" 이 event 라고 생각 할 수 있다.

* 벨이 울리면, 손님테이블로 가거라

- 한 요소에 다양한 이벤트를 걸 수 있다.

 

Event 를 등록 하는 방식은 속성 추가 방식과 Event Listener 방식이 있다.

 

속성 추가

일반적으로 사용하는 이벤트 속성

**event 부분 다시 출력해보기 연습하자~

 

Event Listener

- 이벤트 리스너는 특정 요소에 특정 이벤트를 감시하는 기능을 추가하는 개념이다.

자주 사용하는 이벤트 들

 

Event 는 HTML 에 다이나믹 한 기능을 수행 할 수 있도록 해준다.

아래는 마우스를 갖다 대면 색이 변하는 코드 이다.

var elem = document.getElementsByTagName('body');
        console.log(elem);

        function mouseEvt(flag){
            console.log(flag);
            var tag = document.getElementsByTagName('div');
            tag[0].innerHTML = 'mouse '+flag;
            if(flag == 'over'){
                tag[0].style.backgroundColor = 'red';
            }else{
                tag[0].style.backgroundColor = 'yellowgreen';
            }
        }