DOM之行走在DOM中_html/css_WEB-ITnose
访问DOM都要从document开始. 这个对象提供了一系列的搜索和改变元素的方法.
根节点: documentElement 和 body
DOM的根节点是 document.documentElement . 这个特定的属性用来访问最顶端的HTML标签.
另外的开始点是document.body, 代表了BODY标签.
两者作为进入点都是有效的. 但是document.body可以为null.
例如, 在HEAD里script脚本访问document.body, 这时候会讲null来代替这个属性的值. 这是自然的, 因为这时候没有BODY标签.
在下面的例子中, 弹出框会输出null:
代码名称
<!DOCTYPE HTML><html> <head> <script> alert("Body from HEAD: "+document.body) // null </script> </head> <body> <div>The document</div> <script> // different browsers output different text here, // because of different implementations of toString alert("Body from inside body: " + document.body) </script> </body></html>同这个相反, document.documentElement总是有效的.
同样提示下document.body不能为undefined. 在DOM的世界里, 一个元素找不到或者没有这个元素, 值都是为null的.
一个更直观的描述上面的规则就是在脚本执行的时候, 引用的元素还没有被浏览器渲染.
孩子元素
有一些方式获取元素的孩子元素.
childNodes
一个元素引用他们的孩子节点,用childNodes来访问, 返回的是一个节点数组.
所有的节点被引用访问, 包含空白节点(除了IE < 9).
代码名称
<!DOCTYPE HTML><html> <body> <div>Allowed readers:</div> <ul> <li>Bob</li> <li>Alice</li> </ul> <!-- a comment node --> <script> function go() { var childNodes = document.body.childNodes for(var i=0; i<childNodes.length; i++) { alert(childNodes[i]) } } </script> <button onclick="go()" style="width:100px">Go!</button> </body></html>SCRIPT节点同样包含在其中.
在上面的例子中, document.body.childNodes[1]是DIV元素(在所有的除了IE<9的浏览器). 在老版本的IE中, 他们没有空白节点, 因此 document.body.childNodes[1]是UL.
children
有时候我们仅需要浏览元素节点, 跳过文本节点. 这时候我们就该用children属性.
他包含所有的元素. 我们来看看统一的一个例子, 但是用children来代替childNodes.
他在这里将会输出的是所有的标签元素.
代码名称
<!DOCTYPE HTML><html> <body> <div>Allowed readers:</div> <ul> <li>Bob</li> <li>Alice</li> </ul> <!-- a comment node --> <script> function go() { var children = document.body.children for(var i=0; i<children.length; i++) { alert(children[i]) } } </script> <button onclick="go()" style="width:100px">Go!</button> </body></html>Children 连接关系
通过或一系列的孩子元素还不够, 因为访问他们还不够方便.
因此, 还有其他的属性, 比如siblings, parent等等.
firstChild 和 lastChild
firstChild和lastChild属性可以快速访问第一个和最后一个孩子元素.
他们是基于同样的一致性的childNodes索引.
代码名称
var body = document.body alert(body.firstChild === body.childNodes[0])alert(body.lastChild === body.childNodes[body.childNodes.length-1])
parentNode , previousSibling 和 nextSibling
-
parentNode 属性引用到父节点. document.documentElement的父节点为null
-
previousSibling和nextSibling允许访问左节点和右节点.
例如:
代码名称
<!DOCTYPE HTML><html><head> <title>My page</title></head><body> <div>The header</div> <ul><li>A list</li></ul> <div>The footer</div></body> </body></html>
下图展示 (不包含空白标签):
浏览器总是保持正确的连接关系.
我们可能需要去改变DOM或者添加/移除元素, 但是不需要我们手动去改变他们, 浏览器来做这件事情.
总结
DOM 树是紧密相连的:
父辈
-
parentNode
子辈
-
children/childNodes , firstChild , lastChild
左右兄弟
-
previousSibling/nextSibling
浏览器保证所有连接关系都是正确的. 他们是只读权限. 如果没有一个元素(子节点, 父节点,相邻节点),他们的值都是null.
编程的人正在在线培训
"前端编程开发","后端开发","移动开发"等,
需要学习的可以加入群或者微信留言
原创内容,转载请注明出处.
公众微信号:bianchengderen
QQ群: 186659233
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.
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
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?
Apr 04, 2025 pm 11:54 PM
Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...
Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web?
Apr 04, 2025 pm 11:30 PM
Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...
HTML, CSS, dan JavaScript: Alat penting untuk pemaju web
Apr 09, 2025 am 12:12 AM
HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik?
Apr 05, 2025 am 06:15 AM
Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...
