DOM이란?
DOM(문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스이다.
DOM 은 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
주로 웹 페이지의 요소를 선택, 수정, 추가, 제거할 때 사용된다.
부모, 자식 탐색
자식태그를 기준으로 부모태그를 탐색할 수 있고, 부모태그를 기준으로 자식태그를 탐색할 수 있다.
body태그 안에 div, p태그가 작성된 코드이다.
<body>
<div>
<p>child01</p>
<p>child02</p>
<p>child03</p>
</div>
</body>여기서 자식태그인 p태그를 기준으로 부모태그인 div태그를 탐색해보면
let child03 = document.getElementsByTagName("p")[2];
let divParent = child03.parentNode;이렇게 작성할 수 있다. 먼저 자식태그요소를 가지고와서 parentNode 를 사용하여 부모태그를 탐색한다.
반대로 부모태그를 기준으로 자식태그를 탐색해보면
let parent = document.getElementsByTagName("div")[0];
let children = parent.children;
let child02 = children[1];
child02.style.backgroundColor="pink";이렇게 작성할 수 있다.
이렇게 노드에 접근해 style과 같은 속성을 변경할 수도 있다.
Element 생성, 텍스트, 속성 추가
- element 객체 생성 : createElement("tagName")
-
let txt = document.createTextNode("텍스트 객체 생성"); div.appenChild(txt); //div태그 아래 자식요소로 txt를 넣는다. // <div>텍스트 객체 생성</div>
-
- 텍스트 객체 생성 : createTextNode("text")
-
let div = document.createElement("div"); // <div></div>
-
- 속성 생성 : createAttribute("attrName")
-
let attr = document.createAttributeNode("style"); //style=""; attr.nodeValue = "border: 2px solid blue"; //속성값 넣어준다. // style = "border: 2px solid blue";
-
- 속성 추가 : setAttributeNode(Attribute)
-
div.setAttributeNode(attr); // <div style="border:2px solid blue">텍스트 객체 생성</div> div.setAttribute("style","border:2px solid blue");
-
위의 결과를 바탕으로 전체를 body에 추가하면
document.body.appenChild(div);
//body아래의 자식요소로 위에서 생성한 div태그가 들어간다.예제
원래 있던 img 태그와 내가 만든 img 태그를 바꾸는 예제이다.
// img 엘리먼트 생성
let img = document.createElement("img");
img.setAttribute("src","../img01.png");
//화면에 추가
let div = document.getElementById("imgView");
let chd = document.querySelector("#imgView>img");
div.replaceChild(img,chd); // img와 chd를 바꾼다.
'frontend > JavaScript' 카테고리의 다른 글
| [자바스크립트] 함수 (0) | 2025.05.15 |
|---|---|
| [자바스크립트] nullish 병합 연산자 (0) | 2025.05.15 |
| [자바스크립트] location 객체 (0) | 2025.05.11 |
| [자바스크립트] - 객체 (0) | 2025.05.11 |
| [자바스크립트] 콜백함수 (0) | 2025.05.11 |