JavaScript DOM 문서 객체 모델

DOM (문서 객체 모델)

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.

문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

 

문서에 정의해 놓은 태그나 이런것들을 제공해주는 모델이다.

DOM 모델 HTML의 구조와 요소상하관계 알수있다.

 

• 새로운HTM요소나 속성 추가
• 존재하는 HTML요소나 속성 제거
• HTML문서의 모든 HTML 요소 변경
• HTML 문서의 모든 HTML 속성 변경.. 등이 가능하다.

 

이런것들을 사용하기 위해 쓰는 것들이

Document 객체이다.

 

Document 객체

특정한 html요소에 접근하여 추가, 변경 할 때 사용하는 객체이다.

 

HTML 요소 찾기

• Id로 찾기
• 태그 이름으로 찾기

 

속성

document.documentElement  //이문서의 모든 요소들을 가져옴
document.head                       // 해드테그 가져오기
document.title                         //타이틀 가져오기
document.URL                        //지금 접속한 url가져오기
document.domain                   //현재 접속한 도메인의 http빼고 naver.com 만 가져오는 것

            console.log( document.documentElement );
            console.log( document.head );
            console.log( document.title );
            console.log( document.URL );
            console.log( document.domain );

결과값

---

document.getElementById("input1")

id 이름이 input1인 요소를 가져와라, 1개만 사용가능

 

document.getElementsByClassName("css1") 

class이름이 css1인 모든 요소를 가져와라,얘는 여러개 가져와짐(배열로)

 

document.getElementsByClassName("css1")[0]);

하나만 나타내고싶으면, 배열로 나타낼 수 있다.
가장 위에있는 0번째 인덱스 가져와라.(위에서 아래로 내려가는 순서라 맨위가 0)

 

document.querySelector("#input1")

함수에서 하나의(선택자)를 가져오게 한다.

id input1을 선택하겠다. 몇개가 있든 무조건 한개만 사용! => 선택자의 해당하는 요소들 중 가장 위의 친구를 선택한다.

 

document.querySelectorAll(".css1")

모두 가져오고 싶을때 사용 / css클레스 요소들 다 선택

document.querySelectorAll(".css1")[1])

(배열은 인덱스로 접근 가능하다.)
nodelist : 콜렉션과 반대로 변화를 가져오지 않는 친구. html문서가 바뀌었을때 처음 가져왔던 친구가 노드리스트

        <script>
            console.log( document.getElementById("input1") );
            console.log( document.getElementsByClassName("css1"));
            console.log( document.getElementsByClassName("css1")[0]);
            console.log( document.getElementsByTagName("img"));

            console.log( document.querySelector("#input1"));
            console.log( document.querySelector(".css1"));
            console.log( document.querySelectorAll(".css1"));
            console.log( document.querySelectorAll(".css1")[1]);

결과값

p1.innerText = "<strong>p태그입니다.</strong>";

P1태그에 내용을 삽입

문자로 인식한다.

p1.innerHTML = "<strong>p태그입니다.</strong>";

태그로 인식한다

---

 

12를 넣으면, 콘솔에 12가 도출 된다.

       function getData() {                              
       var input = document.getElementById("input1");
       console.log(input.value);
    }

<button type="button" onclick="getData();">버튼</button>

1.버튼을 누른다. oncilck의 실행으로

2.getdata()라는 함수를 실행한다.

3.함수의 기능을 살펴보면,

id가 input1인 요소를 찾아서 input 변수에 넣기

4. 선택된 요소의 value를 consle에 출력

 

 

var p1 = document.getElementsByClassName("css1")[0]; 
위의 하나로된것을 두개로 아래 두줄 나눠보겠다

(1줄) var pList = document.getElementsByClassName("css1");   //css1의 모든 얘들을 선택하는 변수

(2줄) var p1 = pList[0];     // 변수 p1은 pList(css1의 모든 p태그 얘들)의 [0]번쨰, 즉 첫번째 p태그를 선택한다.

 

---

요소 속성, 스타일 변경

document.getElementById("image").scr = "poodle.png" ;

                                                     속성이름   새로운 속성값

이미지가 바뀐다.

 

document.getElementById("p2").style.color = " blue " ;

                                                   스타일의컬러 속성 = 새로운 속성값

글씨색이 변경된다.

---

 

요소 추가, 삭제 하는 법

 추가 방법

1. 추가하기를 원하는 노드 생성

