js教程--dom获取元素的代码
获取元素：
document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。getElementsByTagName
document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。
类名操作：
Node.classList.add('class') 添加class
Node.classList.remove('class') 移除class
Node.classList.toggle('class') 切换class，有则移除，无则添加
Node.classList.contains('class') 检测是否存在class
自定义属性：
在HTML5中我们可以自定义属性，其格式如下data-*=""，例如：data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name="itcast"，获取Node.dataset['myName']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<ul>
<li>请选择</li>
<li class="red">前端</li>
<li class="green">java</li>
<li class="blue">javascript</li>
<li id="c">c++</li>
</ul>
<script>
/*获取第一个li标签*/
window.onload=function(){
/*ElementsByTagName获取的是数组*/
/*索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加*/
/*var cli=document.getElementsByTagName("li")[1];
console.log(cli);*/
/*query:查询 Selector：选择器 querySelector(传入选择器名称)*/
/*querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/
/*参数要求：如果是类选择器，必须添加. 如果是id选择器， 必须添加# ,否则当成标签处理*/
var javaLi=document.querySelector(".green");
//var javaLi=document.querySelector("#c");
console.log(javaLi);
/*querySelectorAll获取满足条件的所有元素--数组*/
var allLi=document.querySelectorAll("li")[0];
console.log(allLi);
}
</script>
</body>
</html>相关推荐：
原生js获取iframe中dom元素--父子页面相互获取对方dom
Atas ialah kandungan terperinci js教程--dom获取元素的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1655
14
1414
52
1307
25
1253
29
1227
24
Apakah maksud vue dom?
Dec 20, 2022 pm 08:41 PM
DOM ialah model objek dokumen dan antara muka untuk pengaturcaraan HTML dalam halaman dimanipulasi melalui DOM. DOM ialah perwakilan objek dalam memori bagi dokumen HTML, dan ia menyediakan cara untuk berinteraksi dengan halaman web menggunakan JavaScript. DOM ialah hierarki (atau pokok) nod dengan nod dokumen sebagai akarnya.
Apakah cara untuk mendapatkan nod DOM dalam Vue3
May 11, 2023 pm 04:55 PM
1. Native js mendapat nod DOM: document.querySelector (pemilih) document.getElementById (pemilih id) document.getElementsByClassName (pemilih kelas).... 2. Dapatkan objek contoh komponen semasa dalam vue2: kerana setiap vue Setiap contoh komponen mengandungi objek $refs, yang menyimpan rujukan kepada elemen atau komponen DOM yang sepadan. Jadi secara lalai, $refs komponen menghala ke objek kosong. Mula-mula anda boleh menambah ref="name" pada komponen, dan kemudian lulus ini.$refs.
Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya
May 12, 2023 pm 01:28 PM
DOM pengikat Vue3ref atau penerangan senario analisis sebab kegagalan komponen Dalam Vue3, ia sering digunakan untuk menggunakan ref untuk mengikat komponen atau elemen DOM Banyak kali, ref digunakan dengan jelas untuk mengikat komponen berkaitan, tetapi pengikatan ref sering gagal. Contoh situasi kegagalan pengikatan ref Sebilangan besar kes di mana pengikatan ref gagal ialah apabila ref diikat pada komponen, komponen itu belum lagi diberikan, jadi pengikatan gagal. Atau komponen tidak diberikan pada permulaan dan ref tidak terikat Apabila komponen mula membuat, ref juga mula terikat, tetapi pengikatan antara ref dan komponen tidak selesai apabila menggunakan kaedah berkaitan komponen. Komponen terikat kepada ref menggunakan v-if, atau komponen induknya menggunakan v-if untuk menyebabkan halaman tersebut
Apakah objek dom dan bom?
Nov 13, 2023 am 10:52 AM
Terdapat 5 objek DOM termasuk "dokumen", "elemen", "Nod", "Acara" dan "Tetingkap" 2. "tetingkap", "navigator", "lokasi" dan "sejarah" dan "skrin" dan 5 lain; objek BOM.
Panduan manipulasi DOM dalam PHP
May 21, 2023 pm 04:01 PM
Dalam pembangunan web, DOM (DocumentObjectModel) adalah konsep yang sangat penting. Ia membolehkan pembangun mengubah suai dan mengendalikan dokumen HTML atau XML halaman web dengan mudah, seperti menambah, memadam, mengubah suai elemen, dsb. Pustaka operasi DOM terbina dalam dalam PHP juga menyediakan pembangun dengan fungsi yang kaya Artikel ini akan memperkenalkan panduan operasi DOM dalam PHP, dengan harapan dapat membantu semua orang. Konsep asas DOM DOM ialah merentas platform, API bebas bahasa yang boleh
Apakah perbezaan antara bom dan dom
Nov 13, 2023 pm 03:23 PM
BOM dan DOM berbeza dari segi peranan dan fungsi, hubungan dengan JavaScript, saling bergantung, keserasian penyemak imbas yang berbeza dan pertimbangan keselamatan. Pengenalan terperinci: 1. Peranan dan fungsi Fungsi utama BOM adalah untuk mengendalikan tetingkap penyemak imbas Ia menyediakan akses terus dan kawalan tetingkap penyemak imbas, manakala fungsi utama DOM adalah untuk menukar dokumen web menjadi pokok objek. pembangun untuk Mendapatkan dan mengubah suai elemen dan kandungan halaman web melalui pepohon objek ini 2. Hubungan dengan JavaScript, dsb.
Apakah objek terbina dalam DOM?
Dec 19, 2023 pm 03:45 PM
dom内置对象有：1、dokumen；2、tingkap；3、navigator；4、lokasi；5、sejarah；6,skrin；7,dokumen.dokumen .title；11、document.cookie。
Apa yang dom dan bom capai?
Nov 20, 2023 pm 02:28 PM
DOM membolehkan akses dinamik dan kemas kini kepada kandungan halaman web, manakala BOM menyediakan API untuk berinteraksi dengan tetingkap penyemak imbas, termasuk mengawal tingkah laku penyemak imbas dan mendapatkan maklumat tentang pelayar dan persekitaran pengguna DOM digunakan terutamanya untuk mengendalikan kandungan halaman web mengendalikan tetingkap penyemak imbas dan berinteraksi dengan penyemak imbas bersama-sama membentuk asas penting dalam pembangunan bahagian hadapan Web, menyediakan pembangun kaedah yang kaya untuk mengawal dan mengendalikan halaman web dan pelayar untuk mencapai interaktiviti yang kukuh, aplikasi Web dengan pengalaman pengguna yang baik.
