[javascript] JavaScript에서 클래스별로 요소를 얻는 방법?

html 요소 내의 내용을 바꾸고 싶기 때문에 다음 기능을 사용하고 있습니다.

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

위의 내용은 훌륭하지만 문제는 페이지에 내용을 바꾸려는 html 요소가 두 개 이상 있다는 것입니다. 따라서 ID 대신 클래스를 사용할 수 없습니다. 자바 스크립트는 클래스 함수에 의해 어떤 유형의 내장 get 요소를 지원하지 않는다고 들었습니다. 그렇다면 위의 코드를 어떻게 수정하여 ID 대신 클래스와 함께 사용할 수 있습니까?

추신 : 나는 이것을 위해 jQuery를 사용하고 싶지 않습니다.

답변

이 코드는 모든 브라우저에서 작동해야합니다.

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

작동 방식은 문서의 모든 요소를 반복하고 클래스 목록을 검색하는 것입니다 matchClass. 일치하는 것이 발견되면 내용이 교체됩니다.

Vanilla JS를 사용하는 jsFiddle 예제 (즉 프레임 워크 없음)

답변

물론 모든 최신 브라우저는 이제 다음과 같은 간단한 방법을 지원합니다.

var elements = document.getElementsByClassName('someClass');

그러나 IE8 이전 버전에서는 작동하지 않습니다. http://caniuse.com/getelementsbyclassname을 참조 하십시오

또한 모든 브라우저 NodeList가 예상대로 순수한 것을 반환하지는 않습니다 .

선호하는 크로스 브라우저 라이브러리를 사용하는 것이 좋습니다.

답변

document.querySelectorAll(".your_class_name_here");

이는 해당 방법 (IE8 +)을 구현하는 “현대”브라우저에서 작동합니다.

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

이전 브라우저를 지원하려면 Sizzle (4KB mini + gzip) 또는 Peppy (10K mini)와 같은 독립형 선택기 엔진을로드 하고 기본 querySelector 메소드를 찾을 수없는 경우 해당 엔진으로 대체 할 수 있습니다.

특정 클래스의 요소를 얻을 수 있도록 선택기 엔진을로드하는 것은 과잉입니까? 아마. 그러나 스크립트는 그다지 크지 않으므로 스크립트의 다른 여러 위치에서 선택기 엔진이 유용 할 수 있습니다.

답변

간단하고 쉬운 방법

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];
    item.innerHTML = 'this is value';
}

답변

정규 표현식을 사용하여 답변이 없다는 것에 놀랐습니다. 이 꽤 많이 앤드류의 대답 사용하여, RegExp.test대신 String.indexOf이 여러 작업에 더 잘 수행 할 것으로 보인다 이후에 따르면, jsPerf 테스트 .
또한 IE6 지원 될 것으로 보인다 .

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

동일한 클래스를 자주 찾는 경우 (사전 컴파일 된) 정규식을 다른 곳에 저장하고 문자열 대신 함수에 직접 전달하여 클래스를 더 향상시킬 수 있습니다.

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

답변

이것은 거의 모든 브라우저에서 작동해야합니다 …

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

다음과 같이 사용할 수 있어야합니다.

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

답변

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

스 니펫 확장