본문 바로가기

자바스크립트 강좌27

8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 지금까지는 HTML DOM에서 “A를 부모 노드로 하는 자식 노드(들)은 어떤 것들이 있는가?”와 같이 조금은 불편하고 복잡한 방법으로 노드에 접근을 했습니다. 하지만 DOM에는 이보다 발전된 형태의 getElementById(), getElementsByTagName() 메서드 2개를 제공하여 원하는 노드에 직접 접근이 가능하도록 지원합니다. 첫 번째 메서드인 getElementById() 메서드는 id 속성을 이용하여 해당 속성을 가진 노드에 접근하는데 사용할 수 있는 메서드이고 두 번째 메서드인 getElementsByTagName() 메서드는 요소(Element) 이름을 이용하여 노드에 접근할 수.. 2013. 8. 6.
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.

티스토리툴바