티스토리 뷰
- DOM?
Document Object Model. 그러니까 HTML을 구성하는 각 요소들.
자바스크립트의 DOM API를 이용하면 HTML 요소를 찾고 동적으로 변경시킬 수 있다.
- document. 으로 접근가능한 메서드들 (링크)
document.addEventListener()
document.getElementById()
document.getElementByName()
document.querySelector()
document.createElement()
- element. 으로 접근가능한 메서드들 (링크)
element.childNodes()
element.classList()
element.firstChild()
element.contains()
element.innerHTML
- 유용한 속성들
> tagName
> textContent
> nodeType
> childNodes
> firstChild
> firstElementChild: 위의 firstChild와는 달리, 공백이나 텍스트 노드는 제외하고 첫번째 자식
> parentElement
> nextSibling
> nextElementSibling
- 조작 API
> removeChild()
> appendChild()
> insertBefore()
> cloneNode()
> replaceChild()
> closest()
- HTML 조작 예제: appendChild()
var elem = document.createElement("div");
var str = document.createTextNode("test text");
elem.appendChild(str); // <div>test text</div> 가 된다
$0.appendChild(elem); // $0: 크롬 개발자 도구에서 지원하는 기능으로 현재 마우스로 선택된 범위를 지정함
사실 이런 식으로 엘리먼트를 만들고 자식으로 넣고... 하는게 불편하기 때문에 최신 프레임워크 (Angular, Vue...) 들은 이런 것들을 더 쉽게 할 수 있도록 지원한다고 함.
- insertBefore() 예제
var base = document.querySelector(".w3-table-all tr:nth-child(3)");
// w3-table-all이라는 클래스를 가진 태그 하위의 자식 노드 중 3번째이면서 <tr> 태그인걸 찾는다
var parent = document.querySelector(".w3-table-all tbody"); // base의 부모 노드
var div = document.createElement("div");
var str = document.createTextNode("appended here!");
div.appendChild(str);
parent.insertBefore(div, base); // 부모를 기준으로 2번째 인자 element 앞에 1번째 인자를 추가함
- HTML을 문자열로 처리해주는 DOM API
> innerText, innerHTML 속성: 기본적으로 getter이기도 하지만 setter 역할도 할 수 있다. 즉 이 속성에 문자열을 대입하면 appendChild() 같은걸 대신할 수 있음.
var html = parent.innerHTML;
parent.innerHTML = "<p>new child</p>"; // parent 안의 내용이 이걸로 대체됨
$0.innerText += "some text"; // $0의 내용 뒤에 some text를 추가함
> insertAdjacentHTML(position, appendText)
object를 찾은 뒤 그 object를 기준으로 특정한 position에 appendText를 삽입함.
특정한 position이란? (찾은 object가 <p> ... </p> 라는 태그라고 하자)
a) beforebegin: <p> 바로 앞에
b) afterbegin: <p> 바로 뒤에
c) beforeend: </p> 바로 앞에
d) afterend: </p> 바로 뒤에