DOM

DOM(문서 객체 모델)  //트리 구조

• HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식.
• 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것->문서 내 특정 요소에 접근하는 방법을 제공
• 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공
• 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
• 웹 문서를 하나의 객체로 정의, 모든 요소를 '객체'로 인식하고 처리
• 요소 노드, 텍스트 노드, 속성 노드, 주석노드

트리(계층구조)

노드, 루트, 부모노드, 자식 노드, 형제 노드

 

id선택자로 접근하는 getElementById()메서드//id 빼고 다 element에 s

요소명.getElementById("id명"): 유일값

요소명.querySeletor("css선택자"(#))

요소명.querySeletorAll(): 원소 여러개

class 값으로 접근하는 getElementsByClassName() 메서드

태그 이름으로 접근하는 getElementsByTagName() 메서드

다양한 방법으로 접근하는 querySelector(),querySeletorAll()

노드.querySeletor(선택자)

노드.querySeletorAll(선택자 또는 태그)

 

웹 요소의 내용을 수정하는 innerText, innerHTML

요소명.innerText = 내용//설정

요소명.innerHTML=내용

 

속성을 가져오거나 수정하는 getAttribute(), setAttribute()

getAttribute("속성명")

setAttribute("속성명", "값")

&nbsp: 줄바꿈 없는 공백

 

addEventListener()메서드

요소.addEventListener(이벤트, 함수, 캡처여부);

 

텍스트 노드를 사용하는 새로운 요소 추가하기

1.요소 노드 만들기-createElement()

document.createElement(노드명)

2.텍스트 노드 만들기 - createTextNode()

document.createTextNode(텍스트);

3.자식 노드 연결하기-appendChild()

부모노드.appendChile(자식노드)

document.getElementById("createBtn").addEventListener("click", function(){

        let newItem=document.createElement("li");

        let subject = document.querySelector("#subject");

        let newText = document.createTextNode(subject.value);

        newItem.appendChild(newText);

        let itemList = document.querySelector("#itemList");

        itemList.appendChild(newItem);

        subject.value="";

    })

*기본틀

 document.getElementById().addEventListener("",function(){

    })

parentNode 프로퍼티

노드.parentNode

removeChild()

부모노드,removeChild(자식노드)

 

jQuery는 빠르고 작고 기능이 풍부한 JavaScript라이브러리

 jQuery 라이브러리는 .js 확장자로 작성