Cara mendapatkan nilai kelas di javascript

Question

JavaScript ECMAScript 5, tidak memiliki tipe kelas. Jadi itu tidak mendukung konsep pemrograman berorientasi objek penuh seperti bahasa lain seperti Java atau C #. Namun, Anda dapat membuat fungsi sedemikian rupa sehingga berfungsi sebagai kelas

Table of Contents Show

Tambahkan Metode di Kelas
Pengantar metode getElementsByClassName()
Contoh metode getElementsByClassName() JavaScript
1) Memanggil JavaScript getElementsByClassName() pada contoh elemen
2) Memanggil JavaScript getElementsByClassName() pada contoh dokumen
Bagaimana cara mendapatkan nilai kelas dalam JavaScript?
Bagaimana cara menetapkan nilai kelas dalam JavaScript?
Bagaimana cara mendapatkan nilai kelas di jQuery?
Bagaimana cara mendapatkan nilai kotak teks menggunakan nama kelas di JavaScript?

Contoh berikut menunjukkan bagaimana suatu fungsi dapat digunakan seperti kelas dalam JavaScript

Contoh. Kelas dalam JavaScript

function Person() {
    this.firstName = "unknown";
    this.lastName = "unknown";
}

var person1 = new Person();
person1.firstName = "Steve";
person1.lastName = "Jobs";
            
alert(person1.firstName + " " + person1.lastName);

var person2 = new Person();
person2.firstName = "Bill";
person2.lastName = "Gates";
            
alert(person2.firstName + " " + person2.lastName );

Cobalah

Dalam contoh di atas, fungsi Person()_ menyertakan variabel firstName, lastName, dan usia menggunakan kata kunci ini. Variabel ini akan bertindak seperti properti. Seperti yang Anda ketahui, kita dapat membuat objek dari fungsi apa pun menggunakan kata kunci baru, sehingga objek person1 dibuat dengan kata kunci baru. Jadi sekarang, Person akan bertindak sebagai kelas dan person1 & person2 akan menjadi objeknya (instance). Setiap objek akan menyimpan nilainya secara terpisah karena semua variabel ditentukan dengan kata kunci this yang mengikatnya ke objek tertentu saat kita membuat objek menggunakan kata kunci baru

Jadi ini adalah bagaimana suatu fungsi dapat digunakan seperti kelas dalam JavaScript

Tambahkan Metode di Kelas

Kita dapat menambahkan ekspresi fungsi sebagai variabel anggota dalam suatu fungsi di JavaScript. Ekspresi fungsi ini akan bertindak seperti metode kelas

Contoh. Metode di Kelas

function Person() {
            this.firstName = "unknown";
            this.lastName = "unknown";
            this.getFullName = function(){
                return this.firstName + " " + this.lastName;
            }
        };

var person1 = new Person();
person1.firstName = "Steve";
person1.lastName = "Jobs";

alert(person1.getFullName());
     
var person2 = new Person();
person2.firstName = "Bill";
person2.lastName = "Gates";

alert(person2.getFullName());

_

Cobalah

Dalam contoh di atas, fungsi Person() membuat properti FirstName dengan menggunakan Object. metode defineProperties(). Argumen pertama adalah this, yang mengikat properti FirstName untuk memanggil objek. Argumen kedua adalah objek yang menyertakan daftar properti yang akan dibuat. Kami telah menentukan properti FirstName dengan fungsi get & set. Anda kemudian dapat menggunakan properti ini menggunakan notasi titik seperti yang ditunjukkan di atas

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggunakan metode getElementsByClassName() untuk memilih elemen berdasarkan nama kelas

Pengantar metode getElementsByClassName()

Metode getElementsByClassName() mengembalikan objek seperti array dari elemen turunan dengan nama kelas tertentu. Metode getElementsByClassName() tersedia pada elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

0 atau elemen lainnya

Saat memanggil metode pada elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

_0, ia mencari seluruh dokumen dan mengembalikan elemen turunan dari dokumen

let elements = document.getElementsByClassName(names);
Code language: JavaScript (javascript)

_

Namun, saat memanggil metode pada elemen tertentu, ia mengembalikan turunan dari elemen spesifik tersebut dengan nama kelas yang diberikan

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

Metode ini mengembalikan

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

2 yang merupakan Koleksi HTML langsung dari elemen yang cocok

Parameter nama adalah string yang mewakili satu atau lebih nama kelas untuk dicocokkan;

Contoh metode getElementsByClassName() JavaScript

Mari kita ambil beberapa contoh penggunaan metode getElementsByClassName()

Misalkan Anda memiliki dokumen HTML berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>
Code language: HTML, XML (xml)

1) Memanggil JavaScript getElementsByClassName() pada contoh elemen

Contoh berikut mengilustrasikan cara menggunakan metode getElementsByClassName() untuk memilih item

let elements = rootElement.getElementsByClassName(names);



Code language: JavaScript (javascript)

5 yang merupakan turunan dari elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

6

let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');

let data = [].map.call(items, item => item.textContent);

console.log(data);
Code language: JavaScript (javascript)

Keluaran

['HTML', 'CSS', 'JavaScript', 'TypeScript']
Code language: JavaScript (javascript)

Bagaimana itu bekerja

Pertama, pilih elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

6 dengan nama kelas

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

8 menggunakan metode

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

9

Kemudian, pilih elemen

let elements = rootElement.getElementsByClassName(names);



Code language: JavaScript (javascript)

5, yang merupakan turunan dari elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

6, menggunakan metode getElementsByClassName()

Terakhir, buat array konten teks dari elemen

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

5 dengan meminjam metode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>
Code language: HTML, XML (xml)

4 dari objek

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>
Code language: HTML, XML (xml)

5

2) Memanggil JavaScript getElementsByClassName() pada contoh dokumen

Untuk mencari elemen dengan kelas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>
Code language: HTML, XML (xml)

6, Anda menggunakan kode berikut

let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);

console.log(data);
Code language: JavaScript (javascript)

Keluaran

["Example 1", "Example 2"]
Code language: JavaScript (javascript)

Contoh ini memanggil metode getElementsByClassName() pada objek

let elements = rootElement.getElementsByClassName(names);
Code language: JavaScript (javascript)

0. Oleh karena itu, ia mencari elemen dengan kelas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>
Code language: HTML, XML (xml)

9 di seluruh dokumen

Bagaimana cara mendapatkan nilai kelas dalam JavaScript?

Metode getElementsByClassName() mengembalikan kumpulan elemen dengan nama kelas tertentu. Metode getElementsByClassName() mengembalikan HTMLCollection. Properti getElementsByClassName() bersifat hanya-baca.

Bagaimana cara menetapkan nilai kelas dalam JavaScript?

Ubah nilai kelas menggunakan properti className . Menggunakan properti className memungkinkan Anda mengubah nilai atribut class, tetapi Anda perlu menambahkan nilai sebelumnya secara manual jika ingin mempertahankannya.

Bagaimana cara mendapatkan nilai kelas di jQuery?

metode jQuery val() digunakan untuk mendapatkan nilai suatu elemen. Fungsi ini digunakan untuk mengatur atau mengembalikan nilai. Nilai pengembalian memberikan atribut nilai dari elemen pertama.