DOM之行走在DOM中_html/css_WEB-ITnose
根节点: documentElement 和 body
DOM的根节点是 document.documentElement . 这个特定的属性用来访问最顶端的HTML标签.
另外的开始点是document.body, 代表了BODY标签.
两者作为进入点都是有效的. 但是document.body可以为null.
例如, 在HEAD里script脚本访问document.body, 这时候会讲null来代替这个属性的值. 这是自然的, 因为这时候没有BODY标签.
在下面的例子中, 弹出框会输出null:
代码名称
The document
同这个相反, document.documentElement总是有效的.
同样提示下document.body不能为undefined. 在DOM的世界里, 一个元素找不到或者没有这个元素, 值都是为null的.
一个更直观的描述上面的规则就是在脚本执行的时候, 引用的元素还没有被浏览器渲染.
孩子元素
有一些方式获取元素的孩子元素.
childNodes
一个元素引用他们的孩子节点,用childNodes来访问, 返回的是一个节点数组.
所有的节点被引用访问, 包含空白节点(除了IE
代码名称
Allowed readers:
- Bob
- Alice
SCRIPT节点同样包含在其中.
在上面的例子中, document.body.childNodes[1]是DIV元素(在所有的除了IE
children
有时候我们仅需要浏览元素节点, 跳过文本节点. 这时候我们就该用children属性.
他包含所有的元素. 我们来看看统一的一个例子, 但是用children来代替childNodes.
他在这里将会输出的是所有的标签元素.
代码名称
Allowed readers:
- Bob
- Alice
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 list
推荐阅读
-
HTML DOM Window对象_html/css_WEB-ITnose
-
DOM【介绍、HTML中的DOM、XML中的DOM】
-
HTML DOM(学习笔记二)_html/css_WEB-ITnose
-
《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose
-
HTML DOM(学习笔记一)_html/css_WEB-ITnose
-
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
-
从零开始一步一步写一个简单的 Virtual DOM 实现 2 :Props&Event 处理_html/css_WEB-ITnose
-
有没有像Js操控HTML中DOM模型的PHP类,推荐一个解决方案
-
求问w3c html dom的api在哪里下载?高分求教!每次写属性方法都乱试,很耗时间_html/css_WEB-ITnose
-
从零开始一步一步写一个简单的 Virtual DOM 实现 2 :Props&Event 处理_html/css_WEB-ITnose