page_javascript 기술에서 동일한 클래스 노드를 얻기 위한 JavaScript 크로스 브라우저 방법-JS 튜토리얼-php.cn

웹페이지를 개발하다 보면 같은 클래스 이름을 가진 요소, 즉 같은 클래스의 요소를 조작해야 하는 경우가 많습니다. 어제 필기시험을 봤는데 관련 질문에 답을 못했습니다:

JavaScript는 페이지의 클래스 테스트를 통해 노드를 가져옵니다

그래서 관련 정보를 모아서 제가 생각하는 더 낫다고 생각하는 두 가지 방법을 이번 글에 나열했습니다. 혹시 부족한 점이 있다면 모두가 비판하고 수정해 주셨으면 좋겠습니다. 더 좋은 방법이 있으면 공유해 주셨으면 좋겠습니다.

솔루션1 Jeremy Keuth 솔루션

Jeremy Keuth 삼촌은 "The Art of JavaScript DOM 프로그래밍(2판)"(영어: DOM Scripting-Web Design with JavaScript and the Document Object Model) 책의 3장 4절에서 getElementsByClass 메서드에 대해 이야기했습니다. 또한 이 속성을 지원하지 않는 브라우저(IE6, IE7 및 IE8은 무시하겠습니다)에서 이 방법을 적용하는 방법에 대해 설명합니다. 일부 부분이 수정되었습니다.

HTML5 DOM에는 클래스 속성의 클래스 이름을 통해 요소에 액세스할 수 있는 새로운 메소드가 있습니다. getELementsByClassName 이 메소드는 비교적 새로운 메소드이므로 일부 DOM 구현에서는 아직 사용할 수 없습니다. 그것을 사용할 때 조심하십시오. 먼저 이 메서드가 우리에게 무엇을 할 수 있는지 살펴보고 이 메서드를 안정적으로 사용하는 방법에 대해 논의해 보겠습니다.
getELementsByTagName 메소드와 유사하게, getElementsByClassName은 클래스 이름인 하나의 매개변수만 허용합니다.

코드 복사 코드는 다음과 같습니다.

getElementsByClassName(클래스)

이 메소드의 반환 값은 getElementsByTagName과 유사합니다. 이는 동일한 클래스 이름을 가진 요소의 배열입니다. 다음 코드 줄은 클래스 이름이 "sale"인 모든 요소를 포함하는 배열을 반환합니다.

코드 복사 코드는 다음과 같습니다.

document.getElementsByClassName("판매")

이 방법을 사용하여 여러 클래스 이름을 가진 요소를 찾을 수도 있습니다. 여러 클래스 이름을 지정하려면 문자열 인수에서 클래스 이름을 공백으로 구분하면 됩니다. 예를 들어,