클래스 이름으로 요소를 가져오는 방법?

클래스 이름으로 요소를 가져오는 방법?

이 질문에는 이미 다음과 같은 답이 있습니다.

자바스크립트에서 클래스별 요소를 가져오는 방법? (12개 답변)

닫힘9년 전에.

JavaScript를 사용하면 다음 구문을 사용하여 id로 요소를 가져올 수 있습니다.

var x=document.getElementById("by_id");

저는 수업별로 요소를 얻기 위해 다음을 시도했습니다.

var y=document.getElementByClass("by_class");

하지만 오류가 발생했습니다.

getElementByClass is not function

클래스별로 요소를 얻으려면 어떻게 해야 합니까?

DOM 함수의 이름은 실제로는getElementsByClassName,것은 아니다.getElementByClassName단순히 페이지의 두 개 이상의 요소가 동일한 클래스를 가질 수 있기 때문입니다.Elements.

반환 값은 NodeList 인스턴스 또는 의 상위 집합이 됩니다.NodeList(예를 들어, FF는 다음의 인스턴스를 반환합니다.HTMLCollection). 어쨌든 반환 값은 배열과 같은 개체입니다.

var y = document.getElementsByClassName('foo');
var aNode = y[0];

어떤 이유로 인해 반환 개체가 배열로 필요한 경우 마법 길이 속성 때문에 쉽게 이를 수행할 수 있습니다.

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

Syckart가 제안한 대로querySelector('.foo')그리고.querySelectorAll('.foo')그러나 caniuse.com 에 따르면, 실제로는 더 잘 지원되기 때문에(87.24% 대비 93.99%) 선호됩니다.

• querySelector(모두)
• 클래스 이름별 요소 가져오기
• 무언가를 배우기 위해 w3 학교를 사용하지 마세요.
• 정확한 정보는 MDN을 참조하십시오.

다른 옵션은 다음과 같습니다.querySelector('.foo')또는querySelectorAll('.foo')보다 광범위한 브라우저 지원을 제공합니다.getElementsByClassName.

http://caniuse.com/ #http=httpselector

http://caniuse.com/ #vmdk= 클래스 이름으로 요소 가져오기

다음을 사용해야 합니다.document.getElementsByClassName('class_name');

반환된 값은 요소의 배열이므로 첫 번째 요소를 사용하려면 다음을 사용해야 합니다.

document.getElementsByClassName('class_name')[0]

갱신하다

이제 다음을 사용할 수 있습니다.

document.querySelector(".class_name")첫 번째 요소를 사용하여class_nameCSS 클래스(null페이지에 이 클래스 이름을 가진 요소가 없을 경우 반환됩니다.)

또는document.querySelectorAll(".class_name")요소의 노드 목록을 가져옵니다.class_namecss 클래스(not of가 아닌 경우 빈 NodeList가 반환됩니다.페이지의 요소에 이 클래스 이름이 있습니다.

사용할 수 있습니다.

getElementsByClassName

당신이 몇몇 요소들을 가지고 있고 클래스 이름 'test'를 적용했다고 가정하면, 당신은 다음과 같은 요소들을 얻을 수 있습니다.

var tests = document.getElementsByClassName('test');

인스턴스를 반환합니다.NodeList또는 그 초집합:HTMLCollection(FF).

더 읽기

언급URL : https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name