1. 자식태그
.childNode;
.getElementsBy~(복합구조)
.children
<HTML>
* var litag = doc.getElementByTagName('li); 미리 해놓음 *
↓console찍힌 내용
*childNode 복합구조 getElementsBy .. children 차이점*
-childNode : text도 같이 찾는다
-복합구조 : 복합구조에 해당하는것만 찾는다
-chileren : 종류 상관 없이 모든 태그를 찾는다.
2. 부모태그
parentElement;
parentNode;
- CSS에서는 부모를 찾을 수 없다.
-태그를 대상으로 부모는 항상 하나다. 바로위의 태그
-하나 = 단수
<HTML>
<자식태그선택>
<부모태그 선택>
↓ console 에 찍힌 것
*parentElement & parendNode*
-parentElement : 태그만 찾는다
-parentNode : 빈공간.. 등 포함
<부모태그의 부모태그 찾기>
3. 형제태그
nextSibling;
nextElementSibling;
<형제찾기>
↓ console.log에 찍힌 내용
1. #text
2.<div class=...</div>
*nextSibling & nextElementSibling*
-nextSibling : 텍스트 빈공간 포함. 따라서 console에 text가 찍혔다
-nextElemnetSibling : 태그만 찾는다. 따라서 console.log에 태그가 찍혔다.
<옆의형제의 옆의형제 찾기>
바로 옆 형제 : #text
또 옆 형제 ↓
4. this
<HTML>
<변수에 넣기>
<addEventListner 에서 함수 동작>
<이벤트를 받은 태그를 함수 내에서 다시 다룰 때는 this로 치환해도 된다 >
* 응용 : body - nemo의 부모태그 *
*전체태그모습*
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <JS> 유저의 행위(event) (1) 마우스 (0) | 2017.08.11 |
|---|---|
| <JS> DOM제어 예제1. 버튼 마다 다른함수 주기 (0) | 2017.08.10 |
| <JS>DOM 제어하기(1) (0) | 2017.08.10 |
| <JS> 지역변수(local)와 전역변수(global) (0) | 2017.08.05 |
| <JS> function 예제 (0) | 2017.08.05 |