[자바스크립트] DOM구조를 통한 태그 접근, Children, Contents, parent, prev, next, first, last

css가 미리 적용되어있는 상태

여러 태그가 존재하는 html문서에서 원하는 태그에 접근한다.

 

children( ) - 선택한 태그의 자식 태그

제일 상위의 div태그인 samplePage에 children를 사용해 자식태그에 파란 테두리를 만들어준다.

또한 콘솔창에 자식이 몇인지도 출력해준다.

바로 아래 div태그 세개가 선택이 되고 갯수는 3이 나오는 것을 확인한다.

 

contents( ) - 선택한 태그의 자식 태그 & 텍스트 태그

content는 children과 같이 자식 태그를 지정하며, 텍스트 태그까지 포함해서 찾아준다.

물론 태그속의 내용인 텍스트 노드에는 테두리가 생기지 않지만 

콘솔의 내용은 텍스트 태그까지 추가된 7개가 나온다.

aqua색의 테두리가 세개의 div영역에 생기고 콘솔엔 7이 찍히는 것을 확인한다.

 

매개변수로 id, class 선택자 주기

children과 contents도 마찬가지로 선택자를 줘서 원하는 태그를 선택할 수 있다.

자식 태그 중 header아이디를 가진 div는 갈색 테두리로,

자식 태그 중 content아이디를 가진 div는 회색 테두리로 변경되며

각각 조건에 해당하는 태그의 갯수는 1이라고 출력된다.

 

first( ), :first 선택자

두 줄 모두 같은 결과를 가져온다.

위는 매개변수에 선택자를 준 경우이고

아래는 리턴된 객체에 메소드를 사용한 경우다. 

ul태그의 자식 태그 중 첫 번째의 배경색이 빨강으로 바꼈다.

 

last( ), :last 선택자

last도 first와 마찬가지로 선택자로 주어질 수도, 함수로 주어질 수도 있다.

ul태그의 자식인 li태그중 마지막 노드의 테두리가 갈색으로 변경되었다.

 

eq( ), :eq( ) 선택자

last나 first대신 eq로 인덱스를 통해 접근할 수도 있다.

 

인덱스 1인 두 번째 li태그의 글색이 녹색으로,

인덱스 2인 세 번째 li태그의 테두리가 녹색으로 변경됬다.

 

parent( ) - 선택한 태그의 부모 태그 접근

children이 자식태그에 접근한다면 parent는 부모태그에 접근한다.

ul태그의 바로 위의 상위태그인 div에 파란 테두리가 생겼다.

parent를 두번 중첩시켜준다면 두 단계 위의 상위태그에 접근하게 된다.

ul.menu > div#content > div#samplePage 로

두 단계 위의 태그인 div에 노란 테두리가 생겼다.

 

parents( ) - 선택한 태그의 모든 상위 태그에 접근

parents는 부모들 이므로 모든 상위 태그를 모두 선택한다.

ul태그의 모든 상위태그의 테두리에 갈색 테두리가 덮어씌워졌다.

 

prev( ), prevAll( ) - 선택된 노드의 이전 형제 노드 선택

ul태그 아래의 li노드중 select클래스를 가진 태그를 지정하고

prev()를 통해 li태그의 바로 이전 형제노드에 접근한다.

select클래스의 li태그의 바로 이전 노드는 data-value=1의 li태그이다.

파란 테두리가 생긴 것을 확인한다.

이번엔 li태그에 :last선택자를 주어 마지막 li태그를 지정하고

prevAll()을 사용해 이전 모든 형제노드를 선택했다.

마지막 노드의 모든 이전 노드에 파란 테두리가 생겼다.

 

next( ), nextAll( ) - 선택된 노드의 이후 형제 노드 선택

select클래스의 li태그를 지정하고

next()를 사용해 바로 이후의 형제 노드를 변경해준다.

지정된 두번째 태그의 바로 이후인 세번째 태그의 테두리가 하늘색으로 변경됬다.

li태그에 :first선택자를 주어 제일 앞의 li태그를 지정하고

nextAll()을 사용해 모든 이후의 태그를 다 선택했다.

첫 번째 태그 이후의 2,3,4번째 태그의 테두리가 모두 갈색으로 변경된다.