这节博客主要讲解Dom模型概念~和JSON的简单介绍
首先，还是先上out.js的代码：
function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); }
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
在这里，我们学的是HTML-DOM。
什么是 JSON ？
JSON 比 XML 更小、更快，更易解析。
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *，存储和交换文本信息的语法。类似 XML。
JSON 具有自我描述性，更易理解
* JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JSON 语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
演示代码：
<html> <head> <title>自定义对象--json的用法演示</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript" src="out.js"> </script> <!-- 用js来描述我们自己的对象，如类似java当中的Person类 --> <!-- 方式3 --> <script type="text/javascript"> //json---在JavaScript中封装数据对象 //map var pp = { //"name":"张三","age":"23", //key:value name: "张三", age: "23",//这句和上面一句等效---key的名称可以省略引号 getName: function(){ //"getName":function(){//这句和上面一句等效 return this.name; } }; println(pp.name + "," + pp.age); println(pp["name"] + "," + pp["age"]);//表示可以访问pp对象中的“name”和“age”属性 //注意这里属性是名称而不是变量，所以必须用引用 println(pp.getName());//调用函数 println(pp["getName"]);//显示出函数的代码 println(pp["getName"]());//调用函数 var map = { 8: "张三", 3: "李四", 5: "Jack" }; println(map["8"]); //原理同前。json中冒号前面的那个是key，后面的是value println(map[8]); //8是数字，不可能是变量名，因此引号省略照样能解析出来 </script> <script type="text/javascript"> var myObj = { name:"张三丰",age:23 }; println(myObj.name+","+myObj["age"]);//分别用了两种读取属性的方式 </script> <script type="text/javascript"> var myMap={ names:["Jack1","Jack2","Tom1","Tom2"], nums:[10,20,30,40] } println(myMap.names[1]+","+myMap.nums[1]); var myMap={ names:[{name:"Jack111"},{name:"Jack222"},{name:"Jack333"}] } println(myMap.names[1].name); println(myMap.names[1]["name"]);//与上面的访问一样的 </script> </body> </html>
360浏览器8.1 演示结果：
Dom模型概念讲解
DOM: Document Object Model 文档对象模型
主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象
既然都封装成了对象，那么就可以通过这些对象很方便地操作这些文档内容，达到操作页面内容–页面显示。
DOM树中的几个名词：
结点(节点)：dom树中的标签、文本和属性等都称为结点(节点).
元素：dom树中的标签。
子节点 父节点(元素) 兄弟
父结点
主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象
既然都封装成了对象，那么就可以通过这些对象很方便地操作这些文档内容，达到操作页面内容–页面显示。
DHTML技术：
动态的HTML —-html + css + dom +javascript 配合使用，来做动态html页面
HTML—负责提供标签，同时用标签封装数据
CSS—-负责显示样式
dom—-把整个页面中的标签、属性和文字内容封装成对象。
js—–提供程序设计语言，for,while,if
我们可以通过这个对象树来加深对DOM的了解。
（最下面部分未画出）对象树如下：
代码随便写写哒、
代码：
<html> <head> <title>湖南城院</title> </head> <body> <div>div区域</div> <dl> <dt>上层项目</dt> <dd>下层项目</dd> </dl> <table> <tr> <th>姓名</th> </tr> <tr> <td>张三</td> </tr> </table> <form> <input type="text"> </form> <a href="1.html">查看</a> </body> </html>
