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
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
