访问dom都要从document开始. 这个对象提供了一系列的搜索和改变元素的方法.
根节点: documentElement 和 body
DOM的根节点是 document.documentElement . 这个特定的属性用来访问最顶端的HTML标签.
另外的开始点是document.body, 代表了BODY标签.
两者作为进入点都是有效的. 但是document.body可以为null.
立即学习“前端免费学习笔记（深入）”；
例如, 在HEAD里script脚本访问document.body, 这时候会讲null来代替这个属性的值. 这是自然的, 因为这时候没有BODY标签.
在下面的例子中, 弹出框会输出null:
代码名称
alert("Body from HEAD: "+document.body) // null The document // different browsers output different text here, // because of different implementations of toString alert("Body from inside body: " + document.body)
登录后复制
同这个相反, document.documentElement总是有效的.
同样提示下document.body不能为undefined. 在DOM的世界里, 一个元素找不到或者没有这个元素, 值都是为null的.
一个更直观的描述上面的规则就是在脚本执行的时候, 引用的元素还没有被浏览器渲染.
孩子元素
有一些方式获取元素的孩子元素.
childNodes
一个元素引用他们的孩子节点,用childNodes来访问, 返回的是一个节点数组.
所有的节点被引用访问, 包含空白节点(除了IE
代码名称
Allowed readers:
登录后复制登录后复制Bob Alice function go() { var childNodes = document.body.childNodes for(var i=0; i<childNodes.length; i++) { alert(childNodes[i]) } }
SCRIPT节点同样包含在其中.
在上面的例子中, document.body.childNodes[1]是DIV元素(在所有的除了IE
children
有时候我们仅需要浏览元素节点, 跳过文本节点. 这时候我们就该用children属性.
他包含所有的元素. 我们来看看统一的一个例子, 但是用children来代替childNodes.
他在这里将会输出的是所有的标签元素.
代码名称
Allowed readers:
登录后复制登录后复制Bob Alice function go() { var children = document.body.children for(var i=0; i<children.length; i++) { alert(children[i]) } }
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允许访问左节点和右节点.
例如:
代码名称
My page The header
登录后复制A listThe footer
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3117600.html
