[자바스크립트] HTML DOM 요소 / 노드접근 vs 요소접근
DOM요소는 HTML에서 한번에 구현하려니 동작과정을 당최... 알아볼 수가 없어서,
DOM 요소과정을 HTML과 JS로 나누어서 구현해봅니다.
WebPage의 빌드과정
브라우저가 HTML 파일을 읽어와서 화면에 띄우는 과정 → critical rendering path
1) 브라우저가 html, css 파싱해 어떤 것이 화면에 보일지 결정 → Rander Tree 생성
2) 브라우저가 렌더링을 하는 과정
DOM NODE vs Elements 차이
1) DOM
DOM은 Node의 계층 구조로 이루어져 있음, 각 노드는 부모와 children 을 사용할 수 있음
HTML에 있는 태그들은 node를 표현하게 됨
2) DOM Element
노드의 특정 타입
element는 HTML에서 태그로 적은 노드들을 지칭함
<html>, <div>, <title>과 같은 태그들은 전부 element임
주석 , 텍스트 노드들은 HTML태그로 표현되지 않았으므로 element가 아니다.
DOM 프로퍼티
node에만 있는 DOM 프로퍼티와 element에만 있는 DOM 프로퍼티를 구분 해야함
Node.children 과 Node.childNodes는 무엇이 다른지 알아보자
// html
<p><b>Thanks</b> for visit</p>
// javascript
//위에 있는 p태그를 childNodes와 children으로 접근했을 때, 결과가 달라짐
const paragraph = document.querySelector('p');
paragraph.childNodes // NodeList => [HTMLElement, Text]
paragraph.children; // HTMLCollection => [HTMLElement]ChildNodes로 접근 하면 HTMLElement와 children으로 접근했을 때, 결과가 달라짐
1) childNodes로 접근하면 HTMLElement와 Text가 있음
> p 태그 안에는 자식노드로 태그가 있는 element인 thank you 와 for visiting이 있는 것
2) children으로 접근하면 오로지 element만 가져와서 text 노드인 for visiting으로 가져옴
새로운 HTML요소 만들기
1) DOM에 새 요소를 추가하려면 먼저 요소를 생성하고, 다음은 기존 요소에 덧붙임(append)
appendChild() method는 부모의 마지막 자식으로 새 요소를 추가함
// 1) 새로운 p요소를 만듦
var para = document.createElement("p");
// 2) p요소에 텍스트를 추가하면 노드를 생성해야 함, 코드는 텍스트 노드를 생성
var node = document.createTextNode("This is a new");
// 3) e다음 p 요소에 텍스트를 추가함
para.appendChild(node);
// 4) 기존 요소에 새 요소를 추가함
var element = document.getElementById("div1");
// 5) 기존 요소에 새로운 요소를 추가함
element.appendChild(para);2) Node.insertBefore()
참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입(노드가 document 동시에 두 곳에 존재할 수 없음)
3) removeChild() : 기존의 HTML요소를 제거
// 1) 두 개의 자식 노드를 가지는 <div> 요소를 가짐
<div id = "div1">
<p id="p1"> This is a paragraph.</p>
<p id="p2"> This is another paragraph.</p>
</div>
// 2) id = div1을 가진 요소를 찾음
var parent = document.getElementById("div1");
// 3) id= "p1"을 가진 p 요소를 찾음
var child =docuemnt.getElementById("p1");
// 4) 부모로부터 자식 제거
parent.removeChild(child);*** 부모를 참조하지 않고 요소를 제거할 수 있다면 좋은데, DOM은 제거 요소 및 부모 모두를 알 필요가 없음
var child = docuemnt.getElemnetById("p1");
child.parentNode.removeChild(child);
// DOM은 제거할 요소 및 제거요소의 부모 모두를 알아야 한다
// 제거할 자식의 부모 요소를 찾기 위해서 parentNode 속성을 사용한다.4) replaceChild() : 특정 부모 노드의 자식 노드를 다른 노드로 교체함
replacedNode = parentNode.replaceChild(newChild, oldChild);
// newChild는 oldChild를 교체할 새로운 노드임
// oldChild는 교체될 자식 노드이며, replace는 교체된 노드5) 노드목록(HTML DOM)
getElementsByTagsName()은 노드목록으로 반환한다.
노드목록은 배열처럼 반복해 노드들을 접근할 수 있다는 점에서 배열처럼 보이지만, array/join과 같은 메서드를 사용x