본문 바로가기

체르니 놀이터 보기603

8.2.3 removeChild() 메서드를 이용한 노드의 삭제 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 HTML DOM 트리(Tree)로부터 기존의 노드에 대한 삭제는 다음과 같은 형식의 removeChild() 메서드를 이용하며 자식 노드의 삭제이므로 기본적으로 삭제되는 자식 노드(들)을 가진 부모 노드로부터 호출되어야 합니다. 부모노드.removeChild(delNode) 부모노드의 자식 노드들 중에서 명시한 delNode 노드를 삭제하며 삭제된 노드를 반환합니다. 이제 메모장을 열어서 다음과 같이 코드를 작성합니다. 프로그래밍 운영체제 데이터베이스 위와 같이 id 속성값이 “software”인 div 요소 안에 3개의 p 요소를 작성합니다. 이번 예제에서는 id 속성값이 “os”인 p 요소 노드를 removeChild() 메서드를 이용하.. 2013. 8. 6.
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.

티스토리툴바