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

좋아, 나는 전에 JavaScript를 봤다. 그러나 내가 작성한 가장 유용한 것은 CSS 스타일 스위처이다. 그래서 나는 이것에 다소 익숙하지 않습니다. 다음과 같은 HTML 코드가 있다고 가정 해 봅시다.

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

"Hello world!"를 어떻게 바꾸겠습니까? "안녕 세상에!" ? document.getElementByClass와 document.getElementById의 작동 방식을 알고 있지만 좀 더 구체적으로 설명하고 싶습니다. 이전에 요청한 경우 죄송합니다.

먼저, 같은 기능을 가진 요소를 선택해야합니다 getElementById.

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

getElementById하나의 노드 만 반환하지만 getElementsByClassName노드 목록을 반환합니다. 해당 클래스 이름을 가진 요소는 하나뿐이므로 (내가 알 수있는 한) 첫 번째 요소 만 얻을 수 있습니다 (즉 [0], 배열과 같습니다).

그런 다음으로 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

편집 작업을 제거하려면 "."만 추가하십시오. 뒤에 작업을 수행