W porządku, wcześniej parałem się JavaScript, ale najbardziej użyteczną rzeczą, jaką napisałem, jest przełącznik stylów CSS. Więc jestem w tym trochę nowy. Powiedzmy, że mam taki kod HTML:
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
Jak zmieniłbym „Hello world!” do „Goodbye world!” ? Wiem, jak działają dokumenty document.getElementByClass i document.getElementById, ale chciałbym uzyskać bardziej szczegółowe informacje. Przepraszamy, jeśli o to pytano wcześniej.
źródło
document.getElementsByClassName
będzie działać dobrze..innerHtml
ją.textContent
na ze względu na bezpieczeństwo koderów kopiuj / wklej.Możesz to zrobić w ten sposób:
lub, jeśli chcesz to zrobić z mniejszą ilością sprawdzania błędów i większą zwięzłością, możesz to zrobić w jednej linii, jak poniżej:
W wyjaśnieniu:
id="foo"
.class="bar"
.innerHTML
ten element, aby zmienić jego zawartość.Ostrzeżenia: niektóre starsze przeglądarki nie obsługują
getElementsByClassName
(np. Starsze wersje IE). Jeśli brakuje tej funkcji, można ją ustawić na miejscu.W tym miejscu zalecam korzystanie z biblioteki, która ma wbudowaną obsługę selektora CSS3, zamiast martwić się o zgodność przeglądarki samodzielnie (niech ktoś inny wykona całą pracę). Jeśli chcesz, aby robiła to tylko biblioteka, Sizzle będzie działać świetnie. W Sizzle byłoby to zrobione w ten sposób:
jQuery ma wbudowaną bibliotekę Sizzle, aw jQuery wyglądałoby to tak:
źródło
Jeśli ma to działać w przeglądarce IE 7 lub starszej, należy pamiętać, że metoda getElementsByClassName nie istnieje we wszystkich przeglądarkach. Z tego powodu możesz stworzyć własne getElementsByClassName lub spróbować tego.
źródło
getElementsByClassName
nie działa również w IE8, ale możesz użyćquerySelectorAll
go zamiast niego (prawie tak).qSA
podkładki, aby nadal można było używać natywnego kodu w IE8. Chociaż przyjrzymy się bliżej rozwiązaniu, jest kilka rzeczy, które wymagają naprawy.var i = 0, var child = fooDiv.childNodes[i]
jest nieważny.i <= fooDiv.childNodes
nie ma sensu.childNode.className.test("bar")
Nie machildNode
zmiennej, a łańcuch nie matest()
metody.Funkcja rekurencyjna:
źródło
Najłatwiej to zrobić:
lub lepiej czytelny:
źródło
Nie powinieneś używać document.getElementByID, ponieważ działa on tylko dla kontrolek po stronie klienta, których identyfikatory są naprawione. Zamiast tego powinieneś użyć jquery, jak na poniższym przykładzie.
Użyj tego :
jeśli chcesz usunąć edycję dowolnej operacji, po prostu dodaj „.” za i wykonaj operacje
źródło