06_DOM

06_DOM.pdf

0.44MB

---

 

 

DOM

• Document Object Model - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것

• 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공

※ 노드 : HTML에 있는 태그를 구조화 하였을 때 각각의 태그

 

요소노드(elements node)와 텍스트노드(textnode)

• 요소노드 : 태그 그 자체를 의미 

• 텍스트노드 : 태그에 기록되어 있는 문자

 

• 텍스트 노드를 가지는 태그와 가지지 않는 태그가 있음

→ 텍스트노드를 가지는 태그 : h?, p … 등등

→ 텍스트노드를 가지지 않는 태그 : img, input …  등등

---

 

#dom.html

   <style>
      .div {
         border: 5px solid black;
         height: 500px;
         width: 800px;
      }
   </style>

---

   <button onclick="func1();">클릭1</button>
   <button onclick="func2();">클릭2</button>
   <button onclick="func3();">삭제 할 요소 추가</button>
   <button onclick="func4();">삭제버튼(부모에서 삭제)</button>
   <button onclick="func5();">삭제버튼(해당객체 삭제)</button>
   
   <div id="d1" class="div"></div>

---

---

 

 

 

 

텍스트 노드가 있는 문서객체 생성

요소노드와 텍스트노드를 생성하고 이를 body노트의 자식으로 포함 가능

메소드	내용
document.createElement(“태그명”)	요소노드 생성
document.createTextNode(“내용”)	텍스트 노드 생성
객체명.appendChild(node)	태그에 자손으로 노드 추가

절차

1) 요소 노드 생성

2) 텍스트 노드 생성

3) 요소 노드에 텍스트 노트 추가

4) body내부의 필요한 위치에 요소 노드 추가

---

[클릭1]버튼 onclick="func1();"

   <script>
      function func1() {
         var d1 = document.getElementById("d1");
         //createElement(태그이름) -> h3태그 생성
         //1. 요소노드 생성
         var h3 = document.createElement("h3");
         var a = document.createElement("a");

         //2. 텍스트노드 생성
         //var textNode = document.createTextNode("<a href='#'>추가문구</a>");
         var textNode = document.createTextNode("추가문구");

         //3.요소노드에 텍스트노드 자식으로 추가 (appendChild : 자식으로 추가)
         //h3.appendChild(textNode);
         a.appendChild(textNode);
         h3.appendChild(a);
         //검은색으로 나오니까 개발자도구(F12)에서 확인

         //**아래 코드와의 차이점 알기
         //h3.innerHTML += "<a href='#'>추가문구</a>";

         //4. html본문에 요소노드 추가
         d1.appendChild(h3);
      }
   </script>      

---

---

 

 

 

 

 

텍스트 노드가 없는 문서객체 생성

요소노드를 생성하고 속성을 설정한 후 이를 body노드의 자식으로 포함 가능

메소드	내용
객체명.속성 = 속성값	태그 속성값 설정
객체명.setAttribute(속성명,속성값)	태그 속성값 설정
객체명.getAttribute(속성명)	태그 속성값 확인
객체명.appendChild(node)	태그에 자손으로 노드 추가

 

절차

1) 요소 노드 생성

2) 생성된 노드 속성 설정

3) body내부의 필요한 위치에 요소 노드 추가

---

[클릭2]버튼 onclick="func2();"

   <script>
        function func2() {
            var d1 = document.getElementById("d1");
            
            //1. 요소노드 생성(img태그)
            var img = document.createElement("img");

            //2. 생성된 노드 속성 설정
            //태그 속성값 설정 : 객체명.속성 = 속성값 
            img.src = "img/sana.jpg"
            img.width = "150";
            img.height = "300";

            //존재하지 않는 속성은 작성해도 줄 수 없음
            //img.testProperty = 'test';
            
            //태그 속성값 설정 (존재하지 않는 속성 추가)
            img.setAttribute("testProperty", 'test');

            //태그 속성값 확인
            console.log(img.getAttribute("testProperty"));

            //3. body내부의 필요한 위치에 요소 노드 추가
            d1.appendChild(img);
        }
   </script>     

---

---

 

 

 

문서 객체 스타일 수정

style객체를 이용하여 문서의 스타일을 변경

 

방법

객체명.style.속성명 = 속성값;

→ 자바스크립트에서 속성명에 ‘-’를 사용할 수 없기 때문에 css 속성 중 ‘-’가 사 용되는 속성명의 경우

카멜표기법으로 변경해서 사용해야 함 (ex. background-color → backgroundColor)

---

[삭제 할 요소 추가]버튼 onclick="func3();"

   <script>
        function func3() {
            var d1 = document.getElementById("d1");
            var obj = document.createElement("p");
            
            //문서 객체 스타일 수정 : 객체명.style.속성명 = 속성값;
            obj.style.border = "1px solid red";
            obj.style.backgroundColor = "pink";
            obj.style.width = "100px";
            obj.style.height = "100px";

            //객체명.setAttribute(속성명,속성값)
            obj.setAttribute("id", "pp");
            d1.appendChild(obj);
        }
   </script> 

---

---

 

 

 

 

문서 객체 제거

페이지에 작성되어 있는 문서의 객체(태그)를 제거하는 것

 

메소드	내용
객체명.remove();	해당 객체 삭제
doucument.removeChild(객체명);	부모객체 내부의 자손태그 삭제

---

[삭제버튼(부모에서 삭제)]버튼 onclick="func4();"

[삭제버튼(해당객체 삭제)]버튼 onclick="func5();"

   <script>
        function func4() {
            var d1 = document.getElementById("d1");
            var pp = document.getElementById("pp");
            d1.removeChild(pp);
        }

        function func5() {
            var pp = document.getElementById("pp");
            pp.remove();
            //d1.remove();
        }
   </script>