'Script' 태그를 를 Head / Body 넣는 위치에 따라 무엇이달라지는가

head 에 넣을경우 script 가 완성이 된후 html 들이 불러와 져서
로딩 속도가 느리지만 / 완성된 페이지를 먼저 보여줄수있다
body 에 넣을 경우 마크업 요소들이 먼저 보여진후 script가 불러와진다
로딩 속도가 빠르지만 / js기능들은 늦게 불러와집니다

Console.dlr

DOM 구조를 조회할 때에는 console.dir 이 유용합니다.
console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다.

onkeyup (여러개있음)

이벤트 관련 속성은 'on' 붙습니다.

innerHtml vs textContent vs Value

• innerHTML 은 Element를 집어서 텍스트를 HTML 형식에 맞게 주입하는 방식으로 활용할 수 있습니다.
• innerHTML 사용은 꼭 필요하지 않으면 지양하는 것이 좋습니다. HTML tag를 직접 삽입하여 실행하는 형태의 메서드는 늘 이런 위험을 가지고 있습니다.

setAttribute()

.setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다.

// 기본형
element.setAttribute( 'attributename', 'attributevalue' );
// 예제
document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )

• attributename에는 속성 이름을 넣습니다.
• attributevalue에는 속성값을 넣습니다.
• id 값이 xyz인 요소의 title 속성을 This is title로 정합니다.
• 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.

node ?

node는 요소의 상위 개념입니다. DOM 관련 객체는 대부분 node에서 파생되었다고 봐도 과언이 아닙니다. node의 기능을 적용(implements)한 객체는 여러 타입이 있는데, 그중 가장 많이 사용되는 타입이 Element입니다.

cloneNode / importnode

• document.cloneNode 는, 생성하는 메서드가 아니라 복제하는 메서드 입니다

• document.importNode 는, template 을 활용하여 내용을 붙여 넣을 때 사용하는 메서드 입니다.

after / befor