Dapatkan elemen di dalam elemen berdasarkan kelas dan ID - JavaScript

Baiklah, saya sudah mencoba-coba JavaScript sebelumnya, tetapi hal paling berguna yang saya tulis adalah CSS-switcher gaya. Jadi saya agak baru dalam hal ini. Katakanlah saya memiliki kode HTML seperti ini:

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

Bagaimana saya mengubah "Halo dunia!" ke "Selamat tinggal dunia!" ? Saya tahu bagaimana document.getElementByClass dan document.getElementById berfungsi, tetapi saya ingin lebih spesifik. Maaf jika ini sudah ditanyakan sebelumnya.

Nah, pertama-tama Anda harus memilih elemen dengan fungsi seperti getElementById.

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

getElementByIdhanya mengembalikan satu simpul, tetapi getElementsByClassNamemengembalikan daftar simpul. Karena hanya ada satu elemen dengan nama kelas itu (sejauh yang saya tahu), Anda bisa mendapatkan yang pertama (itulah gunanya [0]- itu seperti sebuah array).

Kemudian, Anda dapat mengubah html dengan .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>

Anda dapat melakukannya seperti ini:

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

atau, jika Anda ingin melakukannya dengan lebih sedikit pengecekan kesalahan dan lebih singkatnya, bisa dilakukan dalam satu baris seperti ini:

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

Dalam penjelasan:

1. Anda mendapatkan elemen dengan id="foo".
2. Anda kemudian menemukan objek yang ada di dalam objek yang dimiliki class="bar".
3. Itu mengembalikan nodeList seperti array, sehingga Anda referensi item pertama di nodeList itu
4. Anda kemudian dapat mengatur innerHTMLitem itu untuk mengubah isinya.

Peringatan: beberapa browser lama tidak mendukung getElementsByClassName(mis. Versi IE yang lebih lama). Fungsi itu dapat di-shim ke tempatnya jika tidak ada.

Di sinilah saya sarankan menggunakan perpustakaan yang memiliki dukungan pemilih CSS3 built-in daripada khawatir tentang kompatibilitas browser sendiri (biarkan orang lain melakukan semua pekerjaan). Jika Anda hanya ingin perpustakaan melakukan itu, maka Sizzle akan bekerja dengan baik. Dalam Sizzle, ini akan dilakukan seperti ini:

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

jQuery memiliki built-in library Sizzle dan di jQuery, ini akan menjadi:

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

Jika ini perlu bekerja di IE 7 atau lebih rendah Anda harus ingat bahwa getElementsByClassName tidak ada di semua browser. Karena ini, Anda dapat membuat getElementsByClassName Anda sendiri atau Anda dapat mencoba ini.

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

Fungsi rekursif:

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

Cara termudah untuk melakukannya adalah:

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

atau lebih baik dibaca:

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

Anda tidak boleh menggunakan document.getElementByID karena hanya berfungsi untuk kontrol sisi klien yang id diperbaiki. Anda harus menggunakan jquery sebagai gantinya seperti contoh di bawah ini.

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

Gunakan ini :

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

// do not forget to add script tags as above

jika Anda ingin menghapus operasi edit apa pun maka tambahkan saja "." di belakang dan melakukan operasi