JavaScript. day2

DOM 메소드

• document.querySelector(x) : CSS 선택자 x를 기반으로 첫 번째 요소를 선택한다.
• document.querySelectorAll(x) : CSS 선택자 X를 기반으로 여러 요소를 선택한다.
• document.getElementById(x) : id 속성의 값을 기반으로 여러 요소를 선택한다.
• document.getElementByClassName(x) : class 속성의 값을 기반으로 여러 요소를 선택한다.
• document.write(x) : 문서에 콘텐츠 x를 추가 입력한다.

DOM 메소드 속성

• textContent : 선택된 요소의 모든 텍스트 요소를 선택한다. 코드상의 공백을 포함한다.
• innerText : 선택된 요소의 모든 텍스트 요소를 선택한다. 코드상의 공백을 포함하지 않는다.
• classname : 선택된 요소의 클래스의 이름을 보여준다.
• style : 선택된 요소에 정의된 스타일 속성값을 나열한다.
• title : 선택된 요소의 title 값을 가져온다.

비교연산자

: 자바스크립트는 주어진 두 항을 비교할 수 있는 비교연산자를 제공한다. 대소비교와 등가비교가 가능하다.
비교 연산식은 언제나 boolean 데이터를 반환한다. 대소비교, 등가비교의 값이 참이면 true, 거짓이면 false를 반환한다.

• 비교연산자 종류
• >(크다) , <(작다) , >=(크거나 같다) , <=(작거나 같다) , ==(같다) , !=(같지않다) , ===(완전히 같다), !===(완전히 같지 않다)
• 등가비교
  : 자바스크립트에서는 등가비교를 할 때 등호의 개수에 따라 규칙에 차이를 보인다.
  == 은 추상적인 같음으로 자료형이 서로 다르더라도 데이터가 같으면 같다고 판단할 수 있다.
  === 은 엄격한 같음으로 자료형과 데이터가 모두 일치해야만 같다고 판단한다.

Ex)
console.log('1'== 1) : true
console.log('1'=== 1) : false

조건문

: 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문이다.
여기에서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다.

• if
• if (조건) { // 조건이 true 이면 실행할 코드 }
• if-else
• if (조건) { // 조건이 true 이면 실행할 코드 } else { // 조건이 false 일때 실행할 코드 }
• else if
  : 여러개의 조건을 제시하고 싶을 때
• if (조건1) { // 조건1이 true 이면 실행할 코드 } else if (조건2) { // 조건2가 true 이면 실행할 코드 } else { // 조건1, 2가 둘다 false 일때 실행할 코드 }

반복문

: 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이다. for 문과 while 문이 있다.

1. for문

: 구문 작성시 반복을 위해 필요한 세가지 요소를 한 곳에 모아 작성함으로써 직관적으로 반복 횟수를 표현할 수 있는 구문이다.

 for (초기식; 조건식; 반복식) {
     // 조건이 true 일 경우 반복 수행할 코드
 }

초기식 : 반복 조건의 초기화 작업, 초기식에서 선언한 변수는 for문 밖에서 사용 불가능.
반복식 : 반복이 한번 끝날때 마다 실행될 작업

2. while문

: 주어진 조건이 참일 동안에 구문을 반복하는 반복문이다.

 while(조건){
     //조건이 true인 동안에 반복 수행할 코드
 }

document.createElement 메소드

: 지정된 이름의 html 요소를 만들어 반환한다. html 요소가 만들어지고 반환되었다고 해서 해당요소가 곧장 웹브라우저 화면에 추가되는 것은 아니다.
자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업을 추가로 해야한다.
ex)
document.createElement('div')
document.createElement('p')
document.createElement('a')

appendChild() 메소드

: DOM 내 개별요소(노드라고도함)에 자식 요소를 추가할 때 사용하는 메소드
사용법)
target.appendChild(자식으로 추가할 요소)
Ex)

 const p = document.createElement('p')
 document.body.appendChild(p)

• append() 메소드
  : DOM 내 개별요소(노드라고도함)에 자식 요소를 추가할 때 사용하는 메소드. appendChild와 비슷해보이지만 차이점이 있다.
• 차이점
  • append를 이용하면 요소에 노드 객체 또는 문자열을 자식요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있다.
  • appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환데이터가 없다.