생활코딩에서 JavaScript 공부하기 9일차

자바스크립트 기본 문법을 들어야할지 고민이다.

2020.03.24

생활코딩에 자바스크립트와 웹브라우저라는 강의를 듣고 있다.

이강의는 자바스크립트의 문법을 가르쳐주기 보단 웹브라우저와 같이 이용하는 방법?을 알려주는 것 같다.

일단 다 듣고 문법 강의를 들어야겠다.

오늘은 Element 객체와 API에 대해서 배웠다.

 

오늘의 메모장

2020.03.24
Element객체
엘리먼트를 추상화한 객체를 말한다.
HTMLElement은 style이라는 프로퍼티를 가진다.
Element라는 부모 객체가 있다.
DOM은 HTML만을 제어하기위한 표준이 아니다.
XML SVG 등 마크업 언어들을 프로그램적으로 제어하기위한 표준이다.
Element와 HTMLElement가 분리되어있는 이유이다.
DOM을 공부하면 다양한 언어들을 제어하는 방법을 익힐 수 있다.
크롬개발자 도구는 엘리먼트를 선택하고 프로퍼티를 클릭하면 객체의 메소드나 프로퍼티를 보여준다.
DOM에대한 구조를 이해하는 것이 수업의 목표이다.

식별자API
Element.tagName은 읽기 전용이다.
Element.id 변경 가능하다.
id는 단 하나만 등장할 수 있는 식별자이다.
Element.className 까다롭고 불편하다.
Element.classlist 까다롭지만 편리하다.
add remove toggle을 사용한다.

조회 API
조회 범위를 조절할 수 있다.

속성 API
속성값을 제어할 수 있다.
.setAttribute(' ', ' '); 을 쓰면 된다.

속성과 프로퍼티
setAttribute 는 속성방식
className 은 프로퍼티방식 더 빠르고 간편하다 그럼에도 불구하고 조심해야한다.
프로퍼티방식은 이름이 다른 경우가 있기 때문이다.
property 방식은 좀 더 간편하고 속도도 빠르지만 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다. 그것은 자바스크립트의 이름 규칙 때문이다.

class        className
readonly        readOnly
rowspan         rowSpan
colspan         colSpan
usemap         userMap
frameborde     frameBorder
for         htmlFor
maxlength        maxLength

미묘한 다른 문제로 인해서 자바스크립트를 통해서 속성을 제어할 때 까다로울 수 있다.

 

개강이 4월로 미뤄졌다. 후 너무 힘들다.