======Javascript HTML DOM classList Property====== * description : Javascript HTML DOM classList Property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-06-08 \\ =====The source of the article==== [[https://www.w3schools.com/jsref/prop_element_classlist.asp|Javascript HTML DOM classList Property]]\\ ====Example==== %%

%% 요소에 "mystyle" 클래스를 추가합니다.\\


  
    
  
  
    Click the button to add the "mystyle" class to DIV.

    

    Note: The classList property is not supported in Internet Explorer 9 and earlier versions.

    I am a DIV element

=====Definition and Usage===== %%classList%% 속성은 요소의 클래스 이름을 %%DOMTokenList%% 객체로 반환합니다.\\ \\ 이 속성은 요소에 %%CSS%% 클래스를 추가, 제거 및 토글(toggle)하는 데 유용합니다.\\ \\ %%classList%% 속성은 읽기 전용이지만 %%add()%% 및 %%remove()%% 메서드를 사용하여 수정할 수 있습니다.\\ \\ **크로스-브라우저 솔루션:** IE9 및 이전 버전에서는 %%classList%% 속성이 지원되지 않습니다.\\ 그러나 크로스-브라우저 솔루션을 위한 %%className%% 속성 또는 정규식(regular expression)을 사용할 수 있습니다.\\ =====Syntax=====


element.classList

=====Properties===== ^ Property ^ Description ^ | length | 리스트에서 클래스의 개수를 반환합니다. | | ::: | 이 속성은 읽기 전용입니다. | =====Methods===== ^ Method ^ Description ^ | add(class1, class2,...) | 요소에 하나 이상의 클래스 이름을 추가합니다. | | ::: | 지정한 클래스가 이미 존재할 경우, 해당 클래스는 추가되지 않습니다. | | contains(class) | 요소에 지정된 클래스 이름이 있는지 여부를 나타내는 불리언 값을 반환합니다. | | ::: | 가능한 값: | | ::: | true - 해당 요소는 지정된 클래스 이름을 가지고 있습니다. | | ::: | false - 해당 요소는 지정된 클래스 이름을 가지고 있지 않습니다. | | item(index) | 요소로부터 지정 인덱스 번호를 가진 클래스 이름을 반환합니다. 인텍스는 0부터 시작합니다. | | ::: | ::: | | ::: | 인덱스 번호가 범위를 벗어날 경우 null을 반환합니다. | | remove(class1, class2,...) | 요소로부터 하나 이상의 클래스 이름을 제거합니다. | | ::: | ::: | | ::: | **Note:** 존재하지 않는 클래스를 제거해도 오류가 발생하지 않습니다. | | toggle(class, true or false) | 요소의 클래스 이름 사이에서 토글합니다. | | ::: | ::: | | ::: | 첫 번째 매개변수는 요소에서 지정 클래스를 제거하고 false를 반환합니다. | | ::: | 해당 클래스가 존재하지 않을 경우, 요소에 추가되고, 반환 값은 true입니다. | | ::: | ::: | | ::: | 선택할 수 있는 두 번째 매개변수는 이미 존재하고 있는 지의 여부와 상관없이 클래스가 추가 또는 삭제되게 하는 불리언 값입니다. 예를 들어 | | ::: | ::: | | ::: | 클래스를 제거합니다: element.classList.toggle("classToRemove", false); | | ::: | 클래스를 추가합니다: element.classList.toggle("classToAdd", true); | | ::: | ::: | | ::: | **Note:** 두 번째 매개변수는 Internet Explorer 또는 Opera 12와 이전 버전에서 지원되지 않습니다. | =====Technical Details===== ^ Return Value ^ 요소의 클래스 명 리스트를 포함하는 DOMTokenList ^ =====More Examples===== ====Example==== %%

%% 요소에 다수의 클래스를 추가합니다.\\


  
    
  
  
    Click the button to add multiple classes to DIV.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

    I am a DIV element.

====Example==== %%

%% 요소에서 클래스를 제거합니다.\\


  
    
  
  
    Click the button to remove the "mystyle" class from DIV.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

    I am a DIV element.

====Example==== %%

%% 요소에서 다수의 클래스를 제거합니다.\\


  
    
  
  
    Click the button to remove multiple classes to DIV.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

    I am a DIV element.

====Example==== %%

%% 요소를 위한 두 개의 클래스 사이에서 토글 기능\\


  
    
  
  
    Click the button to toggle between two classes.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

    I am a DIV element.

====Example==== %%

%% 요소의 클래스 이름을 가져옵니다.\\


  
    
  
  
    Click the button to display the class names of the div element.

    
    I am a DIV element with multiple classes.

    

    Note: The classList property is not supported
     in Internet Explorer 9 and earlier versions.

====Example==== %%

%% 요소가 얼마나 많은 클래스 이름을 가지고 있는지 확인합니다.\\


  
    
  
  
    Click the button to display the number of class names the div element has.

    
    I am a DIV element with three classes.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

====Example==== %%

%% 요소의 첫 번째 클래스 이름(index 0)을 가져옵니다.\\


  
    
  
  
    Click the button to display the class name of the first class(index 0) of div.

    
    I am a DIV element with three classes.

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

====Example==== 요소가 "mystyle" 클래스를 가지고 있는지를 확인합니다.\\


  
    
  
  
    Click the button to find out if the DIV element has a class of "mystyle".

    
    I am a DIV element with three classes.

    

    Note: The classList property is not supported
     in Internet Explorer 9 and earlier versions.

====Example==== 요소에 "mystyle" 클래스의 유무를 확인합니다. 있다면, 다른 클래스 이름을 제거합니다.\\



    
  
  
    Click the button to find out if the DIV element has a class of "mystyle". 
    If so, remove "anotherClass".

    I am a DIV element

    

    Note: The classList property is not supported 
    in Internet Explorer 9 and earlier versions.

====Example==== 클래스 사이의 토글 기능으로 드롭다운 버튼을 생성합니다.\\



    
  
  
    Clickable Dropdown
    Click on the button to open the dropdown menu.

    
      
      
        Home
        About
        Contact

====Fallback Example: add==== IE9 및 이전 버전에서 %%classList.**add()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\



    
  
  
    Cross-browser solution for classList.add()
    The classList property is not supported in Internet Explorer 9 and earlier.
    In this example, we check if the browser supports the classList.add() method.
    If not, use the className property instead to achieve the same result 
    (for IE9 and earlier).

    Click the button to add the class "mystyle" to the DIV element.

    

    I am a DIV element

====Fallback Exmaple: remove==== IE9 및 이전 버전에서 %%classList.**remove()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\


  
    
  
  
    Cross-browser solution for classList.remove()
    The classList property is not supported in Internet Explorer 9 and earlier.
    In this example, we check if the browser supports the classList.remove() method.
    If not, the regular expression works as a fallback to achieve the same result 
    (for IE9 and earlier).

    Click the button to remove the class "mystyle" from DIV.

    

    I am a DIV element

    
    In JavaScript, the boolean value of undefined is false

====Fallback Example: contains==== IE9 및 이전 버전에서 %%classList.**contains()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\


  
    
  
  
    Cross-browser solution for classList.remove()
    The classList property is not supported in Internet Explorer 9 and earlier.
    In this example, we check if the browser supports the classList.contains() method. If not, the regular expression works as a fallback to achieve the same result (for IE9 and earlier).

    Click the button to find out if the DIV element has a "mystyle" class.

    

    I am a DIV element

    

    
    In JavaScript, the boolean value of undefined is false

====Fallback Example: toggle==== IE9 및 이전 버전에서 %%classList.**toggle()**%% 메서드를 사용하는 경우를 위한 크로스-브라우저 솔루션:\\


  
    
  
  
    Cross-browser solution for classList.toggle()
    The classList property is not supported in Internet Explorer 9 and earlier.
    
      In this example, we check if the browser supports the classList.toggle() method.
      If not, use the className property together with other JS properties and methods
      to achieve the same result (for IE9).
    

    Click the button to toggle between adding and methods to achieve 
    the same result (for IE9)

    

    I am a DIV element

    

    
    In JavaScript, the boolean value of undefined is false

====Example==== 스티키 네비게이션 바 (sticky navigation bar) 만들기\\



    
  
  
    
      Scroll Down
      Scroll down to see the sticky effect.
    

    
      Home
      News
      Contact
    

    
      Sticky Navigation Example
      The navbar will stick to the top when you reach its scroll position.
      
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      
      
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      
      
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      
      
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
        Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      
      
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
        id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
        his ad. Eum no molestiae voluptatibus.