DOM JavaScript로 Html 요소 생성 및 변경하기

DOM (Document Object Model)

문서 객체 모델이라고 하며, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

---

 

1. 요소 선택하기

getElement 

요소를 선택하는 방법은 먼저 예시로 HTML에 body에 다음 태그를 추가했습니다.

 

id값으로 출력

p태그의 id값으로 해당 값을 출력하면 다음과 같이 나옵니다.

아이디값은 고유하여 이를 타깃 해서 가져올 수 있습니다.

 

class값으로 출력

그렇다면 class값으로 가져올 경우 이런 식으로 가져옵니다.

해당 Elemet뒤에 s가 붙습니다. 이유는 class는 중복해서 다수로 쓸 수 있기 때문에, 배열로 리턴됩니다.

 

tag값으로 출력

class와 동일하게 하나가 아닌 다수가 존재할 수 있기 때문에 이렇게 표현됩니다.

 

querySelector & querySelectorAll

querySelector

querySelector를 사용하면 똑같이 해당값을 가져올 수 있습니다. 문법은 다음과 같습니다.

- class 선택자 (.) 

- id 선택자 (#)

- 속성 선택자 ([])

 

querySelectorAll

사용방법은 동일하나 인자로 지정한 선택자와 일치하는 요소를 모두 선택하는

다수의 요소들을 배열처럼 가져오는 메소드입니다.

 

 

🤔 알아보기

getElementById와 querySelector는 둘 다 요소를 선택해서 가져오는 방식입니다.

다른 점은 무엇일까요? 

 

결과적으로는 getElementById가 속도면에서는 더 좋다고 합니다.

하지만 querySelector방식의 장점은 다양한 선택자를 이용해 확실하게 타깃 할 수 있다는 것입니다.

 

그렇기에 제한적이나 속도가 빠른 것은 getElementById이고,

다양하나 속도에서 아쉬운 것은 querySelector방식이라고 합니다.

 

 

2. 요소의 속성 변경하기

 

해당 html을 선택해서 요소의 속성을 변경하겠습니다.

 

 

선택한 요소들에 innerHTML 같은 속성을 사용할 수 있는 이유는 htmlElement에 있는 property라서 그렇습니다.

즉, html의 모든 요소들은 HtmlElement라는 객체를 상속받고 있기 때문입니다.

 

 

Element에서 가지는 공통적인 property의 자세한 참조는 해당 링크에서 확인 가능합니다.

 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement

HTMLElement - Web API | MDN

 

 

3. 새로운 요소를 추가해서 HTML에 추가하기

CreateElement를 이용하여 html에 추가하는 방법입니다.

 

추가할 때, 중요한 것은 추가 후에 해당 내용을 append 하는 것이 중요합니다.

append와 appendChild의 차이점은 appendchild는 노드 객체만 추가할 수 있다는 것입니다.

 

 

이룸코딩 ErumCoding

https://youtu.be/3eVVZRB0Hl0?si=4hbSqKcOftlAvimF