본문 바로가기
JavaScript

[javascript] 엘리먼트 선택 메소드 querySeletor

by 코드디코더 2018. 3. 29.

[javascript] 엘리먼트 선택 메소드 querySeletor


Javascript의 querySeletor는 CSS에서 속성값을 줄때 사용하는 '#, . ' 등의 선택자로 

원하는 엘리먼트를 선택할 수 있게 해주는 메소드입니다.

단순히 Selector의 기능이 필요해서 JQuery 라이브러리를 추가하는 대신 

자체 메소드인 querySeletor를 사용해도 무방할것으로 보입니다.


ex) CSS 선택자

#div1 { color : red }
.div2 { font-size: 14px; }



아래와 같이 사용하면 됩니다.

아래 소스는 'inputText'라는 id를 가진 엘리먼트에 안에 'Hello~' 값을 넣어주는 예제입니다.

  
  
Hello~



아래 소스는 'inputClass'라는 class를 가진 엘리먼트에 안에 'Hello~' 값을 넣어주는 예제입니다.

  
Hello~



아래 소스는 'divClass'라는 class를 가진 엘리먼트의 하의

P 태그 안에 'Hi~' 값을 넣어주는 예제입니다.

  

Hi~