태그를 만나게 된다면 HTMLDivElement라는 클래스의 인스턴스(객체)를 생성하게 되고, 태그를 만나면 HTMLImgElement하는 클래스의 인스턴스를 생성하게 된다는 의미임. 3. 출력 - 마지막으로 웹 브라우저는 생성한 DOM 객체를 가지고 우리가 보고 있는 웹페이지 화면을 만들게 됨. */

09_DOM

Ex02

Insert title here /* DOM을 공부하면서 알아야 할 내용 1. 노드 다루기 - 문서에서 특정 태그 이름을 지닌 노드 찾기 - 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기 - 문서에서 특정 클래스가 적용된 노드 찾기 - 문서에서 특정 id를 가진 노드 찾기 - 자식 노드 찾기 - 부모 노드 찾기 - 형제 노드 찾기 - document.createElemet() 메서드를 사용해서 노드 생성 및 추가하기 - HTMLElement.innerHTML 프로퍼티를 사용해서 노드 생성 및 추가하기 - Node.cloneNode() 메서드를 이용해서 노드 생성 및 추가하기 - 노드 삭제하기 - 노드 이동시키기 - 텍스트 노드 생성 및 추가하기 - 텍스트 노드 내용 변경하기 2. 스타일 다루기 - 스타일 속성값 구하기 - 스타일 속성값 설정하기 - 스타일 속성 제거하기 3. 속성 다루기 - 속성값 구하기 - 속성값 설정하기 - 속성값 제거하기 4. 이벤트 다루기 - 이벤트 리스너 추가하기 - 이벤트 리스너 삭제하기 - 이벤트 발생시키기 - 사용자 정의 이벤트 만들기 */ HEADER

09_DOM

Ex03

Insert title here // 현재 문서의 body 부분을 읽고 난 후에 자바스크립트를 실행하라는 의미. window.onload = function() { // 요소(태그)를 생성하는 방법 // 형식) createElement(tagName); // 형식) creatrTextNode(text) : 텍스트 노드를 생성하는 메서드. let h1_element = document.createElement("h1"); let textNode = document.createTextNode("Hello... DOM"); // 텍스트노드를 h1태그에 자식노드로 추가 h1_element.appendChild(textNode); document.body.appendChild(h1_element); }

09_DOM

Ex04

Insert title here window.onload = function() { // 이미지 태그를 만들어 보자. let img_element = document.createElement("img"); // 이미지 태그에 이미지를 넣기 위해서는 src 속성이 지정되어야 함. img_element.src="../images/mango.jpg"; img_element.width= "200"; img_element.height= "200"; // 해당 이미지 노드를 문서의 본문(body)에 추가해 주어야한다. document.body.appendChild(img_element); }

09_DOM

Ex05

Insert title here onload = function() { let img_element = document.createElement("img"); // 속성을 지정하는 방법 // setAttribute(name, value) : 속성을 지정하는 메서드. img_element.setAttribute("src", "../images/apple.jpg"); img_element.setAttribute("width","200"); img_element.setAttribute("height","200"); document.body.appendChild(img_element); }

09_DOM

Ex06

Insert title here onload = function() { // 문서의 요소를 찾는 방법 - 3가지 // 1. getElementById(id이름): 문서에서 특정 id를 가진 노드 찾기 let header1 = document.getElementById("header_1"); let header2 = document.getElementById("header_2"); // 문서 객체 속성을 변경하는 header1.innerHTML="header_1 id를 가진 요소"; header2.innerHTML="header_2 id를 가진 요소"; } Header1 Header2

09_DOM

Ex07

Insert title here onload = function() { // 문서의 요소를 찾는 방법 - 3가지 // 2. getElementsBytagName(tagName)을 이용하는 방법 // ==> tagName과 일치하는 요소를 배열로 가져오는 매서드. let headers = document.getElementsByTagName("h1"); //headers[0].innerHTML = "getElementsByTagName()"; //headers[1].innerHTML = "getElementsByTagName()"; for(let i=0; i

09_DOM

Ex08

Insert title here onload = function() { // 문서의 요소를 찾는 방법 - 3가지 // 3. querySelector(선택자)를 이용하는 방법 // 3-1. querySelector(산택자) // ==> 가장 처음 선택되는 문서의 선택자 요소를 가져오는 메서드. // 3-2. querySelectorAll(선택자) // ==> 문서의 선택자 요소 전체를 배열로 가져오는 메서드. let header1 = document.querySelector("#header_1"); let header2 = document.querySelector("#header_2") header1.innerHTML ="header_1 id를 가진 요소"; header2.innerHTML ="header_2 id를 가진 요소"; } Header1 Header2

09_DOM

Ex09

Insert title here onload = function() { let header = document.getElementByID("header"); // h1 태그의 문서의 요소를 바꾸어 보자. header.style.border = "1px solid red"; header.style.color = "blue"; header.style.fontStyle = "italic"; header.innerHTML ="방가방가"; } Header

09_DOM

Ex10

Insert title here onload = function() { let header2 = document.getElementById("header_2"); // 특정 요소(태그)를 삭제하는 방법. document.body.removeChild(header2) } Header1 Header2

09_DOM

Ex11

Insert title here onload = function() { let imageNode = document.getElementById("apple"); document.body.removeChild(imageNode); } 사과이미지

09_DOM

Ex12

Insert title here onload = function() { let header = document.getElementById("header"); // 이벤트 처리 작업 header.onclick = function() { alert("글자를 클릭하셨군요!!!"); header.innerHTML = "글자 변경"; } } HEADER

09_DOM

Ex13

Insert title here onload = function() { document.getElementById("btnChannel1").onclick = function() { let myDiv = document.getElementById("myDiv"); myDiv.style.backgroundColor = "yellow"; myDiv.style.width = "100px"; document.getElementById("str").style.color = "red"; } } function go_change() { alert("이벤트 예제입니다."); } 안녕하세요!!!

09_DOM

Ex14

Insert title here onload = function() { let text = document.getElementById("class") text.onclick = function() { text.style.color ="red"; text.innerHTML ="페이지가 변경되었습니다."; } } 이것이 div 요소입니다.

09_DOM

Ex15

Insert title here onload = function() { let p_element = document.createElement("p"); let p_textNode = document.createTextNode("DOM을 이용한 p 태그"); p_element.appendChild(p_textNode); let hr_element = document.createElement("hr"); //

---

태그에 title 속성을 추가하는 방법 hr_element.setAttribute("title","DOM을 이용한 수평선"); document.body.appendChild(p_element); document.body.appendChild(hr_element); }

09_DOM

Ex16

Insert title here onload = function() { // 1.

태그를 만들어야 한다. let p_element =document.createElement("p"); // 2.

태그 안에 들어갈 텍스트 노드를 만들어야 한다. let textNode = document.createTextNode("안녕하세요"); // 3. 텍스트 노드를

태그에 자식 노드로 추가해 주어야 한다. p_element.appendChild(textNode); // 4.