Home > Article > Web Front-end > DOM之行走在DOM中_html/css_WEB-ITnose
DOM之行走在DOM中_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:51:391354browse
访问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
代码名称
<!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
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
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.