Adakah javascript mempunyai pemilih?

Javascript mempunyai pemilih. Pemilih js yang biasa digunakan termasuk: getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll(), dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

javascript mempunyai pemilih.

JavaScript paling biasa digunakan untuk mendapatkan atau mengubah suai kandungan atau nilai elemen HTML dan untuk menggunakan kesan tertentu.

Untuk melakukan ini, anda mesti mencari elemen terlebih dahulu. Pemilih javascript digunakan untuk memadankan elemen Kaedah carian:

• Cari elemen HTML mengikut ID

• Cari elemen HTML mengikut nama tag

• Cari elemen HTML mengikut nama kelas

• Cari elemen HTML dengan pemilih CSS

• Dengan HTML Objek carian koleksi untuk elemen HTML

Pemilih js yang biasa digunakan termasuk: getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

Cari elemen HTML mengikut ID

Anda boleh menggunakan kaedah getElementById() untuk memilih elemen berdasarkan ID uniknya.

Ini ialah cara paling mudah untuk mencari elemen HTML dalam pepohon DOM.

Contoh berikut memilih elemen dengan atribut ID id="msg":

var x = document.getElementById("msg");

Jika elemen ditemui, kaedah akan mengembalikan elemen sebagai objek.

Jika elemen tidak ditemui, myElement akan mengandungi null.

Cari elemen HTML mengikut nama teg

Anda juga boleh memilih elemen HTML mengikut nama teg menggunakan kaedah getElementsByTagName().

Kaedah ini mengembalikan senarai seperti tatasusunan bagi semua elemen dalam dokumen dengan nama teg yang ditentukan.

Contoh: Pilih semua e388a4556c0f65e1904146cc1a846bee elemen:

var x = document.getElementsByTagName("p");

Cari elemen HTML mengikut nama kelas

Anda boleh menggunakan Kaedah getElementsByClassName() memilih semua elemen dengan nama kelas tertentu.

Kaedah ini mengembalikan senarai seperti tatasusunan bagi semua elemen dalam dokumen dengan nama kelas yang ditentukan.

Contoh ini mengembalikan senarai semua elemen dengan class="demo":

var x = document.getElementsByClassName("demo");

Cari elemen HTML mengikut pemilih CSS

Anda boleh gunakan kaedah querySelectorAll() untuk memilih elemen (ID, kelas, jenis, dll.) yang sepadan dengan pemilih CSS yang ditentukan.

Kaedah ini mengembalikan senarai seperti tatasusunan bagi semua elemen yang sepadan dengan pemilih yang ditentukan.

Pemilih CSS menyediakan cara yang sangat berkuasa dan cekap untuk memilih elemen HTML dalam dokumen.

var x = document.querySelectorAll("div");

Cari elemen HTML melalui koleksi objek HTML

Elemen paling teratas dalam dokumen HTML boleh digunakan terus sebagai atribut dokumen.

Sebagai contoh, elemen 100db36a723c770d327fc0aef2ce13b1 boleh diakses menggunakan dokumen atribut.documentElement.

Elemen boleh diakses dengan harta document.body.

var html = document.documentElement;
var body = document.body;

Nota: Jika document.body digunakan sebelum teg (contohnya, di dalam 93f0f5c25f18dab9d176bd4f6de5d30e), ia akan mengembalikan null dan bukannya elemen badan.

Objek HTML berikut (dan koleksi objek) juga boleh diakses:

属性	描述
document.anchors	返回所有具有名称属性的3499910bf9dac5ae3c52d5ede7383485元素
document.applets	返回所有082dedeb30a00d0e6e2cdb74a392fac3元素（在HTML5中已弃用）
document.baseURI	返回文档的绝对基本URI
document.body	返回元素
document.cookie	返回文档的cookie
document.doctype	返回文档的文档类型
document.documentElement	返回100db36a723c770d327fc0aef2ce13b1元素
document.documentMode	返回浏览器使用的模式
document.documentURI	返回文档的URI
document.domain	返回文档服务器的域名
document.domConfig	已废弃；返回DOM配置
document.embeds	返回所有d8e2720730be5ddc9c2a3782839e8eb6元素
document.forms	返回所有ff9c23ada1bcecdd1a0fb5d5a0f18437元素
document.head	返回93f0f5c25f18dab9d176bd4f6de5d30e元素
document.images	返回所有a1f02c36ba31691bcfe87b2722de723b元素
document.implementation	返回DOM实现
document.inputEncoding	返回文档的编码（字符集）
document.lastModified	返回文档更新的日期和时间
document.links	返回所有具有href属性的03fc64e1e502d5ba947b3a9af06d2d2a和3499910bf9dac5ae3c52d5ede7383485元素
document.readyState	返回文档的（加载中）状态
document.referrer	返回引用者的URI（链接文档）
document.scripts	返回所有3f1c4e4b6b16bbbd69b2ee476dc4f83a元素
document.strictErrorChecking	返回是否强制执行错误检查
document.title	返回b2386ffb911b14667cb8f0f91ea547a7元素
document.URL	返回文档的完整URL

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Adakah javascript mempunyai pemilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!