欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

DOM之行走在DOM中_html/css_WEB-ITnose

程序员文章站 2022-05-12 17:33:39
...
访问DOM都要从document开始. 这个对象提供了一系列的搜索和改变元素的方法.

根节点: 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
The footer
相关标签: DOM之行走在DOM中