[JavaScript] DOM 조작

 

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.

---

 

1.텍스트 노드 접근

텍스트 노드의 부모노드를 선택후 자식노드의 nodeValue를 통해 텍스트값에 접근,수정한다.

<script>
    function bu1(){
        const ele=document.querySelector('a')
        document.write(ele.nodeName+"<br>")//A
        document.write(ele.nodeType+"<br>")//1(Element node)
        document.write(ele.nodeValue+"<br>")//Null

        const ele2=ele.firstChild
        document.write(ele2.nodeName+"<br>")//#text
        document.write(ele2.nodeType+"<br>")//3
        document.write(ele2.nodeValue+"<br>")//안녕하세요

    }
    
    
</script>



<a>안녕하세요</a>
<button onclick="bu1()">눌러</button>

 

 

 

2.속성(어튜리뷰트) 노드 접근

<style>
    const ele=document.querySelector('a')
    ele.className="newclass"
    ele.classList.add("new2class")
    ele.id='heading'
    ele.setAttribute("newattri","123")
    ele.hasAttribute("newattri")
    ele.getAttribute("newattri")
    ele.removeAttribute("newattri")
    ele.style.color="blue"

</style>

 

 

 

 

3.HTML 콘텐츠 조작

3-1.textContent

텍스트 요소를 취득,변경한다.

 

 

3-2.innerHTML

해당 요소의 모든 자식요소를 포함하는 하나의 문자열을 얻을수있다.(마크업 포함)

 

 

 

 

 

 

 

4.DOM 조작

4-1.createElement(tagname)

태그이름을 가진 요소를 생성

 

 

4-2.createTextNode(text)

텍스트 노드 생성

 

 

4-3.appendChild(Node)

자식요소로 DOM트리에 추가

 

 

4-4.removeChild(Node)

노드를 DOM 트리에 제거

 

 

 

 

 

5.style

const ele=document.querySelector('a')
ele.style.color="blue"

 

 

 

 

6.style 프로퍼티값얻기

function getStyle(elem, prop) {
  return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

 

 

 

 

 

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/js-dom#33-dom-traversing-%ED%83%90%EC%83%89