Web/JavaScript
-
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:42
JavaScript HTML DOM Node List 노드 목록은 노드의 집합입니다. 1. HTML DOM Node List getElementsByTagName() 메소드는 노드 목록을 반환합니다. 노드 목록은 배열 같은 노드 집합입니다. 아래 코드는 문서의 모든 노드를 가져옵니다. 1var x = document.getElementsByTagName("p");cs 2. HTML DOM Node List Length length 속성은 노드 목록의 노드의 수를 정의 합니다: 1234567891011121314151617181920 Hello World! How many paragraphs in this document? This example demonstrates the length property ..
-
[javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41
JavaScript HTML DOM Elements (Nodes) 1. Creating New HTML Elements (Nodes) HTML DOM에 새로운 요소를 추가하기 위해서, 먼저 요소를 생성하고, 존재하는 요소에 덧붙이면 됩니다. 1234567891011121314 This is a paragraph.This is another paragraph. var para = document.createElement("p");var node = document.createTextNode("This is new.");para.appendChild(node); var element = document.getElementById("div1");element.appendChild(para);Colored by..
-
[javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41
JavaScript HTML DOM Navigation HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다. 1. DOM Nodes W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다: - 전체 문서는 문서 노드입니다. - 모든 HTML 요소는 요소 노드입니다. - 텍스트 내부의 HTML 요소는 텍스트 노드입니다. - 모든 HTML 속성은 속성 노드입니다. - 모든 주석은 주석 노드입니다. HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다. 새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다. 2. Node Relationships 노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다. 부모,..
-
[javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:40
JavaScript HTML DOM EventListener 1. The addEventListener() method 사용자가 버튼을 클릭 했을 때 이벤트 리스너를 추가하는 예제입니다. 12345678910111213141516171819202122 This example uses the addEventListener() method to attach a click event to a button. Try it document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() {document.getElementById("demo").innerHTML = Date();} Colored by Colo..
-
[javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:39
JavaScript HTML DOM Events HTML DOM은 HTML 이벤트의 반응을 자바스크립트에게 허용합니다. 1. Reacting to Events 자바스크립트는 이벤트가 발생할 때 실행되어 질 수 있습니다, 마치 사용자가 HTML 요소를 클릭 했을 때 처럼 말이죠. 사용자가 요소를 클릭 했을 때 코드를 실행시키기 위해, HTML 이벤트 속성에 자바스크립트 코드를 추가해주시면 됩니다. onclick=JavaScript HTML 이벤트의 예제: - 사용자가 마우스로 클릭 했을 때 - 웹 페이지가 로드 되었을 때 - 이미지가 로드 되었을 때 - 마우스가 요소의 위에 올라갔을 때 - 입력 필드가 변경 되었을 때 - HTML 서식이 제출 되었을 때 아래 예제의 텍스트를 클릭하면 텍스트가 바뀝니다: C..
-
[javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:38
JavaScript HTML DOM - Changing CSS 1. Changing HTML Style HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다: document.getElementById(id).style.property=new style 아래 예제는 요소의 스타일을 변경하는 예제입니다: 123456789101112131415161718 Hello World! Hello World! document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger"; The..
-
[javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:37
JavaScript HTML DOM - Changing HTML HTML DOM은 HTML 요소의 내용을 변경 할 수 있게 자바스크립트에게 허용합니다. 1. Changing the HTML Output Stream 자바스크립트는 동적인 HTML 내용을 만들 수 있습니다. document.write()는 HTML 출력 스트림을 직접 작성하는 것 입니다. 1234567891011 document.write(Date()); cs * 문서가 로드가 된 후, document.write()를 사용하지 마세요. 문서에 덮어쓰게 됩니다. 2. Changing HTML Content HTML 요소의 내용을 바꿀때, 아래 문법을 사용합니다. document.getElementById(id).innerHTML = new H..
-
[javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:37
JavaScript HTML DOM Elements 1. Finding HTML Elements 종종 자바스크립트에서, HTML 요소를 조작하기를 원합니다. 이러한 일을 하기 위해, 요소를 찾는 일을 먼저 해야합니다. 이러한 일을 하는 여러 가지 방법이 있습니다: - id를 통하여 HTML 요소 찾기 - tag 이름을 통하여 HTML 요소 찾기 - class 이름을 통하여 HTML 요소 찾기 - HTML 객체 집합을 통해서 HTML 요소 찾기 2. Finding HTML Elements by Id DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 아이디를 이용하는 것 입니다. 1var x = document.getElementById("intro");cs 요소를 찾았다면, 메소드는 요소를 객체로서 ..