JavaScriptDOM(Document Object Model) 검색 결과

해당 글 4건

HTMLElement, HTMLCollection 객체와 DOM 트리

HTMLElement 객체와 DOM Tree이 포스팅에서는 HTMLElement 객체와 DOM(Document Object Model)에 대해 알아봅니다. 문서 개체 모델(Document Object Model, DOM) 은 자바스크립트 Node 개체의 계층화된 트리입니다.HTML 문서를 작성할 때에는 HTML 콘텐츠를 다른 HTML 콘텐츠 내에 캡슐화하게 되는데, 이를 통해 트리(tree)로 표현 가능한 계층 구조가 만들어집니다.대개 이러한 계층 구조나 캡슐화 시스템은 HTML 문서 내에서 들여쓰기 표시를 통해 시각적으로 표시됩니다.브라우저는 HTML 문서를 로딩 시 이 계층 구조를 해석해서 마크업이 어떻게 캡슐화되었는지를 보여주는 노드 개체 트리를 생성합니다.브라우저는 HTML 코드를 해석해서 트리 ..
JavaScript/DOM(Document Object Model) 9년 전

event 란 무엇인가?

이벤트(event)란?이벤트(event)는 어떤 사건을 의미합니다. 브라우저에서의 사건(event)이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미합니다. 이벤트에 대하여다음의 예제는 이벤트 타입 중의 하나입니다. html onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행됩니다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 되는 구조입니다. 이러한 방식을 이벤트 프로그래밍이라고 합니다. event targettarget은 이벤트가 일어날 객체를 의미합니다. 아래 코드에서 타겟은 버튼 태..
JavaScript/DOM(Document Object Model) 9년 전

Document 객체 & Text 객체

도큐먼트 객체 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다. HTMLDocument 객체 HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다. 아래 코드는 이를 보여주고 있습니다. JavaScript //document 객체는 window 객체의 소속이다. console.log(window.document); //document 객체의 자식으로는 Doctype과 html이 있다. console.log(window.document.childNodes[0]); console.log(window.document.childNodes[1]); 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할입니..
JavaScript/DOM(Document Object Model) 9년 전

Node Object(노드 객체)

Node Object Node 객체는 DOM에서 시조와 같은 역할을 합니다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받습니다. Node 객체를 그림으로 나타내면 아래와 같습니다. 오픈튜토리얼 참조 Node 의 주요기능 Node 객체의 주요한 임무는 아래와 같습니다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있습니다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있습니다.Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류 Node..
JavaScript/DOM(Document Object Model) 9년 전