자바스크립트 HTML DOM Node Lists

HTML DOM NodeList 객체(Object) NodeList 객체는 문서(document)에서 추출된 노드(nodes)의 목록(list)(collection)입니다. NodeList 객체는 HTMLCollection 객체와 거의 같습니다. 일부(이전) 브라우저는, getElementsByClassName()과 같은 메소드에 대해, HTMLCollection 대신 NodeList를 반환합니다. 모든 브라우저는 childNodes 속성에 대해 NodeList 객체(object)를 반환합니다. 대부분의 브라우저는querySelectorAll() 메소드에 대해 NodeList 객체(object)를 반환합니다.. 다음 코드는 문서(document)의 모든 <p> 노드(nodes)를 선택합니다: Example JavaScript HTML DOM! Hello World! Hello Norway! The innerHTML of the second paragraph is: Hello Norway! JavaScript HTML DOM! Hello World! Hello Norway! var myNodelist = document.querySelectorAll(“p”); document.getElementById(“demo”).innerHTML = “The innerHTML of the second paragraph is: ” + myNodelist[1].innerHTML; 주의: 인덱스(index)는 0으로 시작합니다. HTML DOM Node List 길이(Length) length 속성(property)은 노드 목록(node list)에 있는 노드(nodes)의 갯수를 정의합니다: Example JavaScript HTML DOM! […]

자바스크립트 HTML DOM Collections

HTMLCollection 객체(Object) The getElementsByTagName() 메소드는 HTMLCollection 객체(object)를 반환합니다. HTMLCollection 객체는 HTML 요소(elements) 배열같은 목록(array-like list)(collection)입니다. 다음 코드는 문서의 모든 <p> 요소를 선택합니다: Example JavaScript HTML DOM Hello World! Hello Norway! The innerHTML of the second paragraph is: Hello Norway! JavaScript HTML DOM Hello World! Hello Norway! var myCollection = document.getElementsByTagName(“p”); document.getElementById(“demo”).innerHTML = “The innerHTML of the second paragraph is: ” + myCollection[1].innerHTML; 주의: 인덱스(index)는 0으로 시작합니다. HTML HTMLCollection 길이(Length) length 속성(property)은 HTMLCollection에 있는 요소의 갯수(number of elements)를 정의합니다: Example JavaScript HTML DOM Hello World! Hello Norway! This document contains 3 paragraphs. JavaScript HTML DOM Hello World! Hello Norway! var myCollection = document.getElementsByTagName(“p”); document.getElementById(“demo”).innerHTML = “This document contains ” + myCollection.length […]

자바스크립트 HTML DOM Elements (Nodes)

Nodes (HTML Elements)추가 및 제거 새 HTML 요소(Elements) (Nodes) 만들기 HTML DOM에 새 요소(element)를 추가하려면, 먼저 요소(element) (요소 노드(element node))를 만들어야 합니다. 그리고 기존 요소에 이것을 첨부(append)해야합니다. Example This is a paragraph. This is another paragraph. This is new. 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); 예제 설명 이 코드는 새 <p> 요소(element)를 만듭니다: var para = document.createElement(“p”); <p> 요소에 텍스트를 추가하려면, 먼저 텍스트 노드(text node)를 만들어야 합니다. 이 코드는 텍스트 노드를 만듭니다: var node = document.createTextNode(“This is a new paragraph.”); 그런 다음 <p> 요소에 텍스트 노드를 추가해야 합니다: para.appendChild(node); 마지막으로 기존 요소에 […]

자바스크립트 HTML DOM Navigation

