访问始终从document开始。
找个对象提供各种各样的方法进行搜索或修改元素。

根本: documentElement和body

DOM的根永远是document.documentElement. 这个特殊的属性将提供路径对最外层的HTML标签进行访问。
另一个开始的起点为document.body，它代表着BODY标签。


根元素

两个入口点都是有效地。但document.body可能为null.
例如，你可以从HEAD标签访问document.body，会看到null。这是自然的，因为这时候还没有BODY。
下面的例子中，第一个alert输出为null。



    
        
    
    
        
The document

        
    

与此相反，document.documentElement始终可以被访问。
我们还注意到document.body不能为undefined。在DOM的世界中，"找不到元素"和"没有此元素"一直为null。

作为一个通用规则，一个元素在渲染出来之前无法进行引用。

子节点

有多种方式获取子元素。

childNodes

一个元素通过childNodes与子元素数组进行关联。
所有的节点都可以被引用，包括空白节点(除IE<9)。



  
    
Allowed readers:

    
    
      
  • Bob
    • 
      
  • Alice
    • 
    

    
    
    Go!
  


显示画面

我们注意到SCRIPT节点也将会列出来。
在所有的浏览器中(除了IE<9，因为它们没有空白节点document.body.childNodes[1]为 UL) document.body.childNodes[1] 为DIV。

children

有时候我们跳过文本节点，只想浏览元素节点。children属性刚好提供该功能。
它包含所有的元素节点。使用上文同样的代码，但使用children替换childNodes。它将会只输出元素节点。



  
    
Allowed readers:

    
    
      
  • Bob
    • 
      
  • Alice
    • 
    


    

    

    Go!

  

当IE<9时'children'的注释节点
当IE版本小于9时children也会列出注释节点。

子链接

我们还可以使用siblings, parent等等来进一步方便遍历元素。

firstChild和lastChild

通过 firstChild 和 lastChild 我们可以很方便的访问元素的第一个节点和最后一个节点。


子节点

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, 添加/删除元素，但我们没有必要手动修改节点间的链接关系，因为浏览器已经做了。

    思考
    document.body.lastChild.nextSibling是否始终为null
    document.body.children[0].previousSibling是否始终为null

总结

DOM树紧密的连接在一起：
向上
parentNode
向下
children/childNodes, firstChild, lastChild
左右
previousSibling/nextSibling
浏览器保证了这些链接是准确的，它们都是只读的。
如果没有这种节点(子，父，邻居)，将返回null。