DOM Node 조작해보기(DOM API)

오늘은 DOM API를 이용하여 웹 페이지에서 보여지는 요소를 옮기거나 삭제하거나 복사하는 등 여러 조작을 해보았다.

이전에 배운 querySelector(), querySelectorAll()과 같은 document에서 요소의 이름이나 class, id를 매개변수로 넣어 원하는 요소를 얻는 메소드 이외에 다양한 DOM API를 접해보았다.

 

 

 

 

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Objects

 

 

먼저, Document 객체로 사용할 수 있는 API를 알아보자.

어떠한 HTML 문서가 웹 부라우저에서 로드될 때, 해당 HTML 문서가 바로 Document 객체이다.

이 Document 객체는 HTML의 root node이기도 하다.

이러한 Document 객체로 사용할 수 있는 대표적인 API는 아래와 같다.

메소드/ 속성	설명
getElementById( )	매개변수로 받은 값을 id로 가진 element를 반환해준다. 매개변수는 아래와 같이 쌍따옴표로 표시해주면된다. ex) document.getElementById("elementID");
getElementByClassName( )	매개변수로 받은 값을 class 이름으로 가진 element를 반환해준다. 매개변수는 아래와 같이 쌍따옴표로 표시해주면된다. ex) document.getElementById("elementClassName");
querySelector( )	매개변수로 특정한 CSS 지시자를 받는데 document 내에서 이 CSS 지시자와 일치한 첫번째 element를 반환해준다.  CSS 지시자는 https://www.w3schools.com/cssref/css_selectors.asp를 통해 확인할 수 있다.
querySelectorAll( )	querySelector( )처럼 매개변수로 CSS 지시자를 받아 일치하는 element를 반환하는데 차이점은 querySelectorAll( )은 일치하는 모든 element들을 반환해주는 것이다. 반환타입은 nodelist이다.
createElement( )	이 메소드는 element node를 만들어주는 것이다. HTML에 직접 tage name을 써서 element node를 추가하는 방법도 있지만 이 메소드를 활용해 새로운 element node를 만들 수 있다. ex) var btn = document.createElement("BUTTON");

더 다양한 Document 객체로 사용할 수 있는 API를 알고 싶다면 아래의 사이트를 활용하면 될 것같다.

https://www.w3schools.com/jsref/dom_obj_document.asp

HTML DOM Document Objects

 

 

다음으로, Element 객체로 사용할 수 있는 API를 알아보자.

element 객체는 HTML DOM 내에서 <P>, <DIV>, <a>, <button> 등과 같은 요소를 의미한다.

이러한 Element 객체로 사용할 수 있는 대표적인 API는 아래와 같다.

메소드/ 속성	설명
textConent	이 속성은 해당 element node와 그 node의 자식node의 텍스트 컨텐츠를 반환해주거나 값을 변경할 때 쓸 수 있다. ex)  <div>   안녕하세요.   <p>ratel입니다.</p> </div> var a = document.querySelector("div"); a.textContent => 결과: 안녕하세요.              ratel입니다.
tagName	이 속성은 해당 elment의 태그명을 반환해준다. ex) <p id = "myP"> 안녕하세요.</p> var a = document.getElementById("myP") a.tagName; => 결과: p
innerHTML	이 속성은 해당 element의 컨텐츠를 반환하거나 값을 주고 싶을 때 사용한다. textContent와 다른 점이 있다면 innerHTML은 해당 element 안에 있는 tag같은 것을 포함하여 모든 것을 반환한다. 그리고 값을 주고 싶을 때에도 tag를 함께 넣어 줄 수 있다.
innerText	이 속성은 textContent와 같은 역할을 하지만 차이점이 존재한다. 1. textContent는  <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져오지만 innerText는 "사람이 읽을 수 있는" 요소만 처리한다. 2. textContent는 노드의 모든 요소를 반환하지만 innerText는 숨겨진 요소의 텍스트는 반환하지 않는다. 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다) [출처: https://developer.mozilla.org/ko/docs/Web/API/Node/textContent]
appendChild( )	이 메소드는 매개변수로 받은 값은 해당 element의 마지막 부분에 새로운 자식 노드를 추가하고 싶을 때 사용한다.
closet( )	이 메소드는 매개변수로 CSS 지시자를 받아 해당 element에서 상위 노드로 올라가면서 가장 가까운 위치의 매개변수와 일치하는 것을 반환한다. ex) var closest = element.closest("div");
insertBefore( )	이 메소드는 새로운 노드를 특정 노드 이전 위치에 삽입할 수 있다. ex) node.insertBefore(newnode, existingnode) newnode: 새롭게 넣고 싶은 node existingnode: newnode를 넣고자하는 기준 위치(지정한 기준 위치의 이전에 삽입됨), 만약 null값이면 끝에 삽입.
insertAdjacentHTML( )	insertBefore( )는 매개변수로 지정한 위치의 이전에만 새로운 노드를 삽입할 수 있었지만 insertAdjacentHTML( ) 메소드는 매개변수로 원하는 삽입 위치를 주어 새로운 노드를 추가할 수 있다. ex) node.insertAdjacentHTML(position, text) position: 어떠한 위치에 넣고 싶은지를 정해진 키워드로 값을 줌. text: 넣고 싶은 값 자세한 설명: https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

더 다양한 Element 객체로 사용할 수 있는 API를 알고 싶다면 아래의 사이트를 활용하면 될 것같다.

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Objects