- DOM 은 html 문서를 트리형태로 구조화한 인터페이스입니다.
- DOM 을 이용하면 javascript에서 html 문서에 접근하고 탐색 및 조작을 할 수 있습니다.
1. 탐색
<html>
<head>
</head>
<body>
<h1 id="hd"> Welcome </h1>
<p class="pr"> paragraph </p>
<ul>
<li> item1 </li>
<li> item2 </li>
</ul>
</body>
</html>위와 같은 html 문서에서 각 요소들을 선택하기 위해서 document의 메서드인 getElementByid() 또는 querySelector()를 이용할 수 있습니다. 이 메서드들은 주어진 조건에 해당되는 element를 반환합니다.
//id가 hd인 요소
var heading = document.getElementById("hd");
//class가 pr인 요소
var paragraph = document.querySelector(".pr");
//li 중 2번째 자식
var li2 = document.querySelector("li:nth-child(2)");querySelector()는 css의 selector를 매개변수로 받습니다.
즉, id는 #id class는 .classname section의 자손 중 li는 section li 와 같은 식입니다.
해당되는 요소를 모두 찾아야할 경우에는 querySelectorAll()을 사용합니다. 이때 반환값은 배열(Nodelist)입니다.
단, 진정한 배열은 아니므로 배열의 메서드를 사용하려면 Array.from(nodelist) 로 변환해줄 필요가 있습니다.
* Array.from은 ecma-262 6판에 추가되었으므로 이전 버전에서 이를 사용하기 위해서는 아래 링크에 있는 polyfill 을 추가해주어야 합니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
2. element의 생성, 추가 및 삭제
// item3 추가
var li3 = document.createElement("li");
var str3 = document.createTextNode("item3");
li3.appendChild(str3);
var ul = document.querySelector("ul");
ul.appendChild(li3);
// item2.5 추가
var li4 = document.createElement("li");
var str4 = document.createTextNode("item2.5");
li4.appendChild(str4);
ul.insertBefore(li4, li3);
//item4 추가
ul.insertAdjacentHTML("beforeend", "<li>item4</li>");① document.createElement() 로 element를 만듭니다.
② element 안에 들어갈 TextNode를 만든 다음,
③ element.appendChild()로 element 안에 text를 넣어주는 과정이 필요합니다.
이렇게 완성된 element는 부모 element에 appendChild()를 이용해 추가할 수 있습니다.
element.insertBefore(new, target) 메서드는 target 요소의 바로 앞에 new element를 추가합니다.
element.insertAdjacentHTML("위치","html") 은 요소를 따로 만들지 않고 html text를 매개변수로 받아 해당 위치에 넣어줍니다.
begin과 end를 기준으로 beforebegin afterbegin beforeend afterend 네 가지 선택지가 있습니다.
//beforebegin
<ul> // begin
//afterbegin
<li> item1 </li>
<li> item2 </li>
//beforeend
</ul> //end
//afterend삭제는 element.remove() 메서드나 removeChild() 를 사용합니다.
//item1 삭제
var li1 = document.querySelector("li:nth-child(1)");
li1.remove();
//item2 삭제
ul.removeChild(li2);
//item2.5 삭제
ul.firstChild.remove();
// ul 삭제
li4.parentNode.remove();firstChild, parentNode로 해당 요소의 부모나 자식 요소에 접근할 수 있습니다.
* 다만, Gecko 기반 브라우저의 경우 공백을 나타내기 위해 텍스트 노드를 삽입합니다.
따라서 firstChild, previousSibling으로 얻은 노드가 이런 텍스트 노드( #text )일 수 있습니다.
한편, 탐색된 노드의 부모에 접근하기 위해 parentNode를 반복 사용하는 것보다 효율적인 방법은 element.closest() 입니다.
li4.closest("ul").remove();
'Front-end > Javascript' 카테고리의 다른 글
| History API를 이용한 시간 여행 (0) | 2024.05.16 |
|---|---|
| AJAX를 왜 사용하는가 (0) | 2023.05.08 |
| Javascript - JSON 데이터 조작하기. (배열과 객체) (0) | 2021.11.28 |
댓글