[20230622]DOM, 선택자, DOMContentLoaded, script로드시

DOM

Document Object Model의 약어로 DOM이라고도 함

문서에 접근하기 위한 표준으로 W3C 에서 정의

HTML DOM은 HTML구성요소들을 휙득,변경,추가,삭제하기 위한 표준

HTML문서를 브라우저에도 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄.

 

 

 

HTML문서 객체 모델

트리구조로 되어있음.

요소는 노드라고 부름.

 

요소노드 : html  요소

텍스트 노드 : 요소 노드안에 있는 글자

노드 : 객체화된 각 요소들

 

 

button에 바로 script 삽입하기

    <button onclick="alert('경고');"> 이름 </button>

 

 

 

 

script로드시

1. 헤더안에 defer삽입

 

2. DOMContentLoaded 넣기

//이벤트 적용

document.addEventListener('DOMContentLoaded',function(){

    document.getElementById('list1').style.color = 'blue';

   

});

 

3. body에 넣기

 

 

 

 

 

 

script 선택자

유사배열은 [i] for문을 활용한다.

    let selectionTitle = document.getElementsByTagName('h2');

    for (let i =0; i<selectionTitle.length; i++){

        selectionTitle[i].style.color ='blue';

    }

 

document.getElementById('list1').style.color = 'blue'; ->단일

document.getElementsByTagName('h2').style.color= 'green'; ->유사배열

 

요소를 선택하는 여러가지 방법

    let mylist = document.getElementsByClassName('list');

    console.log(mylist);

    let x = 0;

    while(x < mylist.length){

        mylist[x].style.backgroundColor='#ebebeb';

        x++;

    }

 

단일 선택자(바로 지정 가능) 

document.querySelector('#box>div>div').style.opacity = 0.1;

 

All로 할시 유사배열 선택자

    let box = document.querySelectorAll('#box>div');

   

    for(i=0; i<box.length; i++){

        box[i].style.backgroundColor='#ebebeb';

    }

 

forEach활용

   

    let myp = document.querySelectorAll('p');

    //for Each를 이용하여 글자 크기를 1.5em으로 바꿔봄

    /*

        대상의 값을 마다마다 할일 매개변수 3개 들어옴!

        대상.forEach(function(item,index,all){....})

    */

        myp.forEach(function(item){

            item.style.fontSize = '1.5em';

        });

 

 

 

클릭시 알럿창띄우고 색상 변경하기

let clickBtn = document.getElementById('submit');

let bg = document.querySelector('.container > p');

clickBtn.addEventListener('click',function(){

    alert('클릭했어요');

    bg.style.backgroundColor="#ccc";

});

 

 

 

 

 

마우스 호버시 색상 입히고 없애기

bg.addEventListener('mouseover',function(){

    bg.style.color='blue';

});

bg.addEventListener('mouseout',function(){

    bg.style.color='';

});

bg.addEventListener('mouseover',function(){

    this.style.color='blue';

});

bg.addEventListener('mouseout',function(){

    this.style.color='';

});

 

 

bg.addEventListener('mouseenter',function(){

    this.style.color='blue';

});

bg.addEventListener('mouseleave',function(){

    this.style.color='';

});

 

 

select박스 선택시 body색상 변경(change)

 

const colorSelect = document.getElementById('color');

const target = document.body;

/*

    대상의 value를 확인

*/

document.querySelector('#name').addEventListener('change',function(){

    alert('반갑습니다'+this.value+'님')

});

colorSelect.addEventListener('change',function(){

    const selectValue = this.value;

    target.style.backgroundColor= selectValue;

});