2. document.querySelector();

<Reference Document>

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.

 

여기서 Element = tag 라고 봐도 무방하다.

 

 

<예제>

    <input type = "button" value = "night" onclick="
    document.querySelector('body').style.backgroundColor = 'gray'";>
 

document.querySelector('body') -> 'body' tag를 선택 return value : body라는 Element

body.style -> body tag에 대한 style 접근

 

<Reference Document>

HTMLElement.style 

속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 CSSStyleDeclaration 객체를 반환합니다

 

body.style.backgroundColor -> style CSS중 'backgroundColor 라는 멤버 속성에 접근

backgroundColor = 'gray'; -> backgroundColor라는 속성에 'gray'(회색) 값 대입.

 

총 해석 -> button을 onclick(클릭)하면

body tag의 배경색이 회색으로 변한다.

 

 

 

 

참조 문서: https://developer.mozilla.org/kod

MDN Web Docs

 

모든 태그 속성에 대해 암기할 수는 없고

개념을 이해하고 그때그때 검색해보면서 만들어가면 되겠지..

Node.js 서버 구축해보려고 찬찬히 하는중..ㅠ