本文主要和大家分享JS和JQuery对操作DOM的方法，主要以代码的方法，希望能帮助到大家。
查询节点:
js：1.根据ID查询；2.根据标签名查询；3.根据name查询；4.根据层次查询；详情如下：
<script>
//1.根据ID查询节点
var ul = document.getElementById("city");
var cd = document.getElementById("cd");
console.log(ul);
console.log(cd);
//2.根据标签名查询节点
//2.1在整个文档（document）内查询
console.log(document.getElementsByTagName("li"));
//2.2在某个元素节点（element）内查询
console.log(ul.getElementsByTagName("li"));
//3.根据name查询节点（基本都是给表单控件用的）
console.log(document.getElementsByName("sex"));
//4.根据层次查询节点
//获取已得到的节点的父亲、孩子和兄弟
//4.1获取父亲,返回的是单个值
console.log(cd.parentNode);
//4.2获取孩子，返回的是多个值
//这种方式返回的节点是个数组，并且会把空格当做孩子放入数组中
console.log(ul.childNodes);
//不带空格的获取孩子的节点
console.log(ul.getElementsByTagName("li"));
//标准API中没有直接查询兄弟的方法，
//必须通过查询父亲、查询孩子来实现查询兄弟,
//下面的语句输出：上海
console.log(cd.parentNode.getElementsByTagName("li")[1]);
</script>jQuery：直接利用jQuery选择器，选中元素，进行操作即可；请查看另一片文章：jQuery选择器https://blog.csdn.net/huang_yx/article/details/79686975（点击打开链接）
读写节点:
js：大致分为：1.读写节点名称和类型；2.读写节点内容；3.读写节点属性；4.读写表单控件的值；详情如下：
<script>
//1.读取节点的名称和类型
//获取p1
var p1 =document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//2.读写节点的内容（<p>内容</p>）
//innerHTML:支持子标签
console.log(p1.innerHTML)
console.log(p1.innerHTML = '单标签试一试')
console.log(p1.innerHTML)
//innerText:不支持子标签
var p2 = document.getElementById("p2");
console.log(p2.innerText);
p2.innerText = "2.<u>查询</u>节点";
//3.读写节点的属性
//3.1.标准的API是下面的三个
//先取到这个节点
var img = document.getElementById("li");
console.log(img.getAttribute("src"));
img.setAttribute("src", "../img/add.png");
img.removeAttribute("src");
//3.2.新的API(低版本浏览器不支持)
//节点.属性名（class除外，要写成className）
//注意点：.style和.className是标准的
var a = document.getElementById("baidu");
console.log(a.href);
a.href = "undifined";
//4.读写表单控件的值
//input.value/input.value=""
</script>jQuery：
读写节点的HTML内容（支持子标签）：对应上面js的第2点
obj.html()/obj.html("45a2772a6b6107b401db3c9b82c049c212354bdf357c58b8a65c66d7c19c8e4d114")
读写节点的文本内容（不支持子标签）:对应上面js的第2点
obj.text()/obj.text("123")
读写节点的属性值：对应上面js第3点
obj.attr("属性名")/obj.val("属性名","属性值")
读写节点的value属性值：对应上面js第4点
obj.val()/obj.val("abc")
注：obj表示jQuery对象
增删节点：js对节点的增删只能通过父节点，jQuery则样方便很多，有很多对应的api
js：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script>
function add(){
//创建新节点
//相当于在内存中创建了一个<li></li>
var li = document.createElement("li");
//相当于在<li>中创建了一个内容
li.innerHTML = "天津";
//追加新节点,可以通过父亲的孩子获取，也可以直接通过ID获取
var ul = document.getElementById("city");
ul.appendChild(li);
}
//插入到节点中间
function insertion(){
//创建新节点
var li = document.createElement("li");
li.innerHTML = "成都";
//插入新节点,到广州之前
var ul = document.getElementById("city");
var gz = document.getElementById("gz");
ul.insertBefore(li, gz)
}
//删除节点,必须通过父亲来删除
function del(){
//获取要删除的节点
var sz = document.getElementById("sz");
//必须通过父亲才能取删除孩子的节点
sz.parentNode.removeChild(sz);
}
</script>
</head>
<body>
<p>
<input type="button" value="增加"
onclick="add();"/>
<input type="button" value="插入"
onclick="insertion()"/>
<input type="button" value="删除"
onclick="del()"/>
</p>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
</body>
</html>jQuert：
创建节点：
$("节点内容")；
$("45a2772a6b6107b401db3c9b82c049c2你好54bdf357c58b8a65c66d7c19c8e4d114")
插入节点：常用API
parent.append(obj)：作为最后一个子节点添加进来
parent.prepend(obj)：作为第一个子节点添加进来
brother.after(obj)：作为下一个兄弟节点添加进来
brother.before(obj)：作为上一个兄弟节点添加进来
删除节点：常用API
obj.remove()：删除节点
obj.remove(selector)：只删除满足selector的节点
obj.empty()：清空节点
遍历节点：jQuery对应的一些API，方便节点操作
children()/children(selector)：直接子节点
next()/next(selector)：下一个兄弟节点
prev()/prev(selector)：上一个兄弟节点
siblings()/siblings(selector)：所有兄弟
find(selector)：查找满足选择器的所有后代
parent()：父节点
总结：
js和jQuery对节点的操作无非都是增删改查之类，但是jQuery是一个js的框架，它的核心理念：write less，do more；极大的简化代码的书写。它封装了JS，CSS，DOM,提供了一致的、简约的API，所有使用起来更加方便快捷，相应的写法也更加简单。
相关推荐：
Atas ialah kandungan terperinci JS和JQuery对操作DOM的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AMMemahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AMPython lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AMPython dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.
Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AMPeralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AMEnjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AMSaya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AMArtikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
