DoM
-
[javascript] 55. DOM 문서(DOM document) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:36
JavaScript HTML DOM Document HTML DOM에서, 문서 객체(document object)는 웹 페이지 입니다. 1. The HTML DOM Document HTML DOM 객체 모델에서, 문서 객체는 웹 페이지를 나타냅니다. 문서 객체는 웹 페이지의 모든 다른 객체의 주인 입니다. HTML 페이지 내의 객체를 접근 하고 싶을 때, 문서 객체를 접근 하는 것으로 시작 합니다. 2. Finding HTML Elements MethodDescriptiondocument.getElementById()Find an element by element iddocument.getElementsByTagName()Find elements by tag namedocument.getElementsB..
-
[javascript] 54. DOM 메소드(DOM method) - 자바스크립트 강좌Web/JavaScript 2015. 6. 13. 15:36
JavaScript - HTML DOM Methods HTML DOM 메소드는 HTML 요소로 수행 할 수 있는 행위 입니다. HTML DOM 속성은 설정할 수 있고, 변경 가능한 HTML 요소의 값 입니다. 1. The DOM Programming Interface HTML DOM은 자바스크립트에서 접근 할 수 있습니다. DOM 에서, 모든 HTML 요소는 객체로서 정의되어 있습니다. 프로그래밍 인터페이스는 각 객체의 속성과 메소드입니다. 속성(property)는 얻거나 설정 할 수 있는 값 입니다. 메소드(method)는 해야 할 일의 행위 입니다. 2. Example 아래 예제는 아이디가 demo인 요소의 내용을 바꾸는 예제 입니다. 1234567891011 document.getElementByI..
-
[javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:36
JavaScript HTML DOM HTML DOM에서, 자바스크립트는 모든 HTML 문서를 접근하고 변경 할 수 있습니다. 1. The HTML DOM (Document Object Model) 웹페이지가 로드될 때, 브라우저는 페이지의 문서 객체 모델(Document Object Model)을 생성합니다. HTML DOM은 객체의 트리 형태 구조로 되어 있습니다: 객체 모델에서, 자바스크립트는 동적인 HTML을 만들어서 모든 걸 가져올 수 있습니다: - 페이지 내의 모든 HTML 요소를 변경 할 수 있습니다. - 페이지 내의 모든 HTML 속성을 변경 할 수 있습니다. - 페이지 내의 모든 CSS 스타일을 변경 할 수 있습니다. - 존재하는 HTML 요소와 속성을 제거 할 수 있습니다. - 새로운 H..
-
[javascript] 40. 성능(Performance) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:28
JavaScript Performance 1. Reduce Activity in Loops 반복문은 프로그래밍에서 종종 사용됩니다. 반복문 안의 모든 구문은 각 반복문의 반복에 의해 실행됩니다. 2. Reduce DOM Access HTML DOM을 접근하는 것은 다른 자바스크립트 구문과 비교 했을 때 매우 느립니다. 여러 번 DOM 요소에 접근을 해야 한다면, 한번 접근하여 지역 변수로 사용하십시오: 123 obj = document.getElementById("demo");obj.innerHTML = "Hello";cs 3. Reduce DOM Size HTML DOM의 숫자를 적게 유지하십시오. 위처럼하면 페이지 로딩과 랜더링 빠른 속도를 향상 시킬 수 있습니다. 4. Avoid Unnecessar..
-
[PHP] 48. XML DOM Parser - PHP 강좌, PHP5Web/PHP 2015. 6. 13. 14:11
PHP XML DOM Parser 내장된 DOM 파서는 PHP에서 XML 문서를 처리하기 쉽게 해줍니다. 1. The XML DOM Parser DOM 파서는 tree-based 파서입니다. 아래 예제 XML 문서를 봅시다: Jani DOM은 XML을 트리 구조로 봅니다: - 레벨 1: XML 문서 - 레벨 2: 루트 요소: - 레벨 3: 텍스트 요소: "Jani" 2. Load and Output XML XML 파서를 초기화하고, xml을 로드하고, 출력하는 예제입니다: 123456cs 만약 브라우저 윈도우에서 소스보기를 선택하면, 아래와 같이 HTML로 나올 것 입니다: 위 예제는 DOM 문서-객체를 생성하고 note.xml로부터 XML을 로드한 것 입니다. 그 다음 saveXML 함수로 내부 XML..
-
[AngularJS] 10. HTML Event - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:21
AngularJS Events AngularJS는 자신만의 HTML 이벤트 지시어를 가지고 있습니다. 1. The ng-click Directive ng-click 지시어는 AngularJS 클릭 이벤트를 선언합니다. 1234567891011121314151617181920212223 Click Me! {{ count }} var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); Colored by Color Scriptercs a9 2. Hiding HTML Elements ng-hide 지시어는 어플리케이션의 일부분의 가시성을 설정할 때 사용합니다. ng-hide="tru..
-
[AngularJS] 9. HTML DOM - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:20
AngularJS HTML DOM AngularJS는 어플리케이션 데이터를 HTML DOM 요소의 속성과 결합하기 위한 지시어를 가지고 있습니다. 1. The ng-disabled Directive ng-disabled 지시어는 AngularJS 어플리케이션 데이터를 HTML 요소의 속성을 못 쓰게하는 연결입니다. 1234567891011121314151617181920 Click Me! Button {{ mySwitch }} Colored by Color Scriptercs ng-disabled 지시어는 어플리케이션 데이터 mySwitch를 HTML 버튼의 disabled 속성과 연결합니다. ng-model 지시어는 HTML 체크박스 요소의 속성과 mySwitch 값을 연결합니다. mySwitch 값이..