JavaScript中BOM和DOM关系

之前的学习中总是喜欢将知识点记录在笔记本上，但东西多了就很不方便分类管理，所以尝试用博客的方式记录一下

1.BOM与DOM的结构层次图：

首先上一张两者的结构层次图，我认为这张图很好的解释了BOM和DOM之间的层次关系：

          

2.BOM(Browser Object Model):

• 浏览器对象模型，主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
• BOM中代表浏览器窗口的window对象是Javascript顶层对象，其他BOM对象均为window对象的子对象，被作为window对象的属性来引用;
• 其他BOM对象都是在window对象中进行操作;
• window对象除了上述五种以外还有其他的对象，比如计时器，它还是常会用到的。

3.DOM(Document Object Model):

• 文档对象模型，用于表示和操作HTML文档内容的基础API;
• DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

3.1HTML文档的树状表示

这里我觉得慕课中的讲得比较清晰，先来看看代码：

  
JS DOM
  
 JavaScript使网页显示动态效果并实现与用户交互功能。
  

    
JavaScript
    
DOM
    
CSS
  
 

将HTML代码分解为DOM节点层次图：

                                                     

分解后：

• 元素节点：上图中、、

  等都是元素节点，即标签；

• 文本节点：向用户展示的内容，如
• ...
中的JavaScript、DOM、CSS等文本；
• 属性节点:   元素属性，如标签的链接属性href="http://www.imooc.com"。

关于DOM的一些具体操作和属性将会在之后的博客中继续介绍，首次博客就到这里了...