Javascript_DOM 조작 및 객체

1. DOM 조작 및 제어 객체

*  document 객체 : 현재 웹 페에지를 나타내며, DOM 요소를 접근하고 조작하는 데 사용.

document.getElementById(): 지정된 아이디를 가진 요소를 가져옴
document.querySelector(): CSS 선택자와 일치하는 첫 번째 요소를 가져옴
document.createElement(): 새로운 HTML 요소를 생성
document.addEventListener(): 이벤트를 요소에 등록

//예시 코드
const myElement = document.getElementById('myElement');
const firstParagraph = document.querySelector('p'); // Tag 선택
const firstParagraph = document.querySelector('#pId'); // ID 선택
const firstParagraph = document.querySelector('.p'); // class 선택
const newDiv = document.createElement('div');
document.addEventListener('click', handleClick);

2. 브라우저 및 전역 제어 객체

* 브라우저 창과 전역 기능을 제공하는 객체

* window 객체: 브라우저 창을 나타내며, 브라우저의 전역 속성 및 메서드를 제공

window.alert(): 경고 대화상자 표시
window.confirm(): 확인 대화상자 표시
window.setTimeout(): 일정 시간이 지난 후 함수 실행
window.location: 현재 문서의 URL 정보를 제공

//예시코드
window.alert('hello,world')
const isConfirmed = window.confirm('Are you sure?');
window.setTimeout(() => console.log('Delayed message'), 2000);
console.log(window.location.href);

* navigator 객체: 브라우저와 사용자의 환경 정보를 제공

navigator.userAgent: 브라우저 정보를 전환
navigator.geolocation.getCurrentPosition(): 사용자의 현재 위치를 가져옴
navigator.onLine: 네트워크 상태 확인

//코드예시
console.log(navigator.userAgent);
navigator.geolocation.getCurrentPosition(position) => {
	console.log('Latitude:', position.coords.latitude);
    console.log('longitude:', position.coords.longitude);
});
console.log('Is online:', navigator.onLine);

* history 객체: 페이지 이동과 관련된 기록을 관리

history.back(): 이전 페이지로 이동
history.forward(): 다음 페이지로 이동
history.go(): 특정 위치로 이동

//코드 예시
history.back() // 이전 페이지로 이동
history.forward() // 다음 페이지로 이동
history.go(-1); // 이전 페이지로 이동

* loaction 객체: 현재 웹페이지의 URL 정보를 제공합니다.

location.href: 현재 페이지의 URL 반환
location.reload(): 페이지 새로 고침
location.assign(): 새로운 URL로 이동

//예시 코드
console.log(location.href)
loaction.reload(); // 페이지 새로 고침
loaction.assign('<https://www,example.com>');

3. 데이터 저장 객체

* 클라이언트 측에서 데이터를 저장하고 관리하는 객체

* localStorage 객체: 로컬에 데이터를 영구적으로 저장, 브라우저를 닫아도 데이터가 유지

localStorage.setItem(): 데이터를 저장
localStorage.getItem(): 데이터를 가져옴
localStorage.removeItem(): 데이터를 삭제

//예시 코드
localStorage.setItem('username', 'john_doe');
const username = localStorage.getItem('username')
console.log('Username:', username);
localStorage.removeItem('username');

* sessionStorage 객체: 세션 동안 데이터를 저장하며, 브라우저를 닫으며 데이터가 삭제

sessionStorage.setItem(): 데이터를 저장
sessionStorage.getItem(): 데이터를 가져옴
sessionStorage.removeItem(): 데이터를 삭제

//예시 코드
sessionStorage.setItme('sessionData', 'value');
const sessionData = sessionStorage.getItem('sessionData')
console.log('Session Data:', sessionData);
sessionStorage.removeItem('sessionData');

4. 네트워크 요청 객체

* 서버와의 통신을 통해 데이터를 주고 받는 객체
* Axios를 사용하여 구현
* Axios는 Promise 기반 HTTP 클라이언트로 간편하게 네트워크 요청 처리 가능
* Axios 라이브러리: 서버와 비동기적으로 데이터를 주고받을 때 사용

