DOM文档对象模型
网页是一个动态的数据结构，你可以通过javascript与之交互，你可以访问并读取网页中元素的内容，还可以修改网页的内容和结构。为此我们必须暂时回过头去深入了解JS和HTML是如何工作的？
JavaScript和HTML是如何协同工作的？
javascript和HTML是两种不同的东西：HTML是标记，而JavaScript是代码，他们是如何交互的呢？即文档对象模型实现的。DOM是怎么来的呢？它是浏览器在加载网页时创建的。创建过程如下：
- 浏览器在加载网页时，不仅会对HTML进行分析并将其渲染到显示器，还创建一系列表示标记的对象。这些对象存储在DOM中。
- js代码可以通过与dom交互来访问元素及其内容，还可使用DOM来创建或删除元素
- js代码修改dom时，浏览器会动态地更新网页，让用户能够在网页中看到新内容
两种截然不同的技术是怎么走到一起的？
HTML和JavaScript肯定来自不同星球。HTML的DNA是由生命式标记组成，让我们能够描述一系列组成网页的嵌套元素。
JavaScript的DNA完全是由算法遗传物质组成的，用于对计算进行描述。
它们根本就不是一路人，是不是无法交流呢？当然不是，因为它们之间有座桥梁DOM.通过DOM，JavaScript能够与网页交流
这部分代码<head>部分隐藏了
1 <body> 2 <h1>Green Planet</h1> 3 <p id="greenplanet">All is well</p> 4 <h1>Red Planet</h1> 5 <p id="redplanet">Nothing to report</p> 6 <h1>Blue Planet</h1> 7 <p id="blueplanet">All systems A-OK</p> 8 9 </body>
如何自己动手制作JS和html之间的桥梁DOM
首先创建一个document节点
接下来，提取HTML网页中的顶级元素，将其视为当前元素，京作为document的子节点加入DOM中
对于嵌套在当前元素中的每个元素，都将其作为当前元素的子节点加入DOM中
对于刚刚添加的每个元素，都重复第三步，知道所有元素都加入了DOM中。（274）
使用document对象访问DOM
getElementById获取html元素
1 /*调用getElementById，找到并返回id为greenplanet的元素，将元素赋给变量planet*/ 2 var planet=document.getElementById("greenplanet");
使用getElementById方法，通过指定的id获取一个元素，该方法接受一个id,并返回该id指定的元素。得到的是一个id为greenplanet的<p>元素
从DOM获取的到底是什么？
使用getElementById从DOM中获取元素时，得到的是一个元素对象，你可以使用它来读取、修改或替换元素的内容和特性。神奇之处在于，当你修改元素时，所做的修改也将反映到网页中。元素，对象也由属性和方法，我们可以使用属性和方法来读取修改元素，下面是可以对元素对象执行的一些操作。
innerHTML修改元素内容
planet.innerHTML="Red Alert:hit by phaser fire!";
console.log(planet.innerHTML);
此处使用元素对象的属性innerHTML修改元素的内容，使用可以有读取或替换元素的内容
修改内容会由什么影响呢？
他会即时的修改网页的内容。当你修改DOM内容时，网页也随之发生变化。
通过setAttribute修改元素属性
planet.setAttribute("class","redtext ");
获取DOM中的元素之后，将属性class的值改成redtext.如果html对象没有class属性，将会创建一个属性
通过getAttribute获取html元素的属性值
var clatext=planet.getAttribute("class");
如果指定的属性值不存在，将返回null
事件处理程序
处理DOM时候，确保代码要在网页完全加载之后再执行至关重要，否则，执行代码是，DOM很可能还未能创建。
创建一个函数，在其中包含要在网页加载完毕之后要执行的代码
1 function init(){ 2 var planet=document.getElementById("greenplanet"); 3 planet.innerHTML="Red Alert:hit by phaser fire!"; 4 planet.setAttribute("class","redtext "); 5 var clatext=planet.getAttribute("class"); 6 console.log(clatext); 7 }
然后将这个函数赋值给windows的属性onload
1 window.onload=init;
现在更加深入的研究以下onload的工作原理，因为它使用了一个很常见的js编码模式：事件处理程序
给了解事件的对象提供一个函数，事件发生后，这个对象将通过调用这个函数来通知你。刚刚我们演示的是“网页加载完毕”事件，我们可以通过设置对象windows的属性onload来处理它
DOM还有那些新功能
- 获取DOM元素
- 创建元素并将其加入到dom中去
- 从DOM中删除元素
- 遍历DOM中的元素
