[Javascript]HTML 요소 불러오기

See the Pen eYgBZzY by minsucoding (@minsucoding) on CodePen.

---

 

안녕하세요 오늘은 자바스크립트에서 html 요소를 가지고 오는 방법을 알려드리려고 해요

 

아주 기본적인 부분인데요!

 

우선 DOM( document of method) 의 대해서 알아야하니 한번만 검색하고 와주시길 바랍니다!!

 

 

---

 

 

 

먼저 예제를 보시면 아시겠지만 getElementsByClassName,getElementById,querySelector 이 3가지에 대해서 설명 드리려고해요!

먼저 getElementsByClassName은 html에 있는 class를 불러오는 method인데요

 

이 method는 값을 바로 불러오는게 아니라 배열로 불러온다는 특징이 있어요!

 

그래서 예제에서도 index에 맞는 값을 넣어주었죠

 

EX ) let 변수명 = getElementsByClassName('클래스명');

이렇게 변수를 만들었다면 변수를 사용할때 그 클래스에 index의 번호를 정확하게 넣어줘야지 올바르게 값을 호출해주

니 주의해서 사용해야합니다.

 

 

---

 

 

 

다음은 getElementById는 html에 있는 id를 불러오는 method에요

 

이 method는 값을 바로 불러오지만 id는 단일요소를 지정해주는 속성이죠
자바스크립트에서도 마찬가지로 가장 처음에 위치해 있는 id만을 불러올수있다는 특징이 있어요!

예제를 보면 가장 처음에는 속성값이 적용이 된걸 볼수있지만 다음으로는 적용이 안된걸 볼수있죠

 

 

---

 

 

 

마지막으로 querySelector는 html에 어떤 요소라도 쉽게 불러올수 있는 method에요

우선 쉽다라는 장점만큼 단점도 존재하는데요

바로 가장 처음에 위치해있는 요소만을 불러온다는 특징이에요

class,id,tag,name 어떤 속성이라도 가장 상단에 위치해 있는 요소만을 가지고 오는 특징이 있어요

예제를 보면 가장 처음에는 속성값이 적용이 된걸 볼수있지만 다음으로는 적용이 안된걸 볼수있죠

 

 

---

 

 

아주 간단하게 설명을 드렸지만 조건문,반복문 등을 공부하시게 되면 어떤게 이때 어떨때 사용하면 편한지 알게되실거에요

마지막으로 팁을 드리면 "getElementsByClassName은 배열로 불러온다는 특징이 있으니 반복문을 사용할때 아주 좋겠죠?"

이 처럼 상황에 맞는 method를 그때그때 사용해준다면 코드가 아주 깔끔 해질거에요~

그럼 오늘도 열코!! 다음에 만나요~

 

---