JavaScript에서 클래스 이름으로 HTML 요소를 어떻게 찾고 조작할 수 있습니까?

JavaScript에서 클래스별로 요소 찾기

getElementById() 함수는 고유 식별자로 요소에 액세스하는 데 유용하지만 다음과 같은 상황이 있습니다. 클래스를 사용하여 요소를 찾아야 합니다. JavaScript는 이러한 목적을 위한 기본 기능을 제공하지 않으므로 대체 접근 방식이 필요합니다.

한 가지 해결책은 지정된 태그 유형의 모든 요소를 ​​검색하는 getElementsByTagName() 메서드를 활용하는 것입니다. 이러한 요소를 반복하고 해당 className 속성을 검사하면 대상 클래스와 일치하는 요소를 식별할 수 있습니다.

다음 코드는 해당 클래스를 기반으로 HTML 요소 내의 콘텐츠를 바꾸는 방법을 보여줍니다.

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if ((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) {
            elems[i].innerHTML = content;
        }
    }
}

이 함수에서는 페이지의 모든 요소를 ​​반복하고 해당 요소의 className 속성에 지정된 matchClass가 포함되어 있는지 확인합니다. 일치하는 항목이 발견되면 요소의 내부 HTML이 제공된 콘텐츠로 업데이트됩니다.

이 접근 방식은 JavaScript가 이러한 목적을 위한 전용 기능을 제공하지 않더라도 클래스를 기반으로 요소를 조작하는 방법을 제공합니다.

위 내용은 JavaScript에서 클래스 이름으로 HTML 요소를 어떻게 찾고 조작할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!