HTML태그들은 트리구조로 되어있다.
트리구조
2번처럼 id를 찾아서 하는것이 가장 흔하고 자주쓰기때문에,,
가장 기초적인 1번으로 태그에 접근해볼것이다.
document.all에서 접근해도되는데 더복잡해지니까 <BODY>에서부터 접근해볼것이다.
(http://koxo.com/lang/js/object/body.html)
<BODY>안에 <TABLE>태그를 생성하였고, 그 안의 <TD>태그에 접근할것이다.
여기!!!라고 써진 글자를 1차원적으로 접근하여 글자를 바꾸는 코드이다.
<TD>여기!!!</TD>에 접근하려면 <BODY>부터 쭉쭉 내려가야하는데
접근할때 사용한 주요스크립트는 아래와같다.
childNodes, firstChild, lastChild : 하위 오브젝트 이동
parentNode : 상위 오브젝트 이동
nextSibling : 같은층내에 다음오브젝트
previousSibling : 같은층내 이전오브젝트
*firstChild, lastChild로 접근한 그림*
*childNodes로 접근한 그림*
위 그림과같은 접근방법으로 접근하는 예제코드는 아래와 같다
********숨겨진코드**********
* <TBODY> : HTML의 DOCUMENT는 트리구조로 되어있는데
본인은 <TABLE>안에 <TBODY>를 코딩하지않아도 웹브라우저에서는 <TBODY>태그를 쓰고잇는것을 알수있다.
* alert(document.body.innerHTML)으로 html태그를 체크
* #text : 그리고 태그사이사이(<TR><TD>)에 #text라는 텍스트가 삽입되어있음에 주의해야한다.
alert(document.body.firstChild.nextSibling.nodeName); 으로 고친다면 <Table>이 출력된다.
마지막으로 한번더 보기!! ※ firstChild : 자식노드 처음으로 이동 ※ lastChild : 자식노드 마지막으로 이동 ※ nextsibling : 다음노드로 이동 ※ parentNode : 이전노드로 이동
'Front-End > HTML' 카테고리의 다른 글
| 메타 태그 ( Meta tag ) 정리 (0) | 2015.02.13 |
|---|---|
| div 태그에서 vertical-align:middle을 사용하고 싶을 때 (0) | 2012.06.25 |
| [HTML] 목록태그 (ul, ol, li, dl, dt, dd) (0) | 2012.05.10 |
| 레이아웃 구성(FrameSet & div) (0) | 2012.04.23 |