[JS] DOM

Updated: 2024.05.24

Categories: javascript

Tags: js, 개념정리

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

DOM : HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model

DOM 기초

Untitled

JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있음

HTML에 JavaScript 적용
1. HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용
2. 아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.
```
1
 <script src="myScriptFile.js"></script>
```
3. 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춤.
4. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행
5. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억
script 삽입 위치

<script> 요소를 추가하는 두 가지 대표적인 사례
1. 안쪽에 추가
  1. head 태그에 script 태그가 들어간 경우, HTML 파싱이 완료되기 전에 scipt 태그를 실행. 따
  2. 따라서 DOM 요소를 조작해야 한다면, 해당 시점에서 존재하지 않는 DOM 요소에 접근하는 문제가 발생할 수 있음
  3. 태그가 파싱되기 전이기에 js 파일이 null을 가지고 작업한다
  4. $(document).ready(function(){ ... }): 이 코드는 문서가 완전히 로드되고 준비된 후에 내부의 함수를 실행하라는 의미입니다. 이를 통해, 모든 HTML 요소들이 로드된 후에 스크립트가 실행되도록 보장합니다. = 해당 쿼리를 사용해야 함.
2. </body>가 끝나기 전에 추가
  1. 이에 따라서 보통 자바스크립트 파일을 body 태그 맨 하단에 작성
  2. 이는 HTML 파싱을 모두 마친 후에 script 태그를 읽기 때문에,
  3. 이미 DOM 객체들도 모두 생성되어 자바스크립트 파일을 문제 없이 실행시킬 수 있다.
  4. 따라서 DOM 요소에 접근해야 하는 자바스크립트 파일의 경우, <body> 태그에 둠
  5. 이와 상관없이 빠르게 실행하려는 자바스크립트 파일이라면 <head> 태그에 두는 것이 좋다.
3. 두 방식의 공통점과 차이점
  1. 두 방식 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하지만, 두 번째 console.log의 경우 제대로 출력하지 못하는 예시가 있습니다.
    1 2 3 4 console.log('welcome JavaScript'); let msgElement = document.querySelector('#msg'); console.log(msgElement);
  2. 에 추가시 null이 콘솔에 출력됨.
async와 defer는 HTML5에 추가된

이들은 HTML 파싱과 스크립트 다운로드를 병렬적으로 진행
1. async
  2. script 태그를 다운받고 실행하는 과정에서 HTML 파싱이 멈추는 문제를 해결할 수 있다.
2. defer
  1. script 태그가 여러 개일 때, defer 속성은 위에서 부터 순서대로 실행하게 한다.
  2. async 속성과 마찬가지로 HTML 파싱을 중단시키지는 않지만, 파싱이 모두 종료된 후 실행하도록 한다.
  3. 이에 따라 원하는 방향대로 스크립트를 실행할 수 있는 것이다.
퀴즈.

id의 이름이 nav인 div 엘리먼트를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 의사 코드(pseudocode)로 작성하세요.

DOM 다루기

JS와 JQuery 두가지 있는데 JQuery는 react등등 사용하지 못하는 곳 이 많음.

JS

완전요약

//div 요소 생성 및 내용생성 - 아직 html내에 보이지않는 상태
const tweetDiv = document.createElement('div');
tweetDiv.textContent = 'hi jerry';

//추가할 클래스 조회 
const findDiv = document.querySelector('.tweet');

// 클래스의 자식요소로 추가 - html의 tweet클래스의 첫번째요소의 자식에 추가된 것이 보임
findDiv.append(tweetDiv);

// 요소에 클래스 추가 
tweetDiv.classList.add('abc');

// 이미있는 클래스에 새로운 클래스 추가
findDiv.classList.add('tweeta');

//remove
//1. 알고 있는 요소만 삭제
tweetDiv.remove();
//2. 해당 클래스만 삭제
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})

//removeChild
//1. TweetList만 남기고 삭제
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
//2. container 내 모두 삭제
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

Untitled

remove -1

Untitled

removeChild-1

Untitled

remove -2

Untitled

removeChild-2

Untitled

요약

Untitled

Create

 const tweetDiv = document.createElement('div');
 tweetDiv.textContent = 'hi jerry';