HTML DOM으로, 노드 관계(node relationships)를 사용하여, 노드 트리(node tree)를 탐색 할 수 있습니다. DOM 노드(Nodes) W3C HTML DOM 표준에 따르면, HTML 문서(document)의 모든 것이 노드(node)입니다: 전체 문서(entire document)는 document node입니다. 모든 HTML 요소(element)는 element node입니다. HTML 요소(elements)안의 text는 text nodes입니다. 모든 HTML 속성(attribute)은 attribute node입니다. (사용되지 않음(deprecated)) 모든 주석(comments)은 comment nodes입니다. HTML DOM을 사용하여, JavaScript로 노드 트리에 있는 모든 노드에 액세스 할 수 있습니다. 새 노드를 만들 수 있고, 모든 노드를 수정하거나 삭제할 수 있습니다. 노드 관계(Node Relationships) 노드 트리 안의 노드는 서로 계층 관계를 갖습니다. 부모, 자식 및 형제(parent, child, and sibling)라는 용어는 관계를 설명하기 위해 사용됩니다. 노드 트리에서 최상위 노드는 루트 (또는 root node)라고 합니다. 루트(이것은 부모가 없음)를 […]

자바스크립트 HTML DOM EventListener

The addEventListener() method Example 사용자가 버튼을 클릭할 때 작동하는(fires), event listener를 추가합니다: 이 예제에서는, addEventListener() 메소드를 사용하여, 버튼에 click 이벤트를 연결합니다. Try it document.getElementById(“myBtn”).addEventListener(“click”, displayDate); function displayDate() { document.getElementById(“demo”).innerHTML = Date(); } Try it document.getElementById(“myBtn”).addEventListener(“click”, displayDate); function displayDate() { document.getElementById(“demo”).innerHTML = Date(); } addEventListener() 메소드는 지정된 요소(element)에 event handler를 연결합니다. addEventListener() 메소드는 기존 event handlers를 덮어쓰지 않고, 요소(element)에 event handler를 연결합니다. 하나의 요소(element)에 많은 event handlers를 추가할 수 있습니다. 하나의 요소(element)에 같은 유형(type)의 많은 event handlers(예: 2개의 “click” 이벤트)를 추가할 수 있습니다. HTML 요소(elements)뿐만 아니라, 모든 DOM 객체(object)에 event listeners를 추가할 수 있습니다. 즉, 윈도우 객체(window object). addEventListener() 메소드로, 이벤트가 bubbling에 반응하는 방법을, 쉽게 제어할 수 있습니다. addEventListener() 메소드를 사용할 […]

자바스크립트 HTML DOM 이벤트

HTML DOM은 자바스크립트가 HTML 이벤트에 반응하게 합니다: Mouse Over Me Click Me function clickMeEvent(obj) { if (obj.innerHTML == “Click Me”) { obj.innerHTML = “Click Me! Click Me Again!”; return; } if (obj.innerHTML == “Click Me! Click Me Again!”) { obj.innerHTML = “Thank You”; return; } if (obj.innerHTML == “Thank You”) { obj.innerHTML = “Goodbye”; return; } if (obj.innerHTML == “Goodbye”) { obj.style.display = “none”; return; } } 이벤트에 반응하기 사용자가 HTML 요소를 클릭하는 것과 같은 이벤트가 발생할 때, 자바스크립트가 실행될 수 있습니다. 사용자가 요소를 클릭할 때 코드를 실행하려면, HTML 이벤트 속성(attribute)에 자바스크립트 코드를 추가하십시오: onclick=JavaScript HTML 이벤트 예: 사용자가 마우스를 클릭할 때 웹 페이지가 로드되었을 때 이미지가 로드되었을 때 마우스가 […]

자바스크립트 HTML DOM 애니메이션

자바스크립트를 사용하여 Learn to create HTML 애니메이션을 만드는 방법을 배웁니다. 기본 웹 페이지 자바스크립트로 HTML 애니메이션을 만드는 방법을 설명하기 위해, 간단한 웹 페이지를 사용합니다: Example My First JavaScript Animation My animation will go here My First JavaScript Animation My animation will go here 애니메이션 Container 생성 모든 애니메이션은 container 요소와 관련되어야(relative to) 합니다. Example My animation will go here 요소 스타일링 container 요소는 style = "position: relative"로 생성되어야 합니다. animation 요소는 style = "position: absolute"로 생성되어야 합니다. Example #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background: red; } My First JavaScript Animation #container { width: 400px; height: 400px; […]

