[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);

Author And Source

이 문제에 관하여([CS] DOM Day-18), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/CS34

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[CS] DOM Day-18

DOM

기타 상식

log 와 dir의 차이

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

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

이벤트

Element 선택 방법

value 등록 방법

button을 통해 getInputValue 불러오기

DOM 조작 (innerHTML)

DOM 조작 (메소드)

정리 (과정)

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

Author And Source

좋은 웹페이지 즐겨찾기

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