var node = document.createTextNode("동적으로 추가된 노드");

                  텍스트를 가진 노드를 생성한다.

 

2. 문서 내에서 추가할 위치 찾는다.

var parent = document.getElementById("target");

아이디가 타겟인 요소를 찾아서 반환한다.

 

3. 새로운 노드를 기존 노드에 연결한다.

parent.appendChild(node);

노드를 다른 노드에 자식노드를 추가한다.

.append()	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()	선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.appendTo()	선택된 요소를 해당 요소의 마지막에 추가한다.
.prependTo()	선택된 요소를 해당 요소의 첫번째에 추가한다.

var ul = document.querySelector("ul");

ul.append(li);

ul 요소의 마지막에 li 요소를 추가한다.

 

append는 한번 추가할때 여러개를 넣을 수있는 반면,

appendChild는 한개의 자식 노드만 추가하고, 가장끝에 추가한다.

 

---

삭제 방법

부모요소.removeChild(자식요소)

html요소를 삭제하려면, 부모 노드를 알아야 한다.

부모 노드도 id를 찾으면 알 수 있다.

 

var parent = document.getElementById("target");   //부모 div 노드

var child = document.getElementById("p1");   // 자식 p 노드

parent.removeChild(child);  // 부모 노드를 통해서 자식 노드를 삭제한다.

 

예시2)

var ul = document.querySelector("ul");

var li2 = document.querySelector("li");

ul.removeChild(li2);        

 

 

내 자신 선택해서 삭제하기

var li =document.querySelector("li");

li.remove();

li태그가 하나씩 삭제되는 것을 볼수 있다.

리무브 차일드는 쓰지 않는다.

 

 

 

 

실습2 방명록 만들기

알고리즘 생각해보기
1. 입력될 작성자, 내용에 연결
 2. append는 부모.append(자식) 이다. 여기서는 tr과 그안의 td들을 추가해야 한다.
     = 그래서 tr의 부모요소인 tbody(여기서 안보여서 쿼리 셀렉터로 선택)과  td의 부모요소 tr을 생각한다.
3. 번호에 들어갈것은 tr갯수!

4. createElement()는 추가할 요소를 만드는 메서드 > 요소를 만들기만 해서는 사용할 수 없다. 

    부모.append(자식)선택한 자식요소를 추가한다. 

<!DOCTYPE html>
<html>
    <head>
        <title>방명록 복습</title>
        <script>
            function add(){
            var table = document.querySelector('tbody');    //tr을 위해 지정함
            var tr = document.createElement('tr');          //append는 createElement를 출력하기 위한 도구
            
            var number = document.getElementsByTagName('tr').length; //번호칸에는 tr.length = tr의 갯수

            var name = document.getElementById('name');  //name인풋을 name변수에 지정
            var content = document.getElementById('content');   //content인풋을 content변수에 지정
            var date = new Date();                   //데이트 객체 생성


            var td1 = document.createElement('td');  //추가할 td칸들 나열
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            var td4 = document.createElement('td');

            table.append(tr);  // 추가

            td1.innerText = number;   // number = tr의 갯수값
            td2.innerText = name.value;  //name에 할당된 값을 td2에 넣는다.
            td3.innerText = content.value;  //content에 할당된 값을 td3에 넣는다.
            td4.innerText =                 //td4에 뒤의 값들을 할당한다.
                            date.getFullYear() + "-" +
                            (date.getMonth()+1) + "-" +
                            date.getDate() + " " +
                            date.getHours() + ":" +
                            date.getMinutes();
            
            tr.append(td1, td2, td3, td4); //td1,td2,td3,td4를 추가한다.
            }   
        </script> 
    </head>
    <body>  
        <h1>방명록입니다</h1>
        <form>
            작성자 <input type="text" id="name"><br>
            내용 <input type="text" id="content"><br><br>

            <button type="button" onclick="add();">작성</button><br><br>
            <table id="table" border="1" cellspacing="1" cellpadding="10" style="text-align:center;">
                <tr id="tr">
                    <td id="td1">번호</td>
                    <td id="td2">작성자</td>
                    <td id="td3">내용</td>
                    <td id="td4">작성일</td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

 

 

 

 

---

https://im-developer.tistory.com/22

[JS/DOM] 바닐라 자바스크립트로 간단한 To Do List 만들어보기 - 피드백추가

예시 공부하기