DOM

DOM(Document Object Modeling)

:documen(HTML 파일)을 js를 사용할 수 있게 object형태로 모델링 한 것

API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할이다.
DOM이 브라우저에 내장되어있기 때문에 HTML의 내용을 자바스크립트로 접근/제어할 수 있다.

DOM node: html 태그들을 말한다.
DOM node들은 속성과 메서드를 가지고 있다.

document.getElementById("demo").innerHTML = "Hello World!";

document: 속성
getElementById: 메서드
innerHTML: 속성

찾기

// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")

// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")

// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]

// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByTagName("태그명")[인덱스]

// 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
document.querySelectorAll("선택자명")[인덱스]

// 새로운 노드를 생성합니다.**
const div = document.createElement('div');
// div 태그 생성하고 body에 붙힌다.
document.body.append(div);
document.body.append(div);

속성 바꾸기

// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text

// style을 바꿔요.
element.style.property = new style

//method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)

// 어랏? 그럼 이런것도 가능??
element.setAttribute("style", "background-color:red;");

// ....
element.style.backgroundColor = "red";

// input 필드의 변신

element에는 querySelector같은걸로 찾은 요소가 저장된 변수 이름이 들어가겠지???!!

Class

자바스크립트의 클래스 문법은 ES6에서 도입됐다..!(학교다닐때 자바 씨언어 등등에서 클래스 엄청 공부했었는데.. 자바스크립트에는 있는지도 몰랐다 ㅎㅎ)

class는 객체를 생성하기 위한 일종의 템플릿.

class Person { //사람 클래스
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

실제 객체를 만들기 위한 필수 요소가 생성자 함수에 포함되어 있어야함 => constructor(name, age){} 매개변수를 지정하여 name,age가 없으면 안된다.
외부로부터 사람의 정보를 받아온다.(아래)

this.name = name;
this.age = age;

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

이렇게하면 만들 수 있음. 이름과 나이는 꼭 포함되어야 함.

class Car {
  constructor(modelName, modelYear, type, price) {
    this.modelName = modelName;
    this.modelYear = modelYear;
    this.type = type;
    this.price = price;
  }

  // 클락션을 울리는 메서드
  makeNoise() {
    console.log(`${this.modelName}: 빵!`);
  }
}

// 자동차 만들기
const car1 = new Car("Sorento", "2023", "e", 5000);
const car2 = new Car("SM5", "1999", "g", 3000);
const car3 = new Car("QM6", "2010", "g", 4500);
car1.makeNoise();
car2.makeNoise();
car3.makeNoise();