클래스와 ID로 요소 내부의 요소 가져 오기-JavaScript

클래스와 ID로 요소 내부의 요소 가져 오기-JavaScript

---

좋아, 나는 전에 자바 스크립트를 다뤘지만 내가 쓴 가장 유용한 것은 CSS 스타일 전환기이다. 그래서 나는 이것에 다소 새로운 것입니다. 다음과 같은 HTML 코드가 있다고 가정 해 보겠습니다.

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

"Hello world!"를 어떻게 바꿀까요? "Goodbye world!"에 ? document.getElementByClass 및 document.getElementById가 어떻게 작동하는지 알고 있지만 더 구체적으로 알고 싶습니다. 이전에 요청한 경우 죄송합니다.

---

음, 먼저와 같은 기능으로 요소를 선택해야합니다 getElementById.

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById하나의 노드 만 getElementsByClassName반환하고 노드 목록을 반환합니다. 해당 클래스 이름을 가진 요소가 하나만 있기 때문에 (내가 말할 수있는 한) 첫 번째 요소 만 가져올 수 있습니다 (그게 [0]바로 배열과 같습니다).

그런 다음 .html로 html을 변경할 수 있습니다 .textContent.

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

---

다음과 같이 할 수 있습니다.

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

또는 오류 검사를 줄이고 간결하게 수행하려면 다음과 같이 한 줄로 수행 할 수 있습니다.

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

설명 :

1. 당신은 id="foo".
2. 그런 다음 해당 개체 내에 포함 된 개체를 찾습니다 class="bar".
3. 배열과 같은 nodeList를 반환하므로 해당 nodeList의 첫 번째 항목을 참조합니다.
4. 그런 다음 innerHTML해당 항목의 내용을 변경하도록 설정할 수 있습니다 .

주의 사항 : 일부 이전 브라우저는 지원하지 않습니다 getElementsByClassName(예 : 이전 버전의 IE). 해당 기능이 누락 된 경우 제자리에 끼울 수 있습니다.

---

브라우저 호환성에 대해 걱정하기보다는 내장 CSS3 선택기 지원이있는 라이브러리를 사용하는 것이 좋습니다 (다른 사람이 모든 작업을 수행하도록 허용). 라이브러리 만 그렇게하려면 Sizzle이 훌륭하게 작동합니다. Sizzle에서는 다음과 같이 수행됩니다.

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

---

jQuery에는 Sizzle 라이브러리가 내장되어 있으며 jQuery에서는 다음과 같습니다.

$("#foo .bar").html("Goodbye world!");

---

IE 7 이하에서 작동해야하는 경우 getElementsByClassName이 모든 브라우저에 존재하는 것은 아니라는 점을 기억해야합니다. 이 때문에 자신의 getElementsByClassName을 만들거나 이것을 시도 할 수 있습니다.

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}

---

재귀 함수 :

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}

---

가장 쉬운 방법은 다음과 같습니다.

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

또는 더 읽기 쉬운 :

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}

---

document.getElementByID 는 클라이언트 측에서만 작동하여 고정 된 ID를 제어하므로 사용해서는 안됩니다 . 대신 아래 예제와 같이 jquery를 사용해야합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

이것을 사용하십시오 :

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

if you want any remove edit any operation then just add "." behind and do the operations

참고URL : https://stackoverflow.com/questions/7815374/get-element-inside-element-by-class-and-id-javascript