본문 바로가기

자바스크립트120

[Javascript] 폼 요소 접근 html 요소들을 접근 하는 방법들을 알아왔는데 그 중에서 폼(form) 요소에는 접근하는 방법이 또 따로 있습니다. 폼은 사용자로부터 직접 정보를 입력받는 공간이기때문에 따로 관리하면 편해지는 것이죠. 폼에 대한 설명은 이포스트에서 따로 다루지 않고 여기서는 접근법만 다루도록 하겠습니다. 2020.08.24 - [Programming/HTML,CSS] - [HTML] 폼 태그 1, 폼 요소 태그들 - 1 2020.08.25 - [Programming/HTML,CSS] - [HTML] 폼 태그 2, 폼 요소 태그들 - 2 2020.08.27 - [Programming/HTML,CSS] - [HTML] 폼 요소 3, 폼 요소의 속성들 2020.08.27 - [Programming/HTML,CSS] - [H.. 2021. 3. 26.
[Javascript] 속성 값 다루기 지난 포스트에서 노드를 취득했다면 이번에는 취득한 노드의 속성을 다루어볼려고 합니다. 0. 요소 노드의 속성명으로 접근하기 제일 기초적인 방법이자 직관적인 방법입니다. 바로 요소의 속성명을 프로퍼티로 접근하는 방법인데요 . 예를 들면 요소에는 href라는 링크를 지정하는 속성이 있습니다. 이 태그로 예시를 들며 설명해나가겠습니다. let linkA = document.getElementBtId('myBlog'); let url = linkA.href;//로 취득하거나 linkA.href = "";//로 설정하기 이처럼 속성의 이름을 가지고 직접 접근할 수 있습니다. 직관적이지만 주의할점이 있는데요. 몇몇 키워드의 혼용으로 인해 속성명이 일치하지 않는 경우가 있습니다. 대표적으로 class인데요. clas.. 2021. 3. 25.
[Javascript] 이벤트 우리가 웹 페이지에 들어가면 보통 클릭을 하거나, 마우스 커서를 올리거나 하는 행동을 합니다. 이처럼 웹 상에서 일어나는 상황들을 이벤트라고 합니다. 그리고 대다수는 이 이벤트가 발생함에 따라 처리를 실행하게 됩니다. 1. 클라이언트측 이벤트 자바스크립트는 클라이언트측에서 프로그래밍하게 되므로 클라이언트측 이벤트를 다루게 됩니다. 이들은 다음 표로 정리할 수 있는데, 외운다기 보다는 읽어보면 당연하고, 이런 동작이 있었지 정도로 이해해도 충분합니다. 분류 이벤트 이름 이벤트 설명(이벤트가 발생) 페이지 읽기 abort 이미지의 로딩이 중단되는 경우 load 페이지+이미지의 로딩이 완료된 경우 unload 다른 페이지로 이동 키 조작 keydown 키를 누름 keypress 키를 누르고 있음 keyup 키.. 2021. 3. 24.
[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.
300x250

티스토리툴바