axios.get(): GET 요청
axios.post(): POST 요청
axios.put(): PUT 요청
axios.delete(): DELETE 요청

//에시 코드
// GET 요청
axios.get('<https://api.example.com/data>')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('error')
});
//POST 요청
axios.post('<https://api.example.com/data>', {
  key:'value'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('error')
});

5. 디버깅 객체

* 개발자 콘솔에 메세지를 출력하거나 오류를 처리할 때 사용
* console 객체: 주로 디버깅과 개발 목적으로 사용

console.log(): 메세지 출력
console.error(): 오류 메세지 출력
console.warn(): 경고 메세지 출력
console.clear(): 콘솔 내용 삭제

console.log('this is message')

1. HTML 요소의 텍스트 및 콘텐츠 처리 방법

1-1. textContent : 원시 텍스트를 반환하거나 설정.
				HTML 마크업을 무시함.
                스크립트와 스타일 태그내의 텍스트도 포함.
                CSS로 숨겨진 텍스트도 포함.
                빠른 성능 제공.
                모든 공백을 그대로 유지.
                

//예시 코드
<div id="content">
    <p>안녕하세요, <strong>세계</strong>!</p>
    <style>.hidden { display: none; }</style>
    <script>console.log('Hello');</script>
</div>
<script>
    const element = document.getElementById('content');
    console.log(element.textContent);
    // 출력: """안녕하세요, 세계!
      .hidden {
        display: none;
      }
      console.log("Hello");"""
</script>

* 사용시기: 요소 내 모든 텍스트를 다루고 싶을 때
		   성능이 중요한 경우
           보안이 중요한 상황에서 사용자 입력을 처리할 때      

---

1-2. innerText : 렌더링된 텍스트만 반환하거나 설정.
				 사용자가 화면에서 보는 텍스트와 일치
                 CSS 스타일 (ex: visibility, display)에 영향을 받아 숨겨진 텍스트는 제외
                 textContent 보다 성능이 느릴 수 있음.
                 여러 공백을 하나로 축소 가능
                 

// 예시 코드 
<div id="rendered-content">
    <p style="display: none;">숨겨진 텍스트</p>
    <p>보이는 텍스트</p>
</div>
<script>
    const element = document.getElementById('rendered-content');
    console.log(element.innerText);
    // 출력: "보이는 텍스트"
</script>

* 사용시기: 화면에 표시된 텍스트를 다루고 싶을 때.
		   CSS 스타일에 따라 텍스트가 달라질 수 있는 경우.           

---

1-3. innerHTML : 요소의 전체 HTML을 문자열로 반환하거나 설정.
				 자식 요소와 html 구조를 직접 수정할 수 있음.
                 성능이 세 속성 중 가장 느림 (안 쓰는게 좋은지? 아닌지)
                 보안 주의가 필요함 (XSS 취약점 가능성)
                 

//예시 코드
<div id="html-content">
    <p>안녕하세요!</p>
</div>
<script>
    const element = document.getElementById('html-content');
    console.log(element.innerHTML);
    // 출력: "<p>안녕하세요!</p>"
    // 새로운 HTML 콘텐츠 추가
    element.innerHTML = "<p>안녕, 새로운 세상!</p><span>추가된 요소</span>";
</script>

* 사용시기: 요소의 HTML 구조를 동적으로 변경할 때.
		   자식 요소를 포함한 전체 HTML 콘텐츠를 수정할 때.
          

---

자식 태그 모두 삭제 시 권장 사항

* textContent 사용권장: parentContainer.textContent = ""
					   -> 가장 빠르고, 효율적인 방법임
                       
* innerText: 단순히 화면에 표시된 텍스트만 초기화할 때 사용 가능.

* innerHTML: 자식 요소와 구조를 완전히 제거할 때 사용 가능, 그러나 성능에 영향을 줄 수 있음.