masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Adakah javascript mempunyai pemilih?

Adakah javascript mempunyai pemilih?

青灯夜游
Lepaskan： 2022-02-21 17:52:27
asal
1862 orang telah melayarinya

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

Adakah javascript mempunyai pemilih?

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");
Salin selepas log masuk

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

elemen: 

var x = document.getElementsByTagName("p");
Salin selepas log masuk

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");
Salin selepas log masuk

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");
Salin selepas log masuk

Cari elemen HTML melalui koleksi objek HTML

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

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

Elemen boleh diakses dengan harta document.body. 

var html = document.documentElement;
var body = document.body;
Salin selepas log masuk

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

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

属性 描述
document.anchors 返回所有具有名称属性的元素
document.applets 返回所有元素（在HTML5中已弃用）
document.baseURI 返回文档的绝对基本URI
document.body 返回元素
document.cookie 返回文档的cookie
document.doctype 返回文档的文档类型
document.documentElement 返回元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的URI
document.domain 返回文档服务器的域名
document.domConfig 已废弃；返回DOM配置
document.embeds 返回所有元素
document.forms 返回所有
元素
document.head 返回元素
document.images 返回所有元素
document.implementation 返回DOM实现
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.links 返回所有具有href属性的和元素
document.readyState 返回文档的（加载中）状态
document.referrer 返回引用者的URI（链接文档）
document.scripts 返回所有
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved