[js] 콘솔 함수, document 메서드

비니_ 2025. 1. 11. 17:49

728x90

* 콘솔 함수 소개

1. 디버깅
console.log('디버깅 메시지 출력');
console.error('에러 발생!'); // 콘솔에 빨간색으로 에러 메시지 출력
console.warn('경고 메시지'); // 콘솔에 황갈색으로 경고 메시지 출력

2. 정보 제공
console.info('정보 메시지');

-----------------------------------------

* documnet 메서드 소개

1. document.wirte();
- HTML 문서에 텍스트나 HTML 요소를 직접 삽입

2. document.getElementById()
- 특정 id에 해당하는 요소를 반환

3. document.getElementsByClassName()
- 특정 class 이름을 가진 요소들을 반환

4. document.getElementsByTagName()
- 특정 태그를 가진 모든 요소를 반환

- 배열로 반환

<p>첫 번째</p>
<p>두 번째</p>
<p>세 번째</p>

<script>
  let paragraphs = document.getElementsByTagName('p');
  for(let i = 0; i < paragraphs.length; i++){
    paragraphs[i].textContent = `단락 ${i + 1} 내용 변경!`;
  }
</script>

5. document.querySelector()
- 첫 번째로 일치하는 요소를 반환
- css에서 사용하는 식별자를 사용

<p class="message">첫 번째</p>
<p class="message">두 번째</p>
<p class="message">세 번째</p>

<script>
let element = document.querySelector('.message');
element.textContent = '클래스 명이 message인 첫 번째 요소 내용 변경'
</script>

6. document.querySelectorAll()
- 지정된 식별자에 맞는 모든 요소를 반환
- 배열로 반환

<p class="message">첫 번째</p>
<p class="message">두 번째</p>
<p class="test">
	<span>변경될 텍스트</span>
</p>

<script>
    let elements = document.querySelectorAll('.message');

    elements.forEach((element, index) => {
      element.textContent = `변경된 단락 ${index + 1}`;
    });

    let element2 = document.querySelector('.test > span');

    element2.textContent = '변경한 텍스트';
</script>

7. document.createElement()
- 새로운 HTML 요소를 동적으로 생성

<script>
    let newDiv = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(newDiv); // body 안에 div 동적 생성

    let newDivP = document.createElement('p');
    newDivP.textContent = '동적으로 생성된 p';
    newDiv.appendChild(newDivP); // div 안에 p 동적 생성
</script>

보이는 화면 ↓

<div>
  <p>동적으로 생성된 p</p>
</div>

document.getElementsByTagName('body')[0]; 와
document.body.appendChild(newDiv); 는 같음

=> getElementsByTagName는 배열로 가져오기 때문에 [0]로 가져와야 body가 잡힌다.

** document.getElementsByTagName('body'); -> error

8. document.createTextNode()
- 요소가 아닌 단순한 텍스트 노드를 생성

9. document.body
- document.body는 문서의 <body> 요소를 반환

10. document.title
- 페이지의 제목을 가져오거나 변경

11. document.forms
- 문서 내의 모든 폼 요소를 반환
- 서버로 전송할 데이터

<form name="myForm" action="style.html"> <!--// 서버에 저장되는 이름은 보통 name으로 할당 -->
  <input type="text" name="username">
  <button type="submit">제출</button>
  <!-- input에 작성한 값을 가지고 action의 html로 이동한다. -->
</form>

<script>
  let form = document.forms['myForm'];
  forhttp://m.username.value = '홍길동';
</script>

ex) 네이버 로그인 폼

12. document.location // 많이 사용
- 현재 페이지의 url을 가져오거나 변경

console.log(document.location.href); // 현재 url 출력
document.location.href = 'https://www.naver.com/'; // 다른 페이지로 보내버림(리다이렉션)

*참고
// window.history.back() // 뒤로가기

13. document.getElementsByName
- 배열로 반환

728x90