it-swarm-id.com

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.

104
Tanner Babcock

Pertama, Anda harus memilih elemen dengan fungsi seperti getElementById.

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

getElementById hanya mengembalikan satu simpul, tetapi getElementsByClassName mengembalikan daftar simpul. Karena hanya ada satu elemen dengan nama kelas itu (sejauh yang saya tahu), Anda hanya bisa mendapatkan yang pertama (itulah gunanya _[0]_ — artinya seperti 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>_
191
Joseph Marikle

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 memiliki class="bar".
  3. Itu mengembalikan nodeList seperti array, jadi Anda referensi item pertama di nodeList itu
  4. Anda kemudian dapat mengatur innerHTML dari item 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 hilang.


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!");
13
jfriend00

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

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

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}]`);
}
3
Benjamin Werner