Javascript

16. Node 종류 API

말 그대로 Node가 어떤 종류의 Node인가를 확인할 수 있는 기능을 말한다. Node 라는 객체에 있는 여러 프로퍼티들을 출력한다. 대문자로 되어있는 것은 상수라고 한다. 정해져있는 값이라는 의미이다. 이 결과가 의미하는 것은, 어떠한 노드가 엘리먼트 객체에 해당하는 노드라면 ELEMENT_NODE 로 접근할 수 있으며 숫자값은 1이 되고 어떠한 노드가 텍스트에 해당하는 노드라면 TEXT_NODE 로 접근할 수 있고 숫자값이 3이 된다 라는것을 의미한다. Chelsea Liverpool Tottenham Son Kane Alli 위와 같은 코드가 있다고 한다면, start 라는 id값을 가진 body 엘리먼트에 대한 객체를 변수 A에 담았다. 이 body 노드의 nodeType을 확인해보면, 1이라는..

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('..

11. Element 객체 & 식별자 API

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

10. jQuery 알아보기

jQuery 객체란 ? jQuery 함수가 리턴한 값이다. 일반적인 jQuery의 쓰임은 다음과 같다. $('A').B $() 이 부분이 jQuery 함수가 되며 A가 jQuery 함수의 인자값이 된다. A에 대한 jQuery 함수가 리턴한 값이 jQuery 객체가 되는데 그 객체에 대한 프로퍼티가 B 이다. 코드로 확인해본다. Kane Son Alli li 태그들에 대하여 jQuery 함수의 리턴값을 li 변수에 담았다. li 변수는 jQuery 객체가 된다. 브라우저에 웹문서를 열고 개발자도구로 확인해 보았다. jQuery 객체는 유사배열이기 때문에 배열의 값에 대해 사용하는 [] 로 각 배열 데이터를 확인했다. li[1] 은 son 이다. 이 son이라는 값에 대해서 css 메소드를 적용해보려고 했..