자바스크립트-코드분석]querySelectorAll 요소 전체선택하기

See the Pen Untitled by leeys (@agent-megurii) on CodePen.

자바스크립트에서는 const elsome = document.querySelector('.클래스명')로 선택자를 지정할수 있다.

하지만 ul태그 안에 여러개의 li태그를 전부 선택하고 싶을때 querySelectorAll을 사용하여 li태그 전부를 선택자로 묶을수 있다.

const elsome = document.querySelectorAll('.클래스명')

 

 

querySelectorAll로 item-list의 li와 input을 모두 선택해 주었다.

 

 

 

 

 

button태그에 id값이 btndel인 값을 선택자로 onclick 이벤트를 주었다.

id값을 불러와서 명령을 줄때는 const로 선언하지 않아도 사용할수있다.

모든 li를 선택자로 묶은 elLi에게 foreach 메소드를 주었다.

 

foreach 메소드는 elLi에 들어있는 모든 li에게 명령을 각각 시행한다.

총 3개의 li가 있다면

각각의 li[1] li[2] li[3]가

foreach메소드에서 각각 시행된다.

 

 

3개의 li가 있었다면  foreach 메소드는 3번 시행된다.

foreach를 사용할때는 (function(n){})의 문법을 가지게 되는데

n의 자리는 기본적으로 각각의 value값을 나타낸다.

만약 function()안데 인수가 두개가 들어가게 된다면

첫번째 인수는 키값을 나타내고 두번째 인수가 value값을 가진다.

 

ex)some.foreach(function(k,v){

-k는 some에 들어있는 각 선택자의 key 값

-v는 각 선택자

})