분류 전체보기(14822)
-
DOM 구조도
DOM 구조도DOM은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스입니다. 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장됩니다.이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여줍니다.자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다
-
DOM 요소의 내용 변경-문서 객체의 innerHTML 속성 사용해 내용 변경, 문서 객체의 textContent 속성 사용해 내용 변경, nodeValue 프로퍼티를 사용하여 특정 노드의 값 변경, replaceData() 메소드를 사용하..
DOM 요소의 내용 변경HTML DOM을 이용하면 HTML 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있습니다.· 문서 객체의 innerHTML 속성 사용해 내용 변경 · 문서 객체의 textContent 속성 사용해 내용 변경· nodeValue 프로퍼티를 사용하여 특정 노드의 값 변경· replaceData() 메소드를 사용하여 텍스트 변경 문서 객체의 innerHTML 속성 사용해 내용 변경innerHTML 프로퍼티에 값을 설정하면 브라우저에서는 해당 내용을 파싱하고, 해석 결과를 해당 요소의 자식 요소로 만듭니다.HTML 요소의 속성 이름을 이용하면 속성값도 변경할 수 있습니다. var output = 'Hello World!!'; document.body.textContent..
-
노드의 추가 - insertBefore(), insertData()
노드의 추가 부모노드.insertBefore(새로운자식노드, 기준자식노드); 텍스트노드.insertData(오프셋, 새로운데이터);
-
노드의 탐색
노드의 탐색HTML DOM에서 노드 간의 관계는 다음과 같은 프로퍼티로 정의됩니다.프로퍼티를 이용하여 원하는 노드에 손쉽게 접근할 수 있습니다.공백(줄바꿈)도 텍스트로 취급하여 자식으로 인식됩니다.
-
화면에 문서객체 출력 - appendChild()
화면에 문서객체 출력 //h1 태그 생성 var header = document.createElement('h1'); //텍스트 생성 var textNode = document.createTextNode('Hello DOM'); //노드를 연결 header.appendChild(textNode); document.body.appendChild(header);
-
프로토타입(Prototype)
프로토타입(Prototype)· 속성과 메서드를 포함하는 객체· 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 숨겨진 프로퍼티가 있습니다.· 객체 생성 표기법에 의해 즉 중괄호({})를 이용하여 생성된 모든 객체는 자바스크립트의 표준 객체인 Object의 속성인 prototype 객체(Object.prototype)에 연결됩니다.· 모든 객체는 속성을 상속하는 프로토타입 객체에 연결이 됩니다. · 객체를 생성할 때 결정된 프로토타입 객체는 생성 이후 임의의 다른 객체로 변경하는 것이 가능합니다.· 이는, 부모 객체를 동적으로 바꿀 수 있다는 것입니다. 자바스크립트에서는 이러한 특징을 이용해서 객체 상속등의 기능을 구현합니다.· ECMAScript명세서에는 이 프로퍼티를 [Prototyp..