Pobierz element wewnątrz elementu według klasy i ID - JavaScript

Question

W porządku, wcześniej programowałem JavaScript, ale najbardziej użyteczną rzeczą, jaką napisałem, jest przełącznik stylu CSS. Więc jestem trochę nowy w tym. Załóżmy, że mam kod HTML podobny do tego:

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

Jak zmienić "Witaj, świecie!" do "Do widzenia na świecie!" ? Wiem, jak działają document.getElementByClass i document.getElementById, ale chciałbym uzyskać bardziej szczegółowe informacje. Przepraszam, jeśli wcześniej zostało to zadane.

Answer 1

Cóż, najpierw trzeba wybierz elementy z funkcją taką jak getElementById.

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

getElementById zwraca tylko jeden węzeł, ale getElementsByClassName zwraca listę węzłów. Ponieważ istnieje tylko jeden element o tej nazwie klasy (o ile mogę powiedzieć), możesz po prostu dostać pierwszy (do tego służy [0] - to tak jak tablica).

Następnie można zmienić kod HTML za pomocą .innerHTML.

targetDiv.innerHTML = "Goodbye world!"; 

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

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

Answer 2

Można to zrobić tak:

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

lub, jeśli chcesz to zrobić z mniej sprawdzania błędów i większej zwięzłości, można to zrobić w jednej linii tak:

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

W wyjaśnieniem:

1. uzyskać element z id="foo".
2. Następnie można znaleźć obiekty, które są zawarte w tym obiekcie, które mają class="bar".
3. Zwraca podobną do tablicowej nodeList, więc odwołujesz się do pierwszej pozycji w tej liście węzłowej
4. Możesz następnie ustawić innerHTML tego elementu, aby zmienić jego zawartość.

Ostrzeżenia: niektóre starsze przeglądarki nie obsługują getElementsByClassName (np. Starsze wersje IE). Funkcję tę można umieścić w miejscu, jeśli jej brakuje.

---

To gdzie ja zalecamy użycie biblioteki, która ma wbudowaną obsługę selektora CSS3 zamiast martwić się o kompatybilność przeglądarki siebie (niech ktoś inny zrobi całą pracę). Jeśli chcesz, żeby to zrobiła biblioteka, Sizzle będzie działać świetnie. W Sizzle, byłoby to być zrobione tak:

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

---

jQuery ma bibliotekę Sizzle wbudowane i w jQuery, byłoby to:

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

Answer 3

Jeśli ta musi działać w IE 7 lub obniżyć trzeba pamiętać, że getElementsByClassName nie istnieje we wszystkich przeglądarkach. Z tego powodu możesz stworzyć własny getElementsByClassName lub możesz go wypróbować.

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!"; 
    } 
} 

Answer 4

Nie należy stosować document.getElementById ponieważ jego praca tylko dla klientów kontroli ubocznych, które identyfikatory są stałe. Powinieneś użyć jquery zamiast jak poniżej przykładu.

<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> 

wykorzystanie w ten sposób: "".

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

// do not forget to add script tags as above 

jeśli chcesz edytować dowolny usuń wtedy każda operacja wystarczy dodać tyłu i wykonać operacje

Answer 5

funkcji rekurencyjnej:

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

Answer 6

Najprostszym sposobem na to jest:

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

lub lepiej czytelne:

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