HTML 동적 구현 정리 10.웹페이지 시작하기

01. DOM 객체 생성

• document.createElement("태그이름"); 를 호출하면 HTML태그의 DOM객체를 생성할 수 있다.

let newSpan = document.createElement("span");

---

02. innerHTML 프로퍼티 이용

• innerHTML 프로퍼티를 이용하여 <span>태그에 HTML텍스트 할당

newSpan.innerHTML = "새로 생성된 span입니다."

---

03. setAttribute 메서드 이용

• 선택한요소.setAttribute("속성","속성값")는 선택한 요소의 속성값을 정합니다.

newSpan.setAttribute("class","hello");

---

중간과정 확인 ( DOM 객체 확인 )

<span class="hello">새로 생성된 span입니다.</span>

---

04.DOM트리에 삽입

• 이제 newSpan 객체를 DOM트리에 삽입한다.

• DOM객체를 DOM트리에 삽일할 때 대표적으로 2가지 방법을 활용한다.
• 부모.appendChild(DOM객체); DOM객체를 부모요소의 마지막 자식으로 삽입
• 부모.insertBefore(DOM객체,기준자식); DOM객체를 부모요소의 자식 객체 중 기준자식 앞에 삽입

let p = document.getElementById("p")	//<p id="p">태그의 DOM객체 찾기
p.appendChild(newSpan);
/*result
<p id="p">
<span class="hello">새로 생성된 span입니다.</span>
</p>
*/

---

05.DOM객체의 삭제

• removeChild() 메서드를 이용하면 부모에게서 자식 객체를 떼어낼 수 있다.
  let removeObj = 부모.removeChild(떼어내고자하는 자식객체);

let newSpan = document.getElementById("newSpan");	//myDiv객체 가져오기
let parent = newSpan.parentElement; 				//부모객체 알아내기
parent.removeChild(newSpan);						//부모로부터 newSpan 객체 떼어내기

• DOM객체가 DOM트리에서 제거되면 화면에서 즉각 갱신되어 사라진다.
• 떼어진 newSpan 객체는 DOM트리의 임의의 위치에 다시 부착할 수 있다.

---

참고사이트