다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

JavaScript Node 자바스크립트 노드

HTML 공부 2015. 3. 5. 21:34

JavaScript Node 자바스크립트 노드


■ 웹 화면의 콘텐츠 영역에 표시되는 요소들은 문서 요소들인데요. 단순하게 생각해서 HTML 태그들입니다. 이번 글에서 알아볼 문서 객체를 이용해서 화면에 표시되고 있는 요소들에 접근해서 속성값을 변경해줄 수 있는데요. 이런 역할을 하는 문서 객체에 대해서 알아보고, 각 요소에 접근하는 방법도 알아보겠습니다.

 

 


 먼저 문서 객체의 구조를 살펴보겠습니다. 

■ 다음과 같은 예제가 있을 때 html 태그 안에 head 태그와  body 태그가 있고 그 안에는 각각 title과 input 태그가 있는데요. 이렇게 각각의 태그 단위를 노드(node)라고 하는데요. 이 노드에는 태그와 같은 '요소 노드'가 있고, "Hello"와 같은 '텍스트 노드'가 있습니다. 


 다음 예제를 보겠습니다. 

■ body 태그 안에 p 태그 또 그 안에 span 태그가 있고 Hello라는 문자열이 있는데요. 여기서 span 태그까지는 '요소 노드'가 되고, "Hello"와 "자바스크립트 문자 객체" 문자열은 '텍스트 노드'가 되는 것입니다. 


 다음은 이런 노드에 접근하는 방법을 알아보겠습니다. 노드에 접근하는 방법은 순차적으로 객체를 따라서 접근할 수도 있고, 메서드를 이용해서 접근할 수도 있는데요. 이번 글에서는 객체 구조를 따라서 순차적으로 접근하는 방법만 알아보고, 다음 글에서 메서드를 이용하는 방법을 정리하겠습니다. 


■ 우리가 보는 브라우저의 최상위 객체는 window이고, 그 아래 문서를 출력하는 document 객체가 있고, 그 안에 각종 태그들이 자리 잡고 있는데요. 예제를 하나 만들어서 순차적으로 접근하는 방법을 이해해 보겠습니다.


■ 예제는 body 태그 안에 'form100'이라는 이름의 form태그를 넣었구요. 그 아래 'btn100'이라는 이름의 버튼요소를 넣었습니다. value 값이 없기 때문에 버튼에는 어떤 문자열도 출력되지 않고 있는데요. 이 button 요소에 순차적으로 접근해서 value 값을 지정해주는 형식을 알아보겠습니다.


■ 가장 최상위 객체부터 순차적으로 접근하고 있는데요. 이때 window 객체는 생략해도 됩니다. 접근하는 형식을 보면 알겠지만, 각 요소의 name 속성으로 접근해서 value 값을 지정해주고 있습니다. 


 이렇게 해서 노드의 개념과 순차적으로 접근하는 형식을 알아봤는데요. 다음 글에서 메서드를 이용해서 노드에 접근하는 방법에 대해서 알아보겠습니다. 수고하셨어요.


저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바