Dom节点 vs 元素，两者有什么区别？
<p>文档对象模型(DOM)是一个将HTML或XML文档视为树形结构的接口，其中每个节点都是文档的一个对象。DOM还提供了一组方法来查询树、改变结构、样式。 <p>DOM 还使用术语元素(Element)它与节点非常相似。那么，DOM节点和元素之间有什么区别呢?
1. DOM节点
<p>理解节点和元素之间区别的关键是理解节点是什么。 <p>更高的角度来看，DOM文档由节点层次结构组成。 每个节点可以具有父级和/或子级。 <p>看看下面的HTML文档:<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Page Body -->
<h2>My Page</h2>
<p id="content">Thank you for visiting my web page!</p>
</body>
</html>
<p><html>是文档树中的一个节点。它有2个子节点:<head>和<body>。<p><body>子有3个子节点的节点:注释节点 <!-- Page Body -->，标题<h2>，段落<p>。<body>节点的父节点是<html>节点。<p>HTML文档中的标记代表一个节点，有趣的是普通文本也是一个节点。段落节点<p>有1个子节点:文本节点“Thank you for visiting my web page!”。1.2节点类型
<p>我们要如何区分这些不同类型的节点？ 答案在于DOM Node接口，尤其是Node.nodeType属性。<p>Node.nodeType可以具有代表节点类型的以下值之一：- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
- Node.CDATA_SECTION_NODE
- Node.PROCESSING_INSTRUCTION_NODE
- Node.COMMENT_NODE
- Node.DOCUMENT_NODE
- Node.DOCUMENT_TYPE_NODE
- Node.DOCUMENT_FRAGMENT_NODE
- Node.NOTATION_NODE
Node.ELEMENT_NODE代表元素节点，Node.TEXT_NODE代表文本节点，Node.DOCUMENT_NODE文档节点，依此类推。<p>例如，让我们选择段落节点，然后查看其nodeType属性：const paragraph = document.querySelector('p'); paragraph.nodeType === Node.ELEMENT_NODE; // => true
Node.DOCUMENT_NODE：document.nodeType === Node.DOCUMENT_NODE; // => true
2. DOM元素
<p>掌握了DOM节点的知识之后，现在该区分DOM节点和元素了。<p>如果你了解节点术语，那么答案是显而易见的:元素是特定类型的节点element (Node.ELEMENT_NODE)，以及文档、注释、文本等类型。<p>简而言之，元素是使用HTML文档中的标记编写的节点。 <html>，<head>，<title>，<body>，<h2>，<p>都是元素，因为它们由标签表示。<p>文档类型，注释，文本节点不是元素，因为它们没有使用标签编写：<p>Node是节点的构造函数，HTMLElement 是 JS DOM 中元素的构造函数。段落既是节点又是元素，它同时是Node和HTMLElement的实例const paragraph = document.querySelector('p'); paragraph instanceof Node; // => true paragraph instanceof HTMLElement; // => true
3. DOM属性：节点和元素
<p>除了区分节点和元素之外，还需要区分只包含节点或只包含元素的DOM属性。<p>节点类型的以下属性评估为一个节点或节点集合（NodeList）：node.parentNode; // Node or null node.firstChild; // Node or null node.lastChild; // Node or null node.childNodes; // NodeList
HTMLCollection）：node.parentElement; // HTMLElement or null node.children; // HTMLCollection
node.childNodes和node.children都返回子级列表，因此为什么要同时具有这两个属性？ 好问题！<p>考虑以下包含某些文本的段落元素：<p> <b>Thank you</b> for visiting my web page! </p>
childNodes和children属性：const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]
paragraph.childNodes集合包含2个节点： <b>Thank you</b>,，以及for visiting my web page!文本节点！
<p>但是，paragraph.children集合仅包含1个项目：<b>Thank you</b>。
<p>由于paragraph.children仅包含元素，因此此处未包含文本节点，因为其类型是文本（Node.TEXT_NODE），而不是元素（Node.ELEMENT_NODE）。
<p>同时拥有node.childNodes和node.children，我们可以选择要访问的子级集合：所有子级节点或仅子级是元素。
4.总结
<p>DOM文档是节点的分层集合，每个节点可以具有父级和/或子级。如果了解节点是什么，那么了解DOM节点和元素之间的区别就很容易。 <p>节点有类型，元素类型就是其中之一，元素由HTML文档中的标记表示。<p>英文原文地址：https://dmitripautin.com/dom-node-element/ <p>作者：Shadeed <p>来源：dmitripavlutin<p>更多编程相关知识，请访问：编程教学！！
Atas ialah kandungan terperinci Dom节点 vs 元素，两者有什么区别？. 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
1390
52
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Bagaimana untuk melaksanakan editor kolaboratif dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 01:37 PM
Editor kolaboratif masa nyata telah menjadi ciri standard pembangunan web moden Terutamanya dalam pelbagai kerjasama pasukan, penyuntingan dokumen dalam talian dan senario pengurusan tugas, teknologi komunikasi masa nyata berdasarkan WebSocket boleh meningkatkan kecekapan komunikasi dan kesan kerjasama di kalangan ahli pasukan. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk membina editor kolaboratif dalam talian yang mudah untuk membantu pembaca memahami dengan lebih baik prinsip dan penggunaan WebSocket. Fahami prinsip asas WebSocketWebSo
JavaScript dan WebSocket: Membina enjin carian masa nyata yang cekap
Dec 17, 2023 pm 10:13 PM
JavaScript dan WebSocket: Membina enjin carian masa nyata yang cekap Pengenalan: Dengan pembangunan Internet, pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk enjin carian masa nyata. Apabila mencari dengan enjin carian tradisional, pengguna perlu mengklik butang carian untuk mendapatkan hasil kaedah ini tidak dapat memenuhi keperluan pengguna untuk hasil carian masa nyata. Oleh itu, menggunakan teknologi JavaScript dan WebSocket untuk melaksanakan enjin carian masa nyata telah menjadi topik hangat. Artikel ini akan memperkenalkan secara terperinci penggunaan JavaScript
