DOM - Javascript

DOM(Domcument Object Model)

웹페이지에 접근할 수 있게 해주는 일종의 인터페이스입니다.

 

이는 원본 HTML 문서의 객체 기반으로 표현합니다.

단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어집니다.

 

DOM의 구조는 노드 트리로 표현됩니다.

트리라고 표현하는 이유는 부모 줄기가 여러개의 나뭇가지를 가지고 있고

또 각각의 나뭇가지는 입들을 가질 수 있는 트리의 구조와 같은 구조로 이루어져 있기 때문입니다.

 

이때 html태그는 부모줄기, 루트 요소 안에 있는 태그들은 나뭇가지, 요소 안의 콘텐츠는 잎에 해당합니다.

 

 

DOM - Node 접근

 javascript에 DOM을 조작할 수 있는 API가 존재합니다.

 

Node를 선택하여 접근할 수 있는데,

//id로 dom 객체 선택
let idDom =document.getElementById("name")

//class로 dom 객체 선택
let classDom =document.getElementByClassName("class")

//CSS 선택자로 DOM 객체 선택
let CssSelectorDom =document.querySelector("#class>div.id")

 

 

DOM 속성 변경 - textContent, innerText 그리고  innerHTML

textContent

• The Node.textContent property represents the text content of a node and its descendants.

let idDom =document.getElementById("name")
idDom.textContent = '내용'

innerText

• The Node.innerText is a property that represents the "rendered" text content of a node and its descendants.

idDom.innerText = '내용'

innerHTML

• The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

idDom.inner = '<p>내용<p>'

HTML 요소 추가

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 

이 때 필요한 자바스크립트 속성은 다음과 같습니다.

• .createElement()
• .createTextNode()
• .appendChild()

.createElement()

.createElement( 'h1' ) 

//결과 <h1></h1>

 

.createTextNode()

.createTextNode( 'My Text' )
//My Text라는 문자열 만들기

 

.appendChild()

document.body.appendChild( );

 ()을 body의 자식 요소로 넣게됩니다.