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 값을 지정해주고 있습니다. 

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