Bagaimana cara getElementByClass daripada GetElementById dengan JavaScript?

94

Saya mencoba mengubah visibilitas elemen DIV tertentu di situs web tergantung pada kelas masing-masing DIV. Saya menggunakan cuplikan JavaScript dasar untuk mengaktifkannya. Masalahnya adalah bahwa skrip hanya digunakan getElementById, karena getElementByClasstidak didukung di JavaScript. Dan sayangnya saya harus menggunakan class dan bukan id untuk memberi nama DIV karena nama DIV dihasilkan secara dinamis oleh stylesheet XSLT saya menggunakan nama kategori tertentu.

Saya tahu bahwa browser tertentu sekarang mendukung getElementByClass, tetapi karena Internet Explorer tidak, saya tidak ingin pergi ke rute itu.

Saya telah menemukan skrip yang menggunakan fungsi untuk mendapatkan elemen berdasarkan kelas (seperti # 8 di halaman ini: http://www.dustindiaz.com/top-ten-javascript/ ), tetapi saya tidak tahu cara mengintegrasikannya dengan skrip toggle saya.

Berikut kode HTML-nya. DIV itu sendiri hilang karena dibuat pada pemuatan halaman dengan XML / XSLT.

Pertanyaan Utama: Bagaimana cara mendapatkan skrip Toggle di bawah ini untuk mendapatkan Elemen menurut Kelas daripada mendapatkan Elemen berdasarkan ID?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
javascript class toggle getelementbyid getelementsbyclassname Alan
sumber
3
Mengapa saya belum menggunakan jQuery selama ini? Saya mengikuti saran @Jonathan Sampson untuk menggunakan jQuery, dan berhasil! (Jawaban CMS adalah yang saya pikir saya cari, tetapi tidak bisa membuatnya berfungsi) Saya telah memberikan setiap tautan sebuah id, dan dengan jQuery saya dapat menentukan kelas mana yang ditampilkan dan kelas mana yang disembunyikan ketika Anda mengklik a tautan tertentu. BAGUS! Solusi ini tampaknya terlalu bagus untuk menjadi kenyataan. jQuery tampaknya terlalu bagus untuk menjadi kenyataan. Apa kekurangan menggunakan jQuery? Sebagai pemula, mengapa saya menggunakan Javascript daripada jQuery?
Alan

Jawaban:

80

Peramban modern memiliki dukungan untuk document.getElementsByClassName. Anda dapat melihat rincian lengkap vendor mana yang menyediakan fungsionalitas ini di caniuse . Jika Anda ingin memperluas dukungan ke browser lama, Anda mungkin ingin mempertimbangkan mesin pemilih seperti yang ditemukan di jQuery atau polyfill.

Jawaban yang Lebih Lama

Anda akan ingin memeriksa ke jQuery , yang memungkinkan yang berikut ini:

$(".classname").hide(); // hides everything with class 'classname'

Google menawarkan file sumber jQuery yang dihosting, sehingga Anda dapat mereferensikannya dan segera siap. Sertakan yang berikut di halaman Anda:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>
Sampson
sumber
1
Meskipun bagus, jQuery yang dihosting Google hanya berguna untuk hal-hal yang paling sederhana, karena keamanan skrip lintas situs yang diterapkan oleh sebagian besar browser modern.
Paulo Santos
2
Anda juga dapat mengunduh file sumber dari jQuery.com dan mereferensikannya secara lokal.
Sampson
21
@Paulo: Pembuatan skrip lintas situs tidak dapat diterapkan untuk <script>tag. JQuery yang dihosting Google dirancang khusus untuk situs web produksi (sebagai CDN). Jika situs Anda adalah https, pastikan Anda menggunakan versi https untuk menghindari peringatan konten campuran.
Chetan S
3
Faktanya, <script>injeksi tag adalah dasar dari permintaan JSONP lintas situs.
Chetan S
2
Paulo, Anda menyadari bahwa setelah Anda memasukkan jQuery dengan tag <script>, tidak ada batasan lintas situs sama sekali?
Dark Falcon
88

The getElementsByClassNameMetode sekarang native didukung oleh versi terbaru dari Firefox, Safari, Chrome, IE dan Opera, Anda bisa membuat fungsi untuk memeriksa apakah implementasi asli tersedia, jika tidak menggunakan metode Dustin Diaz:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Pemakaian:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}
Christian C. Salvadó
sumber
2
Mengapa Anda menggunakan fungsi dalam itu daripada hanya kode biasa?
Tomáš Zato - Kembalikan Monica
-1 misalnya penggunaan dengan asumsi semua elemen di layar memiliki tampilan blok. Dalam toggle_visibility, jika e adalah <span> maka harus 'inline' bukan 'block'. Solusi yang jauh lebih kuat adalah dengan mendefinisikan kelas CSS: .invisible {display: none! Important} dan menggunakan JavaScript (atau jQuery) untuk menetapkan dan membatalkan penetapan kelas tersebut dari elemen
John Meyer
6 
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Sebenarnya dengan menggunakan getElementsByClassName, ini mengembalikan array dari beberapa kelas. Karena nama kelas yang sama dapat digunakan di lebih dari satu contoh di dalam halaman HTML yang sama. Kami menggunakan id elemen array untuk menargetkan kelas yang kami butuhkan, dalam kasus saya, ini adalah contoh pertama dari nama kelas yang diberikan. Jadi saya telah menggunakan [0]

Vishwa
sumber
3

Gunakan untuk mengakses kelas dalam Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
Manvendra Priyadarshi
sumber
2

menambahkan ke jawaban CMS , ini adalah pendekatan yang lebih umum yang toggle_visibilitybaru saja saya gunakan sendiri:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}
cregox
sumber
1

Solusi saya:

Pertama buat tag "<style>" dengan ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Kemudian, saya membuat fungsi di JavaScript seperti ini:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Bekerja seperti pesona bagi saya.

thylorion
sumber
1
Jeda baris ( <br>) tidak berguna / tidak valid dalam tag gaya
Chris Forrence
-1

Tambahkan ID di deklarasi kelas

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
Reltpid
sumber