[CS] DOM Day-18

DOM

Document Object Model

  • JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법
  • DOM은 JavaScript가 아닙니다. (JavaScript를 이용해 DOM구조에 접근)
  • HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다.
  • 트리 구조
  • Document라는 전역변수로 접근이 가능

기타 상식

$0 는 클릭한 현재 값을 의미한다.

<div id="practice" class="highlight red">
	Here is one Element
</div>

태그 이름 : div
id : practice
class : highlight, red
내용 : Here is one Element

<body>
  <div id="practice" class="highlight red">
      Here is one Element
      <span>자식도 있습니다.</span>
      <span>자식이 여러개 입니다.</span>
  </div>
</body>

기준은 div
부모 엘리먼트 : body (1개)
자식 엘리먼트 : span (2개)

log 와 dir의 차이

ex) console.log 입력시

<input id="username" type="text" placeholder="아이디를 입력하세요">

ex) console.dir 입력시

input#username

속성에 대한 값들을 구체적으로 알아볼 수 있다.

유용한 Element 객체에 대해서 알아보자

  • tagName : 태그 이름 ex) li, div 등등
  • id : id
  • classList : class목록
  • className : class 문자열
  • attributes : 속성 객체
  • style : 스타일 객체
  • innerHTML, innerText, textContent : Element에 담긴 내용
  • value : form 입력 값
  • children : 자식 Element
  • parentElement : 부모 Element
  • childNodes : 자식 노드
  • datest : data- 속성에 담긴 값
  • onclick, onmouseover, onkeyup 등 : 이벤트
  • offsetTop, offsetLeft, scrollTop, scrollLeft, clientTop, clientLeft : 좌표 정보
  • offsetWidth, offsetHeight, scrollWidth, scrollHeight, clientWidth, clientHeight : 크기 정보

children과 childNodes의 차이 (참고 사항)

childeNodes는 자식 Element의 입력값까지 보여준다.
children은 Element가 몇개인지, 무엇인지까지만 알 수 있다.

이벤트

특정 버튼을 눌렀을 때 액션이 발생한다 == 이벤트

ex) HTML

<button>Click</button>

ex) JavaScript function 생성

$0.onclick = function () {
	console.log('Hello World');
}    

ex) JavaScript 이벤트 구현

$0.addEventListener('click', function() {
	console.log('Hello World');
}

Element 선택 방법

JavaScript를 통해 특정 Element를 선택하고 가져오는 방법

  • getElementsByTagName : 태그를 이용
  • getElementById : id를 이용 (id는 unique기 때문에 element다)
  • getElementsByClassName : class를 이용
  • querySelector / querySelectorAll : selector를 이용

현재는 querySelector 와 querySelectorAll에 대해서만 알아본다.

ex)

document.querySelectorAll('.comment')

ex)

let allComments = document.querySelectorAll('.comment')

console.log(allComments[2]);
// 이런식으로 comment class를 불러올 수 있다.

value 등록 방법

function getInputValue() {
	// username을 선택한다.
    // new-tweet을 선택한다.
    
    // username의 값을 얻어온다.
    // new-tweet의 값을 얻어온다.
    
    let elUsername = document.querySelector('#username');
    let elNewTweet = document.getElementById('new-tweet');
    //여기서 querySelector 와 getElementById는 같은 역할을 한다.
    // getElementById의 경우 #을 넣지 않는다.
    
    console.log(elUsername.value);
    console.log(elNewTweet.value);

위와 같은 방법을 통해 console 창에 출력할 수 있다.

button을 통해 getInputValue 불러오기

document.querySelector('#register').onclick = getInputValue;

button 클릭 시 getInputValue를 실행하면서 값을 얻어올 수 있게 된다.

DOM 조작 (innerHTML)

innerHTML 속성은 읽기 뿐 아니라, 쓰기도 가능한 속성입니다.
가장 쉽지만, 느리고 보안에 취약합니다. (textContent를 권장합니다.)

ex) HTML 코드

<div id="target">변경 전</div>

ex) JavaScript

let target = document.querySelector('#target');
target.innerHTML = `
	<span>변경 후</span>
`;

ex) HTML 출력 결과

<div id="target">
	<span>변경 후</span>
</div>

DOM 조작 (메소드)

Element를 만드는 메소드는 반드시 알아야 합니다. innerHTML을 이용한 생성에 비해 다소 복잡하지만 메소드를 이용한 Element 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능한 장점이 있습니다.

ex) HTML

<div id="target">변경 전</div>

ex) JavaScript

let target = document.querySelector('#target');
let newSpan = document.createElement('Span'); // span Element를 만듭니다.
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan); // target 아랫쪽에 newSpan(span)을 추가합니다.

ex) HTML 출력 결과

<div id="target">
	변경 전
    <span>변경 후</span>
</div>

정리 (과정)

  • 새 Element 만들기 (li)
function appendNewComment() {
	let li = document.createElement('li');
    li.className = 'comment';
    li.innterHTML = `<div class="username">KJ</div>`
    let parent = document.querySelector('#view-comments')
    parent.appendChild(li)
}
  • 삽입하기
appendNewComment();

DOM 조작 (<template>태그) => 숙련됐을 때 따로 연습하기

HTML 조각을 HTML 내에 정의할 수 있습니다.

ex) HTML

<template id="will-be-rendered">
	<span>변경 후</span>
</template>

<div id="target">변경 전</div>

ex) JavaScript

let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사합니다.
let newContent = document.importNode(template.content, true);

// target 내용을 비웁니다.
target.innerHTML = '';
target.appendChild(newContent);

좋은 웹페이지 즐겨찾기