Day2.DOM API

indentation

코드베이스

코드는 항상 명확하게

논리식은 should~~ can~~ 등으로

ex) shouldEnable = True;            canLogin = True;

일반적으로 함수이름은 동사로

내가 쓴 코드는 조그마한 부분 하나라도 정확하게 이해하고 있어야 한다.

Array

배열이름.pop        →    배열의 맨 마지막 요소 제거

배열이름.unshift       →    배열의 첫번째 요소 추가

// arr = [ 4, 1, 2, 3]

배열이름.shift       →    배열의 첫번째 요소 제거

Objects 생성하는 방법

맨 상단 부분은 object의 name이라는 property의 값이 string타입 'ken'이다.

// 35

a [name]    →    a['age']    →    35

Scope는 밖에서 안을 볼 수 없다.

경계의 정의는 함수가 만들어졌는지 여부에 따라 구분이 가능하다.

안에서는 밖을 볼 수 있고, 밖에서는 안을 볼 수 없다.

for.in .. 에서 loop는 임의의 순서대로 나오기 때문에 순서 의존하는 코드와 함께 사용하면 버그가 발생할 가능성이 있다.

DOM API

Document Object Model 

HTML문서를 객체화하여 제공하는 것.

자바스크립트로 접근하여 사용할 수 있다.

문서를 사용자가 접근하여 수정할 수 있게 해주는 것.

언어와 독립적인 API이다. 

Node        vs        Element

HTML 태그 하나하나는 Element라는 객체로 우리에게 제공되는 것이다.

Element 또한 노드이며, 속성들이나 text들도 모두 노드이다. 노드는 가장 최상위 개념(Node 타입을 확인해보면 된다.)

document.getElementById('hello');

hello라는 id를 가진 element를 가져오게 된다.

Id는 중복될 수 없기 때문에 element 단수형으로 사용.

cf) document.getElementsByTagName('div');

Tag는 중복되서 사용될 수 있기 때문에 복수형으로 사용되고 이 명령어를 사용할 경우에는 배열형태로 데이터가 출력된다.

HTML Collection, 배열같지만 배열은 아니다. (index값을 불러올 수 있고, length 값도 출력할 수 있고, for문도 돌릴 수 있다.)

document.getElementsByClassName('class');

document.querySelectorAll('div');                            document.querySelectorAll('div > h1 > p');

cf) document.querySelector('top-of-page');

만약 중복되는 선택자들이 있다면 가장 첫 번째 위치해 있는 Selector가 호출된다.

모든 Element에는

.parent

.classList

toggle : 없으면 넣어주고 있으면 그냥 냅둔다.

*****

ulElement.classList.add('클래스이름')

$0 은 크롬 브라우저에서 지원하는 기능으로 Element창에서 선택한 코드를 Console창에 바로 출력해준다.