TiL

TIL - 20220827

오늘은 모던 JavaScript 튜토리얼에서 문서 수정하기에 대해 공부했다. 작성한 질문은 다음과 같다. DOM 노드를 만들 때 사용하는 메서드로는 다음과 같다. document.createElement(tag): tag에는 div, span과 같은 HTML 태그를 넣어주며, 태그 이름을 사용해 새로운 요소를 만든다. document.createTextNode(text): 주어진 text를 바탕으로 새로운 텍스트 노드를 만든다. 자바스크립트에서 지원하는 노드 삽입 메서드로는 다음과 같다. node.append(노드 혹은 문자열): 노드나 문자열을 node 끝에 삽입한다. node.prepend(노드 혹은 문자열): 노드나 문자열을 node 맨 앞에 삽입한다. node.before(노드 혹은 문자열): 노..

TIL - 20220826

오늘은 모던 JavaScript 튜토리얼에서 속성과 프로퍼티에 대해 공부했다. 작성한 질문은 다음과 같다. 속성과 프로퍼티에 대해 간단히 설명하면 속성은 HTML에 쓰이는 것이고, 프로퍼티는 DOM 객체에 쓰이는 것이다. 표로 자세히 비교하면 다음과 같다. 프로퍼티 속성 타입 모든 타입 가능 문자열 이름 대, 소문자를 구분 O. 대, 소문자를 구분 X. 속성과 함께 쓰이는 메서드로 다음이 있다. hasAttribute(name) - 속성 존재 여부 확인. setAttribute(name, value) - 속성값을 설정한다. getAttribute(name) - 속성값을 가져온다. removeAttribute(name) - 속성값을 제거한다. attributes - 속성의 컬렉션을 반환한다.

TIL - 20220825

오늘은 모던 JavaScript 튜토리얼에서 주요 노드 프로퍼티에 대해 공부했다. 작성한 질문은 다음과 같다. EventTarget, Node, Element, HTMLElement 클래스들은 다음과 같은 특징을 지닌다. EventTarget: 루트에 있는 '추상' 클래스. 이 클래스에 대응하는 객체는 실제로 만들어지진 않는다. Node: EventTarget과 같은 '추상' 클래스로 DOM 노드의 베이스 역할을 한다. Element: DOM 요소를 위한 베이스 클래스 HTMLElement: HTML 요소 노드의 베이스 역할을 하는 클래스 tagName과 nodeName의 차이점은 다음과 같다. tagName 프로퍼티는 요소 노드에만 존재한다. nodeName은 모든 Node에 존재한다. innerHTM..

TIL - 20220824

오늘은 모던 JavaScript 튜토리얼에서 getElement*, querySelector*로 요소 검색하기에 대해 공부했다. 작성한 질문은 다음과 같다. document.getElementById는 접근하고 싶은 요소를 요소에 id가 존재한다면 위치에 상관없이 접근할 수 있는 메서드이다. querySelector는 주어진 CSS 선택자에 해당하는 요소 중 첫 번째 요소를 반환하며, querySelectorAll은 주어진 CSS 선택자에 해당하는 요소 전부를 배열로 반환한다. matches는 메서드로써 주어진 CSS 선택자와 일치하는지 여부를 판단해주는 역할을 한다. 조상 요소는 부모 요소, 부모 요소의 부모 요소같이 특정 요소 상위에 있는 요소들을 조상 요소라고 일컫는다.

TIL - 20220823

오늘은 모던 JavaScript 튜토리얼에서 DOM 탐색하기에 대해 공부했다. 작성한 질문은 다음과 같다. , , 태그는 document 프로퍼티 다음에 속한다. : document.documentElement : document.body : document.head 자식 노드: 어떤 요소 바로 아래의 자식 요소를 자식 노드라고 칭한다. 예를 들어, 와 는 요소의 자식 노드이다. 후손 노드: 자식 노드, 자식 노드의 모든 자식 노드들을 모두 후손 노드라고 칭한다. 형제 노드: 같은 부모를 가진 노드들을 형제 노드라고 칭한다. 첫 번째, 마지막 자식 노드에 빠르게 접근하는 방법은 firstChild, lastChild로 빠르게 접근할 수 있다.

TIL - 20220822

오늘은 모던 JavaScript 튜토리얼에서 DOM 트리에 대해 공부했다. 작성한 질문은 다음과 같다. DOM의 특징으로는 다음과 같이 있다. DOM에 따르면, 모든 HTML 태그는 객체다. 또한, 태그 내의 텍스트 역시 객체다. 이런 객체들은 JavaScript를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용하면 된다. 또한 태그를 요소 노드라고 부르며 트리 구조를 구성한다. 을 루트 노드라고 부르며 그 아래 있는 , 가 루트 노드의 자식 노드가 된다. 요소 내의 태그가 아닌 문자는 텍스트 노드가 된다. 태그가 없는 경우에는 자동으로 문서 최상위에 태그를 넣어주고, 닫는 태그가 없는 경우에도 자동으로 닫는 태그를 넣어주는 자동 교정이 진행된다. 주석도 노드가 된다. 정확하게 표현하면 HTM..

TIL - 20220821

오늘은 모던 JavaScript 튜토리얼에서 브라우저 환경과 다양한 명세서에 대해 공부했다. 작성한 질문은 다음과 같다. 호스트란 자바스크립트가 돌아가는 플랫폼을 호스트라고 부른다. 브라우저, 웹 서버가 호스트의 예시라고 볼 수 있으며, 각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 호스트 환경이라고 부른다. DOM이란 Document Object Model의 약자로, 문서 객체 모델을 뜻하며, 웹 페이지 내의 모든 컨텐츠를 객체로 나타내주는 역할을 한다. document 객체는 페이지의 기본 진입점 역할을 하며, document 객체를 이용해 페이지 내 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있다. BOM이란 Browser Object Model의 약자로..

TIL - 20220820

오늘은 모던 JavaScript 튜토리얼에서 Bigint에 대해 공부했다. 작성한 질문은 다음과 같다. Bigint는 숫자의 크기, 길이의 제약 없이 정수를 다룰 수 있게 도와주는 숫자형이다. JavaScript에서 2^53 - 1 보다 큰 값 혹은 -(2^53-1) 보다 작은 값의 정수는 숫자형을 통해 나타낼 수 없다. 만약, 더 큰 숫자를 할당하려면 잘리게 된다. Bigint를 사용하는 방법은 정수 리터럴 끝에 n을 붙이거나 함수 Bigint에 문자열 혹은 숫자를 인자로 전달하여 호출하면 Bigint 타입의 값을 만들 수 있다. const bigint = 1234567890123456789012345678901234567890n; const samebigint = Bigint("123456789012..