Untitled

read

 const findDiv = document.querySelector('.tweet');

Untitled

Append

 findDiv.append(tweetDiv);

Untitled

update

 tweetDiv.classList.add('abc');
 findDiv.classList.add('tweeta');

Untitled

Delete

remove() : 삭제하려는 요소의 위치를 알고 있는 경우

 tweetDiv.remove();

Untitled

innerHTML - 보안상 권장안함.

removeChild

container 내 모두 삭제

 const container = document.querySelector('#container');
 while (container.firstChild) {
   container.removeChild(container.firstChild);
 }

Untitled

b. TweetList만 남기고 삭제

 const container = document.querySelector('#container');
 while (container.children.length > 1) {
   container.removeChild(container.lastChild);
 }

Untitled

해당 클래스만 삭제

 const tweets = document.querySelectorAll('.tweet')
 tweets.forEach(function(tweet){
     tweet.remove();
 })
 // or
 for (let tweet of tweets){
     tweet.remove()
 }

Untitled

Create

document 객체의 createElement 메서드
1. 예제 1. 새로운<div>요소 만들기
```
1
 document.createElement('div')
```
2. 변수에 할당
```
1
 const tweetDiv = document.createElement('div')
```
  - 실행결과
3. but, html에는 나타나지 않음.
  1. tweetDiv라는 요소는 현재 공중부양 중
4. 만든 순간 변수에만 담겨져 있고 DOM에는 안 올라가 있음
이후 Append를 통해 트리구조에 연결할 수 있음

Append

CREATE에서 만든 tweetDiv라는 변수는 아직 “공중부양”을 하고 있습니다.
Append Method를 사용해 트리구조에 연결
1. 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append
```
1
 document.body.append(tweetDiv);
```
2. 실행 결과
  1. 개발자 도구 Elements 탭에서 변경사항을 확인할 수 있습니다.

Read

DOM을 이용하여 HTML Element를 조회하는 방법

querySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인
1. 선택자로는 HTML 요소("div"), id, class 세 가지가 가장 많이 사용
2. query 조회하다. querySelector는 선택자를 조회한다는 의미
querySelector
1. 예제 - 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회
```
1
 const oneTweet = document.querySelector('.tweet')
```
  1. 결과
  2. HTML 문서에는 클래스 이름이 tweet 인 요소가 여러 개 있는 데, 변수 oneTweet에 할당된 요소는 단 하나

querySelectorAll

여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll을 사용

 const tweets = document.querySelectorAll('.tweet');

조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있음(iterator 속성을 가지고 있어서) ⇒ but 배열은 아니고 유사배열 : Array-like Object

위 iv의 설명 예제

유사배열

반복문.

  for(let i =0; i<tweets.length; i++){console.log(tweets[i])};

Untitled

참고 : getElementById()

 const getOneTweet = document.getElementById('container')
 const queryOneTweet = document.querySelector('#container')
 console.log(getOneTweet === queryOneTweet) // true

getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소
1. getElementById : querySelector와 비슷한 역할을 하는 오래된 방식-레거시
2. 만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있음. 실제 동작은 동일하니 이런 메서드가 있다는 것 정도는 알아두기

querySelector를 활용하여 요소 추가

tweetDiv를 container의 마지막 자식 요소로 추가

 const queryOneTweet = document.querySelector('#container')
 container.append(tweetDiv);
 // === queryOneTweet.append(tweetDiv);

