[JS] DOM 구조 / javascript로 html 접근

DOM (Document Object Model)

브라우저가 웹 문서를 이해할 수 있도록 구성된 것
html 태그를 동적으로 제어한다
브라우저가 html 페이지를 로드하는 과정에서 태그들은 각기 하나의 객체로 만든다.
html 문서의 내용을 노드트리 구조의 객체들로 나타낸다.

 

요소 선택
자바스크립트에서 DOM 요소를 조작하기 위해서 사용

document ( html 문서의 내용이 들어있다.)

document.getElementById("header")  // header 라는 아이디를 가지고 있는 요소를 찾아서 반환
document.createElement("span");  // span 태그 데이터를 생성 (HTML에는 나오지 않는다.)
!! HTML에 내용을 추가하기위해서 append를 사용한다. !!

header.innerHTML = ""; // 태그 요소 안에 내용을 넣을 수 있다.
header.innerTEXT = ""; // 태그 요소 안에 텍스트 내용을 넣을 수 있다.

 

DOM 구조를 이용한 게시판 만들기

function createContent(index, title, content){
    let _li = document.createElement("li");
    let _span01 = documnet.createElement("span");
    let _span02 = documnet.createElement("span");
    let _span03 = documnet.createElement("span");
    
    // li span span span --> 생성만 함 (변수로만 가지고 있다.)
    // 필요한건 내용 추가하고 span을 li에 넣어줘야한다.
    
    _span01.innerHTML = index;
    _span02.innerHTML = title;
    _span03.innerHTML = content;
    _li.append(_span01);
    _li.append(_span02);
    _li.append(_span03);
    
    // 배열로 설명
    document.querySelector(".border").append(_li);
}

// 데이터베이스의 내용을 받아서
// DTO (Data transfer Object)
// 데이터를 우리가 사용할 형태로 변경해서 받아온다.

let arr = [{index : 1, title : "제목1", content : "내용"}]

function render(){
    document.querySelector(".border").innerHTML = `
        <li>
          <span>인덱스</span>
          <span>제목</span>
          <span>내용</span>
        </li>
    `;
    for(let i = 0; i < arr.length; i++){
        createContent(arr[i].index, arr[i].title, arr[i].content);
    }
}

function postContent(){
    let _title = title_input.value;
    // 아이디 활용 value input 에 입력한 값
    let _content = content_input.value;
    const content = {
        index : arr.length + 1;
        title : _title,
        content : _content
    }
    arr.push(content); // 배열에 요소 추가 (push)
    render();
}