JavaScript与DOM

认识DOM

DOM的英文全称是Document Object Model，即文档对象模型，DOM的作用在于它能够在所有浏览器早上提供一种一致的方式，通过代码访问HTML的结构和内容。

创建DOM

创建一个DOM的前提是要有一个格式正确的HTML5页面，如下所示

    
    
    


    
Hello World!
    

        
What are you doing?
        

            No big deal,just three stories.
        
        

            Stay hungry,stay foolish!
        
    

创建上述HTML5页面DOM的步骤:

1. 首先在最上面创建一个document节点

   
   
   

   DOM1.png

2. 接下来，取HTML最顶层的元素，在这里就是元素，称之为当前元素，把它作为document的子节点增加到DOM。

   
   
   

   DOM2.png

3. 对于当前元素中嵌套的每一个元素，将该元素作为当前元素的子节点增加到DOM。

   
   
   

   DOM3.png

4. 对于刚增加的各个元素，返回第三步，重复这个工作，直到处理完所有元素。

JavaScript与HTML5通信

HTML和JavaScript完全来自两个不同的星球，HTML的DNA是由描述性标记构成，允许比描构成页面的一组嵌套元素。而JavaScript是由纯算法的基因构成，主要用来描述计算。

HTML和JavaScript能够通信的主要原因是DOM。完成这种通信的方式有很多。下面我们来介绍常用的几种。

DOM获取元素

getElmentById方法允许JavaScript访问DOM的任何元素。

获取元素的值

//获取元素
var planet = document.getElementById('greenplanet')
//获取元素的值
var x = planet.innerHTML;

修改元素的值

//获取元素
var planet = document.getElementById('greenplanet')
//修改元素的值
planet.innerHTML = "just do it";

更新DOM

示例如下，修改id为myHeader的元素的值：

    
        
    
    

        
这是标题
        
点击标题，会提示出它的值。

    

如代码所述，在这里，JavaScript会在浏览器第一次加载页面的head部分并且在加载页面其他部分之前执行，所有DOM还没有完全创建。因此这时DOM还没有创建id为myHeader的元素，此元素还不存在，因此x.innerHTML = "hello world"将会修改无效。由此我们加上这行代码window.onload = getValue;这会告诉浏览器在完全加载页面并创建DOM之后再运行我的代码，只要这样才会达到我们预期的效果。

当然，DOM能够的远远不止这些工作，以后会慢慢接触到DOM的其他功能。