Programming/Javascript91 [Javascript] 노드 워킹 지난 포스트에서 노드 취득에 대해 알아봤습니다. 근데 이 노드 취득법은 무조건 문서 전체를 검사하기 때문에 노드 취득을 여러번 하게된다면 퍼포먼스에 영향을 미치게 됩니다. 그래서 나온 아이디어가 현재 취득한 노드를 기준으로 주변 노드를 취득해보자라는 것에서 기인한 노드 워킹입니다. 1. 노드 워킹의 프로퍼티 노드 워킹은 서론에서 이야기 했듯이 현재 취득한 노드를 기준으로 다른 노드를 취득합니다. 관계로만 살펴보자면 부모 노드, 형 노드, 동생 노드, 자식노드 이렇게 네가지를 한 노드에서 취득할 수 있게 됩니다. 이를 정리하면 다음과 같습니다. 노드 워킹 프로퍼티 설명 parentNode 부모 노드 취득 previousSibling 형 노드 취득 previousElementSibling 형 요소 취득 ne.. 2021. 3. 24. [Javascript] 노드 취득 2021.03.23 - [Programming/Javascript] - [Javascript] 문서 객체 모델 DOM 지난 포스트에서 문서 트리를 구성하는 요소, 속성, 텍스트 등을 노드라고 했었습니다. 이 노드들을 자바스크립트에서 이용하기 위해서는 취득을 해서 다뤄야 하기때문에 노드를 취득하는 법을 다룰려고 합니다. 1. ID를 가지고 노드 취득 노드를 취득하는 방법 중 하나는 ID를 이용하는 것 입니다. 이 id를 통해 노드를 취득하는 방법은 다음과 같습니다. document.getElementById(id); 2. 태그명으로 노드 취득 이번 방법은 html의 태그명으로 노드를 취득하는 방법입니다. id는 문서에서 한 번만 존재할 수 있는 점과 다르게 태그는 한 문서에서 여러번 올 수 있습니다. 그러.. 2021. 3. 24. [Javascript] 문서 객체 모델 DOM 오래전 포스트에 객체를 처음 소개하며 문서 객체 모델인 DOM에 대해 잠깐 이야기했었습니다. 이번 포스트부터는 그 DOM에 대해 다뤄볼까 합니다. 1. DOM 소개 DOM은 Document Object Model의 약자로 문자 그대로 해석하면 문서 객체 모델입니다. 왜 문서 객체 모델이냐면 이 자바스크립트의 DOM을 통해 html혹은 xml문서에 접근해 조작할 수 있기 때문입니다. 물론 DOM이 자바스크립트의 전유물은 아니고 다른 언어들에도 들어가 있습니다.그래서 이제까지는 자바스크립트의 기본 문법이었다면 지금부터는 자바스크립트를 본격적으로 이용할 수 있게 됩니다. 2. 문서 트리 문서 트리란, 문서를 트리 구조로 해석한다는 건데, 트리 구조란 상단에서 하단으로 가면 여러갈래로 뻗어나가는 형태를 의미합니.. 2021. 3. 23. [Javascript] 객체의 상속 - 프로토타입 체인 이번 소개할 내용은 객체지향 언어의 중요 개념인 상속입니다. 이 상속도 ES2015 클래스 명령의 등장과 함께 변경된 부분이 있기에 두가지를 설명하도록 하겠습니다. 1. 상속 상속을 간단하게 말하자면 클래스나 기초가 될 객체의 기능(프로퍼티나 메소드)을 이어 받아 새로운 클래스나 객체를 정의하는 것 입니다. 상속에서 상속을 해주는 대상이 되는 클래스를 부모클래스, 슈퍼클래스, 베이스 클래스 등으로 부르고 상속을 받는 클래스는 자식클래스, 서브 클래스, 파생 클래스라고 부릅니다. (이 글에서는 부모-자식 클래스라는 표현을 사용할 예정입니다.) 이에 대한 설명은 아래 예시로 한 방에 정리가 가능합니다. 스마트폰과 공중전화기는 둘 다 전화기라는 공통을 갖고있습니다. 만약 스마트폰과 공중전화기 두 객체를 만든다.. 2021. 3. 19. [Javascript] class 명령을 이용한 클래스 정의 지난번에는 구버전의 클래스 정의를 다뤘다면 이제 ES2015에서 새로 추가된 class 명령을 통한 클래스 정의를 알아보겠습니다. 다른 클래스기반 객체지향 언어(C++, 자바 등)을 했었다면 익숙할 내용일 것 입니다. 클래스가 무엇인지는이전 포스트에서 설명했으니 이번 포스트에선 class 명령을 통한 선언부터 바로 시작하려고 합니다. 2021.03.18 - [Programming/Javascript] - [Javascript] 객체와 클래스 [Javascript] 객체와 클래스 이제 객체지향에 대해 한발짝 더 전진할 시간입니다. 예전에 객체에 대해서 정말 간단하게 설명한적이 있었는데 이번 포스트 부터 그 객체를 자세하게 다뤄보도록 하겠습니다. 0. 객체 객체란 bamtory29.tistory.com 우선.. 2021. 3. 19. [Javascript] this 클래스 생성자 이야기하다가 등장한 this 키워드. 이 키워드는 사용위치에 따라 참조되는 공간이 다르다고 언급했습니다. 그래서 this키워드에 대해 조금 더 알아보고 넘어갈까합니다. 이 포스트에서는 this를 대략적으로만 알아보고 있습니다. this에 대한 더 자세한 용법은 다음을 참조해주세요. 2021.11.12 - [Programming/Javascript] - 자바스크립트의 this 자바스크립트의 this 예전에 this를 간단히만 다뤘습니다. 그때는 포스트 성격상 this가 클래스, 프로토타입 개념부터 이용되기 때문에 간단하게 소개했었습니다. 하지만 자바스크립트의 다른언어의 this와 달리 특이 bamtory29.tistory.com this가 사용된 위치 this가 참조하는 것 함수 외부(톱 레.. 2021. 3. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음 300x250
