자바스크립트

15. Node 관계 API

Node 객체는 DOM에서 시조와 같은 역할을 하며 모든 DOM 객체는 Node 객체를 상속받는다. *시조 : 어떠한 사상을 처음 개척한 사람 각각의 엘리먼트들은 서로 부모, 자식, 형제/자매 관계로 연결되어있다. 각 엘리먼트들이 어떠한 관계로 연결되어있는지를 Node API를 통해 프로그래밍적으로 확인할 수 있다. Node 관계 API 앞서 설명했다시피 HTML 코드에 있는 문서의 모든 구성요소의 객체는 공통적으로 Node 객체를 상속받는다. 예제코드를 통해 프로그래밍적으로 어떠한 관계로 연결되어있는지 확인해본다. Chelsea Liverpool Tottenham Son Kane Alli body 태그의 id를 start 로 주고 자바스크립트부분에서 해당 엘리먼트의 객체를 변수 A에 담았다. 그럼 A라..

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 라는 태그에 대한 엘리먼트들의 리턴값..