======Javascript HTML DOM Document querySelectorAll() Method====== * description : Javascript HTML DOM Document querySelectorAll() Method * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-26 \\ =====The source of the article==== [[https://www.w3schools.com/jsref/met_document_queryselectorall.asp|HTML DOM Document querySelectorAll() Method]]\\ ====Example==== 문서에서 %%class="example"%%를 가진 모든 요소를 가져옵니다.\\




  A heading with class="example"
 
  A paragraph with class="example"
 

  
    Click the button to add a background color to all elements with class="example".
  

  

  Note: The querySelectorAll() method is not supported 
  in Internet Explorer 8 and earlier versions.

\\ =====Definition and Usage===== %%querySelectorAll()%% 메서드는 지정된 CSS 선택자와 일치하는 문서의 모든 요소를\\ 정적(static) %%NodeList%% 객체로 반환합니다.\\ %%NodeList%% 객체는 노드 컬렉션을 나타냅니다.\\ 노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작합니다.\\ \\ **Tip:** %%NodeList%% 객체의 길이 속성을 사용하여 지정된 선택자와 일치하는 요소의 수를\\ 확인한 다음 모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.\\ \\ CSS 선택자에 대한 자세한 내용은, [[https://www.w3schools.com/css/css_syntax.asp|CSS Selectors Tutorial]] 및\\ [[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오.\\ =====Browser Support===== **Note:** Internet Explorer 8은 %%CSS2%% 선택자를 지원합니다. %%IE9%% 및 이후 버전은 %%CSS3%%도 지원합니다.\\ =====Syntax=====


document.querySelectorAll(CSS selectors)

=====Parameter Values===== ^ Parameter ^ Type ^ Description ^ | CSS selectors | String | 필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택자를 지정합니다. 이들은 %%ID%%, 클래스, 유형, 속성, 속성 값 등을 기반으로 %%HTML%% 요소를 선택하는 데 사용됩니다.\\ 선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다.\\ \\ **Tip:** 모든 CSS 선택자 목록은 [[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오. | \\ =====Technical Details===== ^ DOM Version ^ Selectors Level 1 Document Object ^ | Return Value | 지정된 %%CSS%% 선택자와 일치하는 문서의 모든 요소를 나타내는 %%NodeList%% 객체입니다. %%NodeList%%는 정적(static) 컬렉션이므로 %%DOM%%의 변경 사항이 컬렉션에 영향을 미치지 않습니다. 선택자가 유효하지 않은 경우 %%SYNTAX_ERR%% 예외가 발생합니다. | \\ =====More Examples===== ====Example==== 문서의 모든 %%

%% 요소를 가져오고, 첫 번째 %%

%% 요소(index 0)의 배경색을 설정합니다.\\

This is a p element.

 

  This is also a p element.

  
    Click the button to add a background color
    to the first p element (index 0) in the document.
  

  

  Note: The querySelectorAll() method is not supported in Internet 8 and eralier versions.

\\ ====Example==== 문서에서 %%class="example"%%인 모든 %%

%% 요소를 가져오고, 첫 번째 %%

%% 요소의 배경을 설정합니다.\\

`A heading with class="example"`


  A paragraph with class="example"
  Another paragraph with class="example".
 

  
    Click the button to add a background color to the first p element (index 0) in the document with class="example".
  

  

  Note: The querySelctorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== 문서에 %%class="example"%%를 가진 요소의 개수를 확인합니다(%%NodeList%% 객체의 length 속성 사용).\\




  
    A div element with class="example"
  

  
    Another div element with class="example"
  

  A p element with class="example"

  
    Click the button to find out how manu elements with class "example" there are in this document.
  

  

  Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== %%class="example"%%을 사용하여 문서에 있는 모든 요소의 배경색을 설정합니다.\\



  




  
    A div with class="example"
    
  

  
    Another div with class-"example"
    
  

  This is a p element with class="example"
 

  This is a span element with class="example" inside another p element.
 

  Click the button to change the background color of all elements with class="example".

   

  Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== 문서의 모든 %%

%% 요소의 배경색을 설정합니다.\\

`A h1 element`



  A div element

  A p element
 

  Another p element
 

  
    A p element inside a div element.
 
  

  
    Click the button to change the background color of all p elements in the document.
    
  

  

  Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== 문서에서 %%"target"%%속성을 가진 모든 %%%% 요소의 테두리를 설정합니다.\\



  



  
    The CSS selector a[target] makes sure that all links with a target attribute gets a yellow background:

w3schools.com
  disney.com 
  wikipedia.org 

  
    Click the button to add a red border to all links in the document with a target attribute.
  

  

  Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== 부모가 %%

%% 요소인 모든 %%

%% 요소의 배경색을 설정합니다.\\


    H3 element
    
      I am a p element, my parent is a div element.



  
    H3 element
    
      I am a p element, my parent is also a div element. 
    
  

  
    Click the button to change the background color of every p element where the parent is a div element.
  

  

  Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.

\\ ====Example==== 문서에 있는 모든 %%

,
및 %% 요소의 배경색을 설정합니다.\\ `A H1 element A H2 element A DIV element A p element A p element with a span element inside. Click the button to set the background color of all h2, div and span elements. Note: The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.` {{tag>오션, Javascript HTML DOM Document querySelectorAll() Method}}