Selectors API - querySelector

querySelector 사용예제

(한국어 해석) 

 

HTML

= 웹사이트에 바로 표기해주겠다. 

 

<section id = "section1">

  여기는 section1 구역이다! 

  <input class = "ex" type = "text" ></input>

    section1 소속 ex그룹에 텍스트 나타내기 

  <input name = "ex2" type = "text"></input>

    section1 소속 ex2 그룹에 텍스트 나타내기 

</section>

그룹영역 끝. 

 

Javascript ( .js) 

= HTML은 노가다니깐 나를 통해 자동화해주시요. 

(ps. visual studio 에서 확장자 js파일을 생성후 src를 통해서 쪼개주면 됨) 

(생활코딩 웹- Javascript -파일로쪼개서 정리정돈하기에 내용이 나와있음) 

 

function example (){
  let text1 = section1.querySelector(".ex")

  class를 데려와야 하니 .찍고, .ex 불러와. 길게 하기 힘드니까 이제 text1하면 와라. 

  let text2 = section1.querySelector("input[name = 'ex2']")

  name이 있는 녀석들은 input tag로 이름이 ex2인 녀석 나와. 이제 text2하면 튀어와라. 

  

  * let text2 = section1.querySelectorAll("input") => input tag의 배열 생성 

}