본문 바로가기

제가 쓴 책/HTML5, CSS3 and JavaScript171

8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체 8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체 여러분은 다음과 같은 형식으로 기존의 노드를 새로운 노드로 바꿀 수 있는데 기존의 노드를 새로운 노드로 바꾸기 위해서는 기준점이 있어야 되는데 바꾸려는 노드의 부모노드에서 replaceChild() 메서드를 사용하면 됩니다. 부모노드.replaceChild(newNode, oldNode) 간단하게 replaceChild() 메서드를 이용하여 기존의 노드를 교체하는 방법에 대해서 알아봅니다. 메모장을 열어서 다음과 같이 body 요소 안에 1개의 p 요소로 이루어진 HTML 문서를 작성합니다. 링컨 작성이 끝났으면 “replaceChildMethod.html”로 저장하고 IE9를 통해서 확인하면 “링컨”이라는 문자열만 나타나게 됩니다... 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.

티스토리툴바