DOM

강주현·2021년 5월 2일
DOMJavaScriptdocument object modeljs
0

javascript

목록 보기
1/1
post-thumbnail
  • 브라우저 환경에서 자바스크립트를 이용하여 HTML 을 조작할 수 있다.
  • Document Object Model 의 약자로, HTML 요소를 객체처럼 조작할수 있는 Model 이다.
  • HTML 의 아주 작은 부분까지 자바스크립트로 접근할수 있다.
  • HTML 은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에, 프로그래밍 언어와 DOM 을 활용하여 HTML 에 접근하고 조작하기 위해 자바스크립트 를 활용해야 한다.
  • 자바스크립트에서 DOM 은 document 객체에 구현이 되어있기 때문에, document 객체를 활용해야 하며, 어디에서나 document 객체를 조회할수 있다.
  • DOM 을 활용하면서, 다양한 CRUD( create 생성, read 조회및 읽기, update 갱신, delete 삭제 ) 를 먼저 이해하는 것이 좋다.

파싱

웹 브라우저가, 코드를 컴파일링 하면서 <script> 를 만나면, HTML 의 파싱을 중단하고, <script> 부분부터 파싱하기 시작한다.

메소드

.dir

  • DOM 을 객체의 모습으로 출력해주는 자바스크립트 내장 메서드이다.

.prepend

  • 첫번째 자식 으로 node 또는 DOMString 개체 집합을 삽입한다.

.append

  • 여러개의 node 와 string 을 추가할수 있다.

  • 마지막 자식 뒤에 node 또는 DOMString 개체 집합을 삽입한다.

  • return 값을 반환하지 않는다.

    const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')

div.append(span)
span.append('span의 텍스트컨텐츠')

/*-------------------------------------------------

 <div>
 	<span>span의 텍스트컨텐츠</span>
 </div>
 
 --------------------------------------------------*/
    const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')

document.body.append(div, 'hello', span, p)
console.log(document.body.append(div, 'hello', span, p)) // undefined

/*-------------------------------------------------

 <body>
 	<div></div>
 	hello
 	<span></span>
 	<p></p>
 </body>
 
 --------------------------------------------------*/

.appendChild

  • 지정된 부모 노드의, 자식 목록의 끝에 노드로 추가한다.
  • append 메서드와 다르게, 오직 node 객체만 받을 수 있으며, 한번에 하나의 노드만 삽입할수 있다.
const div = document.createElement('div')
const span = document.createElement('span')
const p = document.createElement('p')

/*-------------------------------------------------

 <div>
 	<span></span>
 </div>
 
 --------------------------------------------------*/
  • DOMString 개체를 삽입할수 없다.
const span = document.createElement('span')
span.appendChild('span의 텍스트컨텐츠') // TypeError
  • return 값을 반환한다.
const div = document.createElement('div')
const span = document.createElement('span')

console.log(document.body.appendChild(div))  

/*-------------------------------------------------

<div></div>
 
 --------------------------------------------------*/

.innerHTML

  • 보안상으로 위험한 메서드이기 때문에, innerHTML 을 사용하기 보다, textContent 를 사용하는 것이 좋다.

★ textContent 와의 차이점은?

  • .innerHTML 은 해당 요소의 자손들의 모든 HTML 내용 모두를 반환하지만,
    .textContent 는 딱, 단일 text 노드만을 반환한다.

    <!--.innerHTML 사용 시-->

<p> </p>

<!------------------------------------------->

<script>
let str = '화면에 결과가 표시됩니다'

function add(result){
    const p = document.querySelector('p')
    p.innerHTML = `<h1 style="color:blue">` + result + `</h1>` 
}
add(str)
</script>

<!--
< 화면 결과 > 
화면에 결과가 표시됩니다.    
-->
    <!--.textContent 사용시-->

<p> </p>

<!------------------------------------------->

<script>
let str = '화면에 결과가 표시됩니다'

function add(result){
    const p = document.querySelector('p')
    p.textContent = `<h1 style="color:blue">` + result + `</h1>` 
}
add(str)
</script>

<!--
< 화면 결과 > 
<h1 style="color:blue">결과</h1>
-->

.classList

1. .add

  • 클래스 이름을 추가할수 있는 매서드이다.

2. .remove(속성값) / .removeChild

  • .remove
    • 노드를 메모리에서 삭제하고 종료
    • 지정한 속성값을 가지고 있는 노드들 중에 첫번째 노드만 삭제
  • .removeChild : 노드를 메모리세어 삭제하지 않고 그대로 존재하며, 부모노드와 자식노드의 관계를 해제하는 것이다.

HTML 어트리뷰트 조작

  1. 참조 ( getAttribute( 속성이름) )
  2. 변경 ( setAttribute( 바꾸려는 해당 속성이름, 바꾸려는 해당 속성값 ))
  3. 존재확인 ( hasAttribute( 속성이름 ) )
  4. 삭제 ( removeAttribute( 삭제하려는 해당 속성 이름 ) )
<input id="user" type="text" value ="joo">

<script>
  const $input = document.getElementById('user')

  console.log($input.hasAttribute('value')) // <- HTML 어트리뷰트 존재확인
  console.log($input.getAttribute('value')) // <- HTML 어트리뷰트 참조
  console.log($input.setAttribute('value', 'foo')) // <- HTML 어트리뷰터 변경
  console.log($input.removeAttribute('value')) // <- HTML 어트리뷰터 삭제
  
  
  // <input id="user" type="text" value ="foo">
</script>

자식노드 탐색

1. .childNodes

  • 모든 자식 노드를 탐색하여 NodeList 라는 DOM컬렉션 객체를 반환한다.
  • 요소 노드 뿐 아니라 텍스트 노드도 포함하여 반환한다.

2. .children

  • 자식 노드들 중에 요소 노드만 탐색하여 HTMLCollection 이라는 DOM컬렉션 객체를 반환한다.
  • 텍스트 노드를 제외하여 반환한다.
profile
강주현
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자

0개의 댓글