tweetDiv 생성 (Create) : const tweetDiv = document.createElement(‘div’);
const queryOneTweet = document.querySelector(‘#container’), container.append(tweetDiv);

update

classList.add

Read 5번에서 추가한 tweetDiv

 const tweetDiv = document.createElement('div');
 const queryOneTweet = document.querySelector('#container');
 container.append(tweetDiv);

Untitled

tweetDiv.classList.add(’tweeta’)
1. querySelector로 추가한 tweeta 클래스를 조회할 수 있게 함.
2. tweeta 클래스에 tweet 클래스까지 추가

Delete

요소의 위치를 알고 있는 경우

id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제

 const container = document.querySelector('#container')
 const oneDiv = document.createElement('div')
 container.append(oneDiv)
 oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

여러개의 자식 요소를 삭제 - innerHTML , removeChild

innerHTML

아주 간단하게 모든 자식 요소를 지울 수 있음

 document.querySelector('#container').innerHTML = '';

But, innerHTML은 보안에서 몇 가지 문제를 가지고 있음.

removeChild

모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용

모든 자식요소 삭제 : removeChild와 while을 이용해 자식 요소를 삭제

 const container = document.querySelector('#container');
 while (container.firstChild) {
   container.removeChild(container.firstChild);
 }

자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제
제목에 해당하는 H2 “Tweet List”까지 삭제됨

H2 “Tweet List”만 남기고 삭제

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

클래스 이름이 tweet인 요소만 찾아서 제거

 const tweets = document.querySelectorAll('.tweet')
 tweets.forEach(function(tweet){
     tweet.remove();
 })
 // or
 for (let tweet of tweets){
     tweet.remove()
 }

JQuery

Create

JavaScript의 document.createElement에 해당하는 jQuery 코드는 $('<태그명>')

 $('<div>')
    
 //변수에 할당
 const tweetDiv = $('<div>')
 const $oneDiv = $('<div></div>');
    
 //textContent를 사용해 문자열 입력
 $oneDiv.text('dev');
 console.log($oneDiv); // <div>dev</div>

Append

 //요소를 body에 추가
 $('body').append(tweetDiv);
    
 //내용 추가
 tweetDiv.text('새로운 트윗 내용');
    
 //html 내용 추가
 tweetDiv.html('<strong>새로운 트윗 내용</strong>');
    
 //요소를 특정 컨테이너에 추가
 $('#container').append(tweetDiv);
    
 // 모든 요소를 한 줄로 (html 제외)
 $('<div></div>').text('새로운 트윗 내용').appendTo('body');
    
 //class 추가
 $oneDiv.addClass('tweet');
 console.log($oneDiv); // <div class="tweet">dev</div>
    
 //#container에 oneDiv를 추가
 $('#container').append($oneDiv);
    
 // 콘솔에 $oneDiv의 HTML 코드 출력하여 확인
 console.log($oneDiv.prop('outerHTML'));
    

class와 id 외에 다른 속성을 추가하고 싶다면, .attr() 메서드를 사용
- oneDiv.attr('data-custom', 'value')와 같이 사용하여 data-custom 속성을 추가

Select

 //클래스 이름이 tweet인 요소 중 첫번째 요소 조회
 const oneTweet = $('.tweet').first();
    
 //클래스 이름이 tweet인 모든 요소 조회
 const tweets = $('.tweet');
    
 //**.each()** 메서드를 사용해 각 요소에 대해 반복 작업을 수행할 수 있음
 tweets.each(function(index, element) {
     console.log(index);
 		console.log(element);
 });
    
 //요소에 클래스 추가하고 부모 요소에 추가하기
 $('<div></div>') // 새로운 div 요소 생성
     .addClass('tweet') // tweet 클래스 추가
     .appendTo('#container'); // #container 요소의 마지막 자식으로 추가

Delete

 //tweetDiv 추가 후 삭제하기
 $('#container').append('<div id="tweetDiv"></div>');
 $('#tweetDiv').remove();
    
 //#container 아래 모든 요소 삭제하기
 $('#container').empty();
    
 //모든 자식 요소 삭제하기 (while 사용)
 const $container = $('#container');
 while ($container.children().length > 1) {
   $container.children().first().remove();
 }
    
 //#container의 자식 요소 중 마지막 요소만 남기기
 const $container = $('#container');
 while ($container.children().length > 1) {
   $container.children().first().remove();
 }
    
 //클래스 이름이 tweet인 요소만 찾아서 제거하기
 $('.tweet').remove();

이벤트객체

이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체

[keydown과 keyup](https://www.notion.so/JS-DOM-04fb95218a244052a4ecd3bbaad97e55?pvs=21) / mouseover와 mouseout / load 이벤트 / scroll 이벤트 / 클릭 이벤트

dbclick / [mousenter](https://www.notion.so/JS-DOM-04fb95218a244052a4ecd3bbaad97e55?pvs=21) / [mouseleave](https://www.notion.so/JS-DOM-04fb95218a244052a4ecd3bbaad97e55?pvs=21)

[keypress](https://www.notion.so/JS-DOM-04fb95218a244052a4ecd3bbaad97e55?pvs=21) / focus / blur

input / change / submit

resize / unload / contextmenu

JS

keydown과 keyup 이벤트

addEventListener

 <!DOCTYPE html>
 <html>
 <body>
        
 <p>키보드를 누르고 놓으면 알림이 표시됩니다.</p>
        
 <script>
 document.addEventListener("keydown", function(event) {
   console.log("키 다운: " + event.key);
 });
        
 document.addEventListener("keyup", function(event) {
   console.log("키 업: " + event.key);
 });
 </script>
        
 </body>
 </html>
        

on이벤트함수

 <html>
 <body>
        
 <input type="text" id="keyInput">
        
 <script>
 var input = document.getElementById("keyInput");
        
 input.onKeydown = function() {
   console.log('키 다운');
 };
        
 input.onkeyup = function() {
   console.log('키 업');
 };
 </script>
        
 </body>
 </html>
        

mouseover와 mouseout 이벤트

addEventListener

 <html>
 <body>
        
 <div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
   여기에 마우스를 가져다 대세요.
 </div>
        
 <script>
 var element = document.getElementById("hoverMe");
 element.addEventListener("mouseover", function() {
   console.log('마우스 오버');
 });
 element.addEventListener("mouseout", function() {
   console.log('마우스 아웃');
 });
 </script>
        
 </body>
 </html>

on이벤트함수

 <!DOCTYPE html>
 <html>
 <body>
        
 <div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
   여기에 마우스를 가져다 대세요.
 </div>
        
 <script>
 var div = document.getElementById("hoverMe");
        
 div.onmouseover = function() {
   console.log('마우스 오버');
 };
        
 div.onmouseout = function() {
   console.log('마우스 아웃');
 };
 </script>
        
 </body>
 </html>

load 이벤트

addEventListener

 <!DOCTYPE html>
 <html>
 <body>
        
 <p>이 페이지가 로드되면 콘솔에 메시지가 표시됩니다.</p>
        
 <script>
 window.addEventListener("load", function() {
   console.log('페이지 로드 완료');
 });
 </script>
        
 </body>
 </html>

on이벤트함수

 <!DOCTYPE html>
 <html>
 <body>
        
 <script>
 window.onload = function() {
   console.log('페이지 로드됨');
 };
 </script>
        
 </body>
 </html>

scroll 이벤트

addEventListener

 <!DOCTYPE html>
 <html>
 <body>
        
 <div style="height: 1000px">
   이 페이지를 스크롤하면 콘솔에 메시지가 표시됩니다.
 </div>
        
 <script>
 window.addEventListener("scroll", function() {
   console.log('스크롤 발생');
 });
 </script>
        
 </body>
 </html>

on이벤트함수

        
 <!DOCTYPE html>
 <html>
 <body>
        
 <div id="scrollable" style="width: 100%; height: 100px; overflow: auto;">
   <div style="height: 500px;">
     스크롤해 보세요.
   </div>
 </div>
        
 <script>
 var scrollableDiv = document.getElementById("scrollable");
        
 scrollableDiv.onscroll = function() {
   console.log('스크롤 발생');
 };
 </script>
        
 </body>
 </html>

클릭 이벤트

addEventListener

 <!DOCTYPE html>
 <html>
 <body>
        
 <button id="clickMe">클릭하세요</button>
        
 <script>
 document.getElementById("clickMe").addEventListener("click", function() {
   alert('버튼 클릭됨!');
 });
 </script>
        
 </body>
 </html>
        

on이벤트함수

 <!DOCTYPE html>
 <html>
 <body>
        
 <button id="clickButton">클릭하세요</button>
        
 <script>
 var button = document.getElementById("clickButton");
        
 button.onclick = function() {
   console.log('버튼 클릭됨');
 };
 </script>
        
 </body>
 </html>

이외 JavaScript에서는 다양한 이벤트 리스너

마우스 이벤트

dblclick: 더블 클릭 이벤트

 element.addEventListener('dblclick', function(event) {
     console.log('Element was double-clicked');
 });
    

mouseenter: 마우스 커서가 요소에 들어갈 때

 element.addEventListener('mouseenter', function(event) {
     console.log('Mouse entered the element');
 });
    

mouseleave: 마우스 커서가 요소에서 나갈 때

 javascript코드 복사
 element.addEventListener('mouseleave', function(event) {
     console.log('Mouse left the element');
 });
    

키보드 이벤트

keypress: 키를 누르고 있을 때 (deprecated, keydown이나 keyup 사용 권장)

 javascript코드 복사
 document.addEventListener('keypress', function(event) {
     console.log('Key is being pressed:', event.key);
 });
    

포커스 이벤트

focus: 요소가 포커스를 받을 때

 javascript코드 복사
 element.addEventListener('focus', function(event) {
     console.log('Element received focus');
 });
    

blur: 요소가 포커스를 잃을 때

 javascript코드 복사
 element.addEventListener('blur', function(event) {
     console.log('Element lost focus');
 });
    

입력 이벤트

input: 사용자가 입력할 때 (주로 텍스트 필드에 사용)

 javascript코드 복사
 inputElement.addEventListener('input', function(event) {
     console.log('Input value changed:', event.target.value);
 });
    

change: 요소의 값이 변경될 때 (주로 폼 요소에 사용)

 javascript코드 복사
 inputElement.addEventListener('change', function(event) {
     console.log('Input value changed:', event.target.value);
 });
    

폼 이벤트

submit: 폼이 제출될 때

 javascript코드 복사
 formElement.addEventListener('submit', function(event) {
     event.preventDefault(); // 기본 폼 제출 동작을 막음
     console.log('Form was submitted');
 });
    

기타 이벤트

resize: 창 크기가 변경될 때

 javascript코드 복사
 window.addEventListener('resize', function(event) {
     console.log('Window was resized');
 });
    

unload: 페이지가 언로드될 때

 javascript코드 복사
 window.addEventListener('unload', function(event) {
     console.log('Page is being unloaded');
 });
    

contextmenu: 사용자가 마우스 오른쪽 버튼을 클릭할 때

 javascript코드 복사
 element.addEventListener('contextmenu', function(event) {
     event.preventDefault(); // 기본 컨텍스트 메뉴를 막음
     console.log('Right-clicked on the element');
 });
    

JQuery

keydown과 keyup 이벤트

$(document).on("keydown", function(event) {
  console.log("키 다운: " + event.key);
});

$(document).on("keyup", function(event) {
  console.log("키 업: " + event.key);
});

// Input 예제
$("#keyInput").keydown(function() {
  console.log('키 다운');
});

$("#keyInput").keyup(function() {
  console.log('키 업');
});

2. mouseover와 mouseout 이벤트

$("#hoverMe").mouseover(function() {
  console.log('마우스 오버');
});

$("#hoverMe").mouseout(function() {
  console.log('마우스 아웃');
});

3. load 이벤트

$(window).on("load", function() {
  console.log('페이지 로드 완료');
});

// onLoad는 문서 전체가 아닌 특정 요소에 대해서는 jQuery에서 직접적으로 지원하지 않습니다.
// 대신, DOM이 준비되었을 때 실행되는 $(document).ready()를 사용할 수 있습니다.
$(document).ready(function() {
  console.log('문서 준비됨');
});

4. scroll 이벤트

$(window).scroll(function() {
  console.log('스크롤 발생');
});

// 특정 요소에 대한 스크롤 이벤트
$("#scrollable").scroll(function() {
  console.log('스크롤 발생');
});

5. 클릭 이벤트

$("#clickMe").click(function() {
  alert('버튼 클릭됨!');
});

// 또는 on 메소드를 사용
$("#clickButton").on("click", function() {
  console.log('버튼 클릭됨');
});

Hezzi

[JS] DOM

DOM 기초

DOM 다루기

JS

요약

Create

Append

Read

update

Delete

JQuery

이벤트객체

JS

마우스 이벤트

키보드 이벤트

포커스 이벤트

입력 이벤트

폼 이벤트

기타 이벤트

JQuery

javascript 카테고리 내 다른 글 보러가기

Leave a comment

최근 글 10 개 :)