이전글[jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법[[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법jQuery 선택자(Selector) 목록 정리jQuery는 DOM 요소를 탐색할때 CSS 선택자 표현식을 지원합니다. 이번글에서는 여러가지 선택자를 간단하게 정리합니다.기본 선택자가장 많이 사용하는 기본 선택자들입니다.전체 선택자document 객체가 관리하는 문서내의 모든 요소를 선택합니다. * (Asterisk)를 사용합니다.$('*') //모든 요소를 선택합니다.$('body > *') //body 하위에 모든 요소를 선택합니다.id 선택자HTML 태그의 id 속성값을 기준으로 하는 선택자입니다. ID값 앞에 #을 붙여 사용합니다. I..
JavaScript
2018. 6. 22. 23:00
[jQuery] jQuery DOM 계층 구조를 활용한 셀렉터(Selector) 사용법
이전글[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법DOM 계층 구조를 활용한 셀렉터 사용법DOM은 다음과 같이 트리 구조를 갖기 때문에 부모와 자식 조상과 후손으로 상대적인 계층 구조가 생성됩니다. 예를들어 H1의 부모는 BODY이고 형제로는 P가 있습니다. jQuery 선택자는 이러한 계층구조를 조건으로 하여 세밀한 DOM 탐색을 할 수 있도록 제공합니다.실습 예제body 구조는 다음과 같습니다.자식(Child) 선택자만약 body 태그 구성이 위와 같은 경우 body 의 자식중 태그를 선택하는 방법은 다음과 같이 > 를 사용하는 것입니다.body의 자식중 b를 선택했기 때문에 span 하위의 네번째 b는 선택되지 않았습니다.후손(Descendant) 선택자이번에는 body..
JavaScript
2018. 6. 22. 17:16
[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법
DOM(Document Object Model, 문서 객체 모델)DOM은 문서 객체 모델이라는 뜻으로 HTML이나 XML 같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것입니다. DOM에 대한 자세한 개념은 하단의 링크를 참조합니다.→ [jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법jQuery에서의 DOM 탐색jQuery는 DOM 요소를 쉽고 편리하게 접근할 수 있도록 해줍니다. jQuery가 등장하기 이전에는 기본 자바스크립트 API를 통해서 DOM을 조작했는데, 함수명이 너무 길고 DOM 조작 함수들의 기능이 빈약했습니다.jQuery는 CSS에서 사용하던 셀렉터(Selector, 선택자) 표현 방식으로 DOM 요소를 쉽고 간결하게 접근할 수 있게 해주고, 세밀하게 D..
JavaScript
2018. 6. 12. 19:00
[jQuery] $(document).ready() 메서드를 알아보아요.
jQuery에서 document 객체의 ready 이벤트jQuery를 처음 접하게 되면 예제에서 가장 먼저 마주하게 되는 메서드가 $(document).ready()입니다. jQuery를 사용하면 다음과 같은 형식으로 스크립트를 작성하게 됩니다.사실 이 ready() 메서드는 브라우저가 화면을 모두 render(그림) 한 이후 실행되는 이벤트 메서드입니다.$()라는 jQuery 함수에 브라우저에서 DOM을 관리하는 기본 객체인 document 객체를 넘겨 줍니다.$(document)jQuery는 객체에 대한 이벤트를 다룰 수 있는데, 이 document 객체가 DOM 구조를 모두 형성하고 나면 ready 이벤트를 발생하도록 구현했습니다.$(document).ready()그런데 이 ready() 메서드는 ..
JavaScript
2018. 6. 11. 18:00
[jQuery] jQuery $ 식별자 중복으로 충돌 방지하기
jQuery $ 식별자 충돌 방지하기jQuery는 $.each()와 같이 $ 식별자를 주로 사용합니다. 그런데 여러 자바스크립트 라이브러리를 사용하다 보면 이 $ 식별자를 사용하는 다른 라이브러리와 겹칠 수가 있습니다.예를 들어 PrototypeJS 라이브러리도 jQuery와 같이 $ 식별자를 사용하는데 둘 중 하나는 $ 식별자를 사용할 수 없게되는 문제가 있습니다.다음과 같이 jQuery를 먼저 불러오고 prototype.js를 나중에 불러오면 prototype.js가 $ 식별자를 점유하게 되면서 jQuery의 함수였던 $.each()를 존재하지 않는 함수가 되어버립니다. //prototype.js가 jQuery의 $를 겹쳐쓴다.반대로 jQuery가 $를 점유하게 되면 jQuery를 사용하는데에는 문제..
JavaScript
2018. 6. 9. 00:10
[자바스크립트] 데이터 속성(data-xxx)에 대해
데이터 속성HTML5부터는 데이터 속성이라는 개념이 생겼습니다. 데이터 속성은 HTML 요소의 data-로 시작하는 속성입니다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적입니다.데이터 속성은 data-로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있습니다.예를 들어 다음 input 태그에는 data-value라는 데이터 속성을 제 임의로 만들었습니다. 속성명은 data-value이지만 HTML 표준 속성인 value 속성과는 상관이 없습니다. 제가 임의로 만든 속성이기 때문이죠.데이터 속성의 장점데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고..
JavaScript
2018. 6. 8. 20:00
[자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편
이전글[자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기CSS 선택자를 이용한 DOM 탐색하기HTML5 이전의 자바스크립트 DOM API는 DOM 객체를 탐색하는데 매우 불편함이 존재했습니다. 기껏해야 태그명, id, name 속성을 조건으로 검색하고 자식 또는 부모를 순회하는 방법을 사용해야 했습니다.그래서인지 jQuery같은 DOM 탐색에 특화된 라이브러리는 거의 선택사항이 아니었던 것 같습니다. 그러나 HTML5에 와서는 자바스크립트에도 CSS 선택자를 통한 강력한 DOM 탐색 메서드들이 추가되었습니다.document.querySelector(css 셀렉터)document.querySelectorAll(css 셀렉터)메서드 이름에서 알 수 있듯이 모든 css 셀렉터 형식을 통해서..
JavaScript
2018. 6. 8. 18:09
[자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 고급편
이전글[자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편자바스크립트 CSS 선택자를 이용한 DOM 탐색HTML5 이전의 자바스크립트 DOM API는 DOM 객체를 탐색하는데 매우 불편함이 존재했습니다. 기껏해야 태그명, id, name 속성을 이용하는 정도였습니다. 그러나 HTML5부터는 jQuery같은 라이브러리를 사용하지 않고도 CSS 선택자와 필터를 이용한 강력한 DOM 탐색이 가능하게 되었습니다. 이번 글에서는 자바스크립트 자체 메서드로 CSS 셀렉터를 이용한 DOM 탐색 방법을 알아보겠습니다.간단하게 id, class, 태그명 등을 이용한 탐색 방법은 이전글을 참조해주시기 바랍니다.자바스크립트에서 제공하는 DOM SELECT API이전글에서 설명했지만 간단하게 DOM 요소를 탐색하..
JavaScript
2018. 6. 8. 13:30
[자바스크립트] 자바스크립트 DOM 요소 제거하기
이전글[자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기자바스크립트 DOM 요소 제거하기HTML을 이루는 요소들을 DOM API를 이용하여 제거하는 방법을 알아봅니다. Dom자바스크립트 DOM API를 이용해서 요소를 제거하려면 removeChild(대상 dom 객체) 메서드를 사용하면 됩니다. 이때 removeChild() 메서드의 매개변수로 오는 대상 dom 객체는 자신보다 자식 노드여야만 합니다.즉 h1 요소를 제거하기 위해서는 document.body.removeChild(h1 태그)를 통해 제거해야 합니다. h1 태그는 body 태그의 자식 요소이기 때문입니다.만약 매번 body 객체를 이용해서 지우고 싶지 않다면 DOM 객체의 parentNode 속성을 이용합니다.pa..
JavaScript
2018. 6. 8. 10:34
[자바스크립트] DOM 객체 스타일(style) 변경하기
이전글[자바스크립트] DOM 객체 innerHTML 속성DOM 객체 스타일(style) 변경하기DOM API를 이용하여 요소의 스타일을 변경할 수 있습니다. h1의 스타일을 변경해보겠습니다. DomDOM 객체의 속성에는 style이라는 속성이 존재하는데 이 속성은 요소의 style 정보들을 담고 있는 객체입니다.h1 태그의 텍스트 색상과 배경색을 변경해 보았습니다.style 객체의 속성으로는 우리가 평소에 사용하는 CSS 속성값들을 사용할 수 있는데 주의할 점은 자바스크립트의 식별자로는 -를 사용할 수 없기 때문에 CSS 속성명에서 -를 지우고 첫 글자를 대문자로 변경해야 한다는 점입니다.background-color → style.backgroundColor또한 자바스크립트 문법에 맞게 다음과 같..