자바스크립트 HTML DOM – CSS 변경

자바스크립트는 HTML DOM으로 HTML 요소의 스타일을 변경할 수 있습니다. HTML 스타일 변경 HTML 요소의 스타일 변경하려면, 이 구문을 사용합니다: document.getElementById(id).style.property = new style 다음 예제는 <p> 요소의 스타일을 변경합니다: Example Hello World! Hello World! document.getElementById(“p2”).style.color = “blue”; document.getElementById(“p2”).style.fontFamily = “Arial”; document.getElementById(“p2”).style.fontSize = “larger”; 위의 단락은 스크립트로 변경되었습니다. Hello World! Hello World! document.getElementById(“p2”).style.color = “blue”; document.getElementById(“p2”).style.fontFamily = “Arial”; document.getElementById(“p2”).style.fontSize = “larger”; 위의 단락은 스크립트로 변경되었습니다. 이벤트(Events) 사용 HTML DOM으로 이벤트가 발생할 때 코드를 실행할 수 있습니다. HTML 요소에 “어떤 일이 일어나면(things happen)”, 브라우저가 이벤트를 생성합니다: 요소를 클릭합니다.An element is clicked on 페이지가 로드됩니다.The page has loaded 입력 필드(Input fields)가 변경됩니다.Input fields are changed 이벤트에 대한 자세한 내용은, 이 자습서의 다음 장을 […]

자바스크립트 HTML DOM – HTML 변경

JavaScript는, HTML DOM으로, HTML 요소의 내용을 변경할 수 있습니다. HTML 출력 스트림(Output Stream) 변경 자바 스크립트는 동적(dynamic) HTML 콘텐츠를 생성할 수 있습니다: Date: document.write(Date()); 자바스크립트는 document.write()를 사용하여 HTML 출력 스트림(output stream)에 직접 쓸 수 있습니다: Example Tue Feb 13 2018 15:37:23 GMT+0900 (대한민국 표준시) document.write(Date()); 문서(document)가 로드 된 후에는 document.write()를 사용하지 마십시오. 문서를 덮어 씁니다. HTML 내용(content) 변경 HTML 요소의 내용을 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다. HTML 요소의 내용을 변경하려면 다음 구문을 사용하십시오: document.getElementById(id).innerHTML = new HTML 이 예제는 <p> 요소의 내용을 변경합니다: Example New text! 위 문단은 스크립트로 변경되었습니다. Hello World! document.getElementById(“p1”).innerHTML = “New text!”; 예제 설명: 위의 HTML 문서는 id="p1"인 <p> 요소가 있습니다. HTML DOM을 […]

자바스크립트 HTML DOM 요소 (Elements)

이 페이지는 HTML 페이지에서 HTML 요소를 찾아 액세스하는 방법을 알려줍니다. HTML 요소 찾기 자바스크립트로 HTML 요소를 조작하려고 합니다. 먼저 요소를 찾아야 합니다. 여러가지 방법이 있습니다: id로 HTML 요소 찾기 tag name으로 HTML 요소 찾기 class name으로 HTML 요소 찾기 CSS selectors로 HTML 요소 찾기 HTML object collections으로 HTML 요소 찾기 id로 HTML 요소 찾기 DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 id를 사용하는 것입니다. 이 예제에서는 id = “intro”인 요소를 찾습니다: Example 이 예제는 getElementById 메소드를 보여줍니다! Hello World! The text from the intro paragraph is Hello World! Hello World! var myElement = document.getElementById(“intro”); document.getElementById(“demo”).innerHTML = “The text from the intro paragraph is ” + myElement.innerHTML; 요소를 찾으면, 메소드는 […]