HTML5의 classList 속성

[소개] HTML5에 새로 추가된 선택기인 querySelector(), querySelectorAll() 및 getElementsByClassName()을 소개했습니다. 이 세 가지에는 고유한 기능이 있으며 필요한 경우 HTML5 실제 전투 및 분석에서 관련 내용을 읽을 수 있습니다. 오늘

HTML5에 새로 추가된 선택기인 querySelector(), querySelectorAll() 및 getElementsByClassName()을 소개했습니다. 이 세 가지에는 고유한 기능이 있으며 필요한 경우 HTML5 실제 전투 및 분석에서 관련 내용을 읽을 수 있습니다. 오늘은 classList 속성을 소개하겠습니다.

classList 속성의 역할은 정확히 무엇인가요? 지금은 classList를 그대로 두겠습니다. 우리는 여러 클래스 이름이 있는 요소 중에서 클래스 이름 중 하나를 어떻게 삭제합니까?라는 질문을 고려합니다. Menglong은 머리를 싸매고 마침내 이를 달성할 수 있는 방법을 생각해 냈습니다. li, meng, long 세 가지 클래스 이름 중에서 클래스 이름 meng을 삭제합니다. 코드는 다음과 같습니다

HTML 코드

1. <p class="li meng long">梦龙小站</p>

JavaScript 코드

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
//获取类名字符串并拆分成数组  
var allClassName = p.className.split(" ");  
  
//找到要删除的类名  
var i, len,   
    pos = -1;  
  
for(i=0, len = allClassName.length; i < len; i++){  
    if(allClassName[i] == "meng"){  
        pos = i;  
        break;  
    }  
}  
  
//删除类名  
allClassName.splice(pos, 1);  
  
alert(allClassName) //li,long  
  
//将其余的类名拼成字符串并重新添加到元素的类名中  
p.className = allClassName.join(" ");

미리보기 효과

요소 클래스 이름에서 "meng"을 제거하려면 , 위의 코드가 모두 필요합니다. 유사한 알고리즘을 사용하여 클래스 이름을 바꾸고 해당 클래스 이름이 요소에 포함되어 있는지 확인합니다. 클래스 이름을 추가하는 경우 문자열을 이어 붙여서 완성할 수 있지만, 동일한 클래스 이름이 여러 번 추가되지 않도록 감지를 통해 확인해야 합니다. 많은 JavaScript 라이브러리에서는 작업을 단순화하기 위해 이 방법을 구현했습니다. 클래스 이름을 삭제하려면 먼저 기존 클래스 이름을 구한 후, 클래스 이름을 삭제할 위치를 찾아 삭제해야 합니다.

위의 방법을 보면 간단한 삭제 기능을 구현하려면 여러 줄의 코드를 작성해야 한다는 것을 알 수 있습니다. 여러 줄의 코드를 작성하고 싶지 않다면 라이브러리를 도입해야 합니다. 그리고 도서관에서 그 방법을 사용하세요. HTML5를 사용하면 그렇게 번거로울 필요가 없습니다. HTML5의 classList 속성을 사용하여 이러한 단계를 완료할 수 있습니다. 이 classList 속성은 새로운 컬렉션 유형 DOMTokenList의 인스턴스입니다. 다른 DOM 컬렉션과 유사합니다. DOMTokenList에는 포함된 요소 수를 나타내는 길이 속성이 있습니다. 각 요소를 얻으려면 item() 메서드나 대괄호 구문을 사용할 수 있습니다. 또한 아래에는 이 새로운 유형에 대해 정의된 메서드가 있습니다.

1. 제거(값)

제거(값) 메소드는 목록에서 해당 문자열을 삭제하는 것을 의미합니다. 간단한 예는 다음과 같습니다.

HTML 코드

<p class="li meng long">梦龙小站</p>

JavaScript 코드

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList)  //li meng long  
  
p.classList.remove("meng")   
  
alert("p.className: " + p.className)  //p.className: li long

미리보기 효과

2. Contains(value)

Contains(value) 메소드는 주어진 값이 값이 목록에 존재합니다. 존재하는 경우 "true"를 반환하고, 그렇지 않으면 "false"를 반환합니다. 간단한 예는 다음과 같습니다:

HTML 코드

1. <p class="li meng long">梦龙小站</p>

JavaScript 코드

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList.contains("meng")) //true  
  
alert(p.classList.contains("menglong")) //false

3. add(value)

add(value) 메소드는 다음을 의미합니다. 목록의 문자열이 목록에 추가됩니다. 이미 존재하는 경우에는 추가되지 않습니다. 간단한 예는 다음과 같습니다.

HTML 코드

<p class="li meng long">梦龙小站</p>

JavaScript 코드

//添加类名 menglong  
  
//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
p.classList.add("menglong");  
  
alert("p.className: " + p.className)  //p.className: li meng long menglong

미리보기 효과

4. 토글(값)

토글(값) 메소드, 주어진 값인 경우 목록 값에 이미 존재하는 경우 삭제하고, 해당 값이 목록에 없으면 추가합니다. 간단한 예는 다음과 같습니다.

HTML 코드

<p class="li meng long">梦龙小站</p>  
梦龙小站

JavaScript 코드

//切换类名 meng  
  
//获取要删除类名li的p  
var p = document.getElementsByTagName("p");  
var i, len;  
  
for(i=0, len = p.length; i< len; i++){  
    p[i].classList.toggle("meng");  
}  
  
  
alert("p[0].className: " + p[0].className)  //p[0].className: li long  
alert("p[1].className: " + p[1].className)  //p[1].className: li meng long

미리보기 효과

classList의 작은 예가 제시되었습니다. 이러한 작은 메소드는 작은 예를 통해 명확하게 시연되고 설명될 수 있습니다. . classList를 사용하면 모든 클래스 이름을 삭제하거나 요소의 클래스 속성을 완전히 다시 작성해야 하는 경우를 제외하고는 className 속성이 더 이상 필요하지 않으며 많은 실용적인 메서드가 첨부되어 있습니다. classList 속성을 지원하는 브라우저에는 Firefox 3.6+ 및 Chrome이 포함됩니다.

HTML5 실제 전투 및 분석의 classList 속성을 소개하는 것은 여기까지입니다. 조금씩 축적하는 것이 내일의 성공입니다. 하루에 HTML5를 조금만 배우면 언젠가는 반드시 성공할 것입니다. . Menglong Station을 지원해 주셔서 감사합니다. HTML5에 대한 더 많은 업데이트를 보려면 Menglong Station의 HTML5 실습 및 분석 업데이트를 주목해 주세요.

위 내용은 HTML5의 classList 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!