클래스 및 ID별 요소 내부 요소 가져오기 - JavaScript

클래스 및 ID별 요소 내부 요소 가져오기 - JavaScript

좋아요, 자바스크립트를 손본적은 있지만, 제가 작성한 가장 유용한 것은 CSS 스타일 스위치입니다.그래서 저는 처음입니다.제가 HTML 코드를 가지고 있다고 가정해 보겠습니다.

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

내가 어떻게 변하겠습니까?Hello world!로.Goodbye world!?

방법을 안다.document.getElementsByClassName그리고.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("#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 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}]`);
}

querySelector로 CSS Selector를 사용할 수도 있습니다.

var targetDiv = document.querySelector('#foo .bar');
targetDiv.textContent = "Goodbye world!";

사용가능getElementById아니면getElementsByClassNameDOM Elements 에도 마찬가지입니다. 뿐만 아니라.document

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

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

재귀 함수:

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);
        }
    }
}

document.getElementBy를 사용하면 안 됩니다.ID는 어떤 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

제거 작업을 원하는 경우 "."를 뒤에 추가하고 작업을 수행합니다.

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