JavaScript29 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 지금까지는 HTML DOM에서 “A를 부모 노드로 하는 자식 노드(들)은 어떤 것들이 있는가?”와 같이 조금은 불편하고 복잡한 방법으로 노드에 접근을 했습니다. 하지만 DOM에는 이보다 발전된 형태의 getElementById(), getElementsByTagName() 메서드 2개를 제공하여 원하는 노드에 직접 접근이 가능하도록 지원합니다. 첫 번째 메서드인 getElementById() 메서드는 id 속성을 이용하여 해당 속성을 가진 노드에 접근하는데 사용할 수 있는 메서드이고 두 번째 메서드인 getElementsByTagName() 메서드는 요소(Element) 이름을 이용하여 노드에 접근할 수.. 2013. 8. 6. 8. DOM(Document Object Model) 8. DOM(Document Object Model) 기본적으로 웹문서는 HTML과 XML과 같은 마크업 언어로 작성된 문서로 익스플로러나 Firefox 같은 웹 브라우저는 이렇게 HTML이나 XML 같은 마크업 언어로 작성된 문서들을 여러분이 쉽게 이해할 수 있도록 바꾸는 작업을 수행합니다. 그래서 여러분들을 이러한 브라우저를 통해 문자열에서부터 그림, 테이블 등을 볼 수 있게 되는 것입니다. 그리고 이러한 해석 과정에서 HTML 페이지를 하나의 트리(Tree) 형태의 모델로 저장하는데 이를 DOM(Document Object Model)이라고 합니다. DOM은 HTML 문서를 하나의 트리(Tree) 형태로 나타낼 수 있는데 트리는 노드(node)들로 구성됩니다. 여기서 노드(node)란 DOM 트리에.. 2013. 8. 6. 7.2 Event Method를 이용한 이벤트 처리 7.2 Event Method를 이용한 이벤트 처리 방금 전 이벤트 속성을 이용한 이벤트 처리 방법은 요소에 이벤트 속성을 이용하여 이벤트를 처리하는 형태에 대해서 알아보았습니다. 이 방법은 HTML 요소 태그 내에 JavaScript 코드가 혼용되어 사용되는 조금은 HTML 코드와 JavaScript를 코드 분리와 같은 원칙이 조금은 아쉬운 이벤트 처리 방법이었습니다. 이번에는 편리하게 addEventListener(), removeEventListener() 메서드를 이용하여 이벤트를 처리하는 방법에 대해서 알아봅니다. 7.2.1 addEventListener() 메서드를 이용한 이벤트, 이벤트 핸들러 추가 addEventListener() 메서드는 img, p 등과 같은 HTML DOM 요소에 특정.. 2013. 8. 6. 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 폼(form)과 관련된 이벤트는 하나의 form 요소 안에 동작에 의해서 이벤트가 발생하는것과 관련되며 특별한 경우를 제외하고 거의 모든 HTML 요소들에 적용되며 이와 관련한 이벤트 핸들러를 요약하면 다음과 같습니다. 이벤트 핸들러 속성 설명 onblur 요소가 초점(focus)을 잃었을 때 발생하는 blur 이벤트 처리 onfocus 요소가 초점(focus)을 받았을 때 발생하는 focus 이벤트 처리 oncontextmenu 마우스 오른쪽 버튼을 클릭하면 발생하는 contextmenu 이벤트 처리 onchange 요소에 어떤 변화가 발생했을 때 발생하는 onchange 이벤트 처리 onselect input 요소나 textarea 요소의 텍스트(.. 2013. 8. 6. 이전 1 2 3 4 ··· 8 다음
