JavaScript

14. jQuery 조회 범위 제한

DOM 에서 특정한 엘리먼트의 하위에 속해있는 엘리먼트를 조회할 땐, 조회하고자하는 엘리먼트를 감싸고있는 상위 엘리먼트 객체에 대해서 getElement(s)By~ 를 사용한다. 위 처럼 특정 엘리먼트 조회 시 jQuery 에서의 사용은 다음과 같다 1) $('a b'); 2) $('b', 'a'); 3) $('a').find('b'); 위 모두 a 엘리먼트에 한해서 b 엘리먼트를 조회하는 것이다. 코드로 확인해보면, Son Messi Tottenham Kane Alli 위와 같이 HTML 엘리먼트들을 만들었다. 자바스크립트 부분이다. Tottenham_id 라는 id를 가진 엘리먼트에 한해서 Tottenham_class 라는 class 명을 가진 엘리먼트들을 조회한 후, css 메소드를 적용하는 것이다..

13. jQuery 속성 제어

DOM 에서 속성 제어 시 getAttribute, setAttribute, removeAttribute 등을 사용했지만, jQuery 에서는 속성 제어 시 attr 이라는 메소드를 사용한다. 코드로 확인해본다. sjh id가 sjh인 jQuery 객체를 변수 a에 담은 후, attr 메소드를 사용한 것이다. a.attr('href') 는 a 객체에 대해서 href 에 대한 내용을 의미하고, a.attr('title') 은 a 객체에 대해서 title 에 대한 내용을 의미하며, removeAttr 은 속성을 제거하는 것이다. 다음의 코드를 하나 더 보기 전에 알아두어야 할 것이 있다. 엘리먼트의 속성값에 접근할 때 attribute 와 property 두 가지 방식이 있다. a.setAttribute('..

12. 조회 API & 속성 API

1. 조회 API 지금까지는 document.getElement(s)By 를 통해 엘리먼트를 조회하고 제어했다. 이것은 document라는 객체에 대한 메소드이다. document 객체는 문서 전체를 의미한다. 따라서 document.getElement(s)By 이것은 해당 문서의 모든 엘리먼트들을 대상으로 조회를 하는 것이다. 만약 찾고자하는 엘리먼트가 어떤 엘리먼트의 하위에 해당되는 엘리먼트라면, 즉 조회의 범위를 좁히고자 한다면 찾고자 하는 엘리먼트들을 속한 상위 엘리먼트에서 getElement(s)By 메소드를 사용한다. 코드로 확인해본다. ManChester United Chelsea Tottenham Son Kane class 와 id를 EPL 로 지정한 li 엘리먼트들을 만들었다. 그중 So..

11. Element 객체 & 식별자 API

Element 객체란? Element 객체란 문서상의 각각의 태그(=엘리먼트)의 내용들을 추상화한 객체이다. 여기서 말하는 문서는 HTML 문서만을 지칭하는 것이 아닌 마크업(와 같은 태그를 이용한 구조) 언어의 모든 문서를 말한다.(HTML, XML 등..) 즉, Element 객체는 모든 마크업언어의 형태인 문서에 대해서 공통적이고 기본적인 기능을 정의하는 표준 또는 규격이라 할 수 있다. HTMLElement 객체란? HTML 문서에 대해 공통적이고 기본적인 기능을 정의하는 표준 또는 규격이라 할 수 있다. 위에서 설명한 Element 객체와 같은 기능을 하는 객체지만 HTML이 앞에 붙은 이유는 HTML 문서에 한정하여 정의된 표준이라는 것이다. HTML 문서에 한정하여 정의한다는 것은 HTML ..

7. getElementsByTagName / getElementsByClassName / getElementById

먼저 document 객체란, 웹페이지 그 자체를 의미하며 웹페이지의 HTML 요소에 접근하기 위해서는 반드시 document 객체로부터 시작해야한다. 보통 HTML은 단순 정보를 주기 위함이고, 자바스크립트를 쓰는 이유는 HTML을 제어하기 위함이다. 제어를 하기 위해서는 제어대상을 찾고 그 대상에게 작업을 한다. 웹페이지의 HTML 요소에 접근하기 위해 document 라는 객체를 사용하고 이 객체의 메소드 중 getElementByTagName을 살펴본다. 말 그대로 태그 이름을 통해 엘리먼트를 가져온다 라는 뜻이다. 예제 코드를 보면, HTML CSS JavaScript ul 태그를 만들고 그 안에 li 태그들을 만들었다. script 안의 내용을 보면, li 라는 태그에 대한 엘리먼트들의 리턴값..

6. window.open 활용

위 코드를 살펴보면, 버튼 타입의 태그 2개와 텍스트타입의 태그 1개를 만들었다. Open 버튼 클릭 시 onclick으로 winopen() 이라는 함수가 호출되고, 텍스트필드에서 onkeypress 를 통해 텍스트 입력 시 winmessage(this.value) 함수가 호출된다. 여기서 this.value는 텍스트필드에 입력한 값이 되며 이 내용에 대한 자세한 부분은 나중에 이벤트부분에서 설명한다. 그 다음 Close 라는 버튼 클릭 시 onclick으로 winclose() 함수가 호출된다. winopen() 함수는, open.html 문서를 작성한 width와 height에 맞게 새 창(window)으로 연다. 정리하면, window.open 이라는 메소드를 통해서 연 새로운 창의 window 객체..