TIL 5주 4일차

[DOM 기초]

DOM(Document Object Model) : 다큐멘트를 오브젝트로 만드는 모델

 

 // touch sample.js //

 

 

접근, 제어

() -> 메소드 : 어떤 것에 접근~ -> 호출의 주체

document 부터 쓰는 이유 -> document부터 시작하기 때

 

getElementbyId

getElementsByClassName

 

노드 -> 속성, 메소드

 

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

[리팩토링(Refactoring)] 코드의 비효율적인 것을 제거하는 것. 중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것

리팩토링을 통해 코드의 중복을 제거한다.

 

ex)

<input type="button" value="night" onclick="

var target = document.querySelector('body')

if(this.value === 'night'){

target.style.backgroundColor = 'black';

target.style.color = 'white';

this.value = 'day';

} else{

target.style.backgroundColor = 'white';

target.style.color = 'black';

this.value = 'night';

} ">

 

document.querySelector('body')를 target 변수로 지정해주고

document.querySelector('body').style.color -> target.style.color 로 바꾸는 식으로

중복되는 내용을 지정한 변수 target으로 바꿔준다.

 

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

[Array 배열]

배열이 필요한 이유? -> 반복문을 통해서~~

 

배열 -> 수납상자 같은 것..

 

<script>

        let arrr = ['toygo', 'sane'];

    </script>

    <h2>get</h2>

    <script>

        document.write(arrr[0]);

        document.write(arrr[1]);

    </script>

    <h2>count</h2>

    <script>

        document.write(arrr.length);

    </script>

index -> [0] ->첫번째

length -> 1부터 시작

 

배열추가 -> push이용

arrr.push('taeho') ----> ['toygo', 'sane', 'taeho']