[TIL] Day16 #DOM

Beanxx·2022년 5월 17일

DOM JavaScript TIL

TIL

목록 보기

16/120

[TIL] Day16
[SEB FE] Day16

☑️ DOM 기초

DOM(Document Object Model): HTML 요소를 JS Object처럼 조작(Manipulation)할 수 있는 Model
- HTML의 아주 작은 부분까지 접근할 수 있는 구조
- HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음

✔️ `script.js`

<script> 요소는 등장과 함께 실행됨

// HTML에 JS 적용
<script src="myScriptFile.js"></script>

`<script>` 요소 추가 방법

<head> 안쪽에 삽입

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>

console.log("welcome JavaScript");

let msgElement = document.querySelector("#msg");
console.log(msgElement);

// welcome JavaScript
// null  <- js 코드 먼저 읽어서 html이 완전히 로딩되기 전에 js 파일이 실행되었기 때문

<body> 요소가 끝나기 전에 삽입

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>

console.log("welcome JavaScript");

let msgElement = document.querySelector("#msg");
console.log(msgElement);

// welcome JavaScript
// <div id="msg">Hello JavaScript!</div>

DOM 구조를 조회할 땐 console.dir이 유용

console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력

// body의 자식 요소 찾기
console.dir(document.body.children)

// 따로 변수 선언을 해서 정보를 저장해두면, 주소를 참조하기 때문에 언제든지 접근 가능
let newsContents = document.body.children[1]
console.dir(newsContents)

// 부모 요소 찾기
console.dir(newsContents.parentElement)

☑️ DOM 다루기

✍🏻 CRUD(Create, Read, Update and Delete)

1️⃣ CREATE

: HTML Element 추가

document.createElement('div')

// <div></div>

// 변수를 선언하고 어떤 작업의 결과를 변수에 할당
const tweetDiv = document.createElement('div')

2️⃣ APPEND

: 생성한 HTML Element를 트리 구조와 연결 (부모 노드에 포함)

document.body.append(tweetDiv)

3️⃣ READ

: HTML Element 조회

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector(셀렉터 조회)첫번째 인자로 Selector를 전달하여 확인
- 주요 Selector: HTML 요소(”div”), id(”#tweetList”), class(.tweet)

4️⃣ querySelector

: 요소 조회

// 클래스 이름이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트 조회
const oneTweet = document.querySelector('.tweet')

// 여러 개의 요소를 한 번에 가져오기 위해선, querySelectorAll 사용
const tweets = document.querySelectorAll('.tweet')

// querySelector와 비슷한 역할을 하는 오래된 방식
const getOneTweet = document.getElementById('container')

✋ 앞서 조회한 HTML 요소들은 배열 ❌

→ 이러한 배열 아닌 배열을 유사 배열, 배열형 객체 등으로 부름 ⇒ Array-like Object

5️⃣ UPDATE

: HTML Element 변경

textContent: 비어있는 div 엘리먼트에 문자열 입력
classList.add: 클래스 추가

const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

// 문자열 입력
oneDiv.textContent = 'dev';
console.log(oneDiv)  // <div>dev</div>

// 클래스 추가
oneDiv.classList.add('tweet');
console.log(oneDiv)  // <div class="tweet">dev</div>

// container의 자식 요소로 추가
const container = document.querySelector('#container');
container.append(oneDiv)

6️⃣ DELETE

: HTML Element 삭제

// 삭제하려는 요소의 위치를 알고 있는 경우 (remove)
const container = document.querySelector('#container');
const tweetDiv = document.createElement('div');
container.append(tweetDiv)
tweetDiv.remove()

----------

// 여러개의 자식 요소를 삭제하는 경우 (innerHTML; 보안상 문제 존재)
document.querySelector('#container').innerHTML = '';

----------

// innerHTML의 보안 문제를 해결하여 대신 쓸 수 있는 removeChild
// removeChild: 자식 요소를 지정해서 삭제하는 메서드
const container = document.querySelector('#container');

// 자식 요소가 남아있지 않을 때까지, 첫번째 자식 요소 삭제
while (container.firstChild) {
	container.removeChild(container.firstChild);
}

-----

// 제목에 해당하는 부분까지 삭제되는 것을 방지
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

-----

// 직접 클래스 이름이 tweet인 요소만 찾아서 삭제
tweets.forEach(function(tweet){
	tweet.remove();
})

// or
for (let tweet of tweets) {
	tweet.remove()
}

✅ Pair Programming - Bare Minimum Requirements

: 임의의 회원가입 창의 id, password 유효성 검사 완료하기
✍🏻 아래와 같이 아이디는 4글자 이상이여야 하며, 비밀번호는 비밀번호 확인과 일치해야 안내 문구가 사라진다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>유효성 검사</title>
  <link rel="stylesheet" href="style.css">
  <script src="validator.js"></script>
</head>

<body>
  <h1>회원가입</h1>

  <fieldset>
    <label>아이디</label>
    <input type="text" id="username">
    <div class="success-message hide">사용할 수 있는 아이디입니다</div>
    <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
  </fieldset>

  <fieldset>
    <label>비밀번호</label>
    <input type="password" id="password">
  </fieldset>

  <fieldset>
    <label>비밀번호 확인</label>
    <input type="password" id="password-retype">
    <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>
  </fieldset>

  <fieldset>
    <button>회원가입</button>
  </fieldset>

  <script src="script.js"></script>
</body>

</html>

// script.js
let elInputUsername = document.querySelector("#username");
let elFailureMessage = document.querySelector(".failure-message");
let elSuccessMessage = document.querySelector(".success-message");

let elPassword = document.querySelector("#password");
let elRePassword = document.querySelector("#password-retype");
let elPasswordMessage = document.querySelector(".mismatch-message");

// 아이디 입력란에 키보드가 눌렸을 때 실행
elInputUsername.onkeyup = function () {
  console.log(elInputUsername.value);
  // isMoreThan4Length 함수가 true일 때
  if (isMoreThan4Length(elInputUsername.value)) {
    // 성공 메시지가 보여야 함
    elSuccessMessage.classList.remove("hide");

    // 실패 메시지가 가려져야 함
    elFailureMessage.classList.add("hide");
  } else {
    // isMoreThan4Length 함수가 false일 때
    // 성공 메시지가 가려져야 함
    elSuccessMessage.classList.add("hide");

    // 실패 메시지가 보여야 함
    elFailureMessage.classList.remove("hide");
  }
};

// 비밀번호 확인 입력란에 키보드가 눌렸을 때 실행
elRePassword.onkeyup = function () {
  // isMatch 함수가 true일 때
  if (isMatch(elPassword.value, elRePassword.value)) {
    // 실패 메시지가 가려져야 함
    elPasswordMessage.classList.add("hide");
  } else {
    // isMatch 함수가 false일때
    // 실패 메시지가 보여야 함
    elPasswordMessage.classList.remove("hide");
  }
};

// 1. 아이디 유효성 검사: 아이디가 4글자 이상이여야 함
function isMoreThan4Length(value) {
  return value.length >= 4;
}

// 2. 비밀번호 유효성 검사: 처음 입력한 비밀번호 내용과 비밀번호 확인란의 내용이 같아야 함
function isMatch(password1, password2) {
  if (password1 === password2) {
    return true;
  } else {
    return false;
  }
}

/* style.css */

body {
  background-color: lightgoldenrodyellow;
}

.hide {
  display: none;
}

Beanxx

FE developer

이전 포스트

[TIL] Day15 #JS_Koans

다음 포스트

[TIL] Day16 #DOM

TIL

☑️ DOM 기초

✔️ `script.js`

`<script>` 요소 추가 방법

☑️ DOM 다루기

1️⃣ CREATE

2️⃣ APPEND

3️⃣ READ

4️⃣ querySelector

5️⃣ UPDATE

6️⃣ DELETE

✅ Pair Programming - Bare Minimum Requirements

[TIL] Day15 #JS_Koans

[TIL] Day17 #이벤트 객체 #DOM

0개의 댓글

[TIL] Day16 #DOM

TIL

☑️ DOM 기초

✔️ script.js

<script> 요소 추가 방법

☑️ DOM 다루기

1️⃣ CREATE

2️⃣ APPEND

3️⃣ READ

4️⃣ querySelector

5️⃣ UPDATE

6️⃣ DELETE

✅ Pair Programming - Bare Minimum Requirements

[TIL] Day15 #JS_Koans

[TIL] Day17 #이벤트 객체 #DOM

0개의 댓글

✔️ `script.js`

`<script>` 요소 추가 방법