这节博客主要讲解Dom模型概念~和JSON的简单介绍

首先，还是先上out.js的代码：

  1. function println(param){
  2.     document.write(param+"<br/>");
  3. }
  5. function print(param){
  6.     document.write(param);
  7. }

什么是 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 语法规则

数据为 键/值 对。

数据由逗号分隔。

大括号保存对象

方括号保存数组

演示代码：

  1. <html>
  2.     <head>
  3.         <title>自定义对象--json的用法演示</title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript" src="out.js">
  8.         </script>
  9.         <!-- 用js来描述我们自己的对象，如类似java当中的Person类 -->
  10.         <!-- 方式3 -->
  11.         <script type="text/javascript">
  12.             //json---在JavaScript中封装数据对象
  13.             //map
  14.             var pp = {
  15.                 //"name":"张三","age":"23", //key:value
  16.                 name: "张三",
  17.                 age: "23",//这句和上面一句等效---key的名称可以省略引号
  18.                 getName: function(){
  19.                     //"getName":function(){//这句和上面一句等效
  20.                     return this.name;
  21.                 }
  22.             };
  24.             println(pp.name + "," + pp.age);
  25.             println(pp["name"] + "," + pp["age"]);//表示可以访问pp对象中的“name”和“age”属性
  26.             //注意这里属性是名称而不是变量，所以必须用引用
  28.             println(pp.getName());//调用函数
  29.             println(pp["getName"]);//显示出函数的代码
  30.             println(pp["getName"]());//调用函数
  31.             var map = {
  32.                 8: "张三",
  33.                 3: "李四",
  34.                 5: "Jack"
  35.             };
  36.             println(map["8"]); //原理同前。json中冒号前面的那个是key，后面的是value
  37.             println(map[8]); //8是数字，不可能是变量名，因此引号省略照样能解析出来
  38.         </script>
  39.         <script type="text/javascript">
  41.             var myObj = {
  42.                 name:"张三丰",age:23
  43.             };
  44.             println(myObj.name+","+myObj["age"]);//分别用了两种读取属性的方式
  45.         </script>
  47.         <script type="text/javascript">
  48.             var myMap={
  49.                 names:["Jack1","Jack2","Tom1","Tom2"],
  50.                 nums:[10,20,30,40]
  51.             }
  53.             println(myMap.names[1]+","+myMap.nums[1]);
  55.             var myMap={
  56.                 names:[{name:"Jack111"},{name:"Jack222"},{name:"Jack333"}]
  57.             }
  59.             println(myMap.names[1].name);
  60.             println(myMap.names[1]["name"]);//与上面的访问一样的
  62.         </script>
  64.     </body>
  65. </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的了解。

（最下面部分未画出）对象树如下：

代码随便写写哒、

代码：

  1. <html>
  2.   <head>
  3.      <title>湖南城院</title>
  4.   </head>
  5.   <body>
  6.       <div>div区域</div>
  7.       <dl>
  8.          <dt>上层项目</dt>
  9.          <dd>下层项目</dd>
  10.       </dl>
  11.       <table>
  12.          <tr> <th>姓名</th> </tr>
  13.          <tr> <td>张三</td> </tr>
  14.       </table>
  15.       <form>
  16.          <input type="text">
  17.       </form>
  18.       <a href="1.html">查看</a>
  19.   </body>
  20. </html>

window对象中的对象

window 对象:

代表浏览器中一个打开的窗口。

navigator 对象

包含关于 Web 浏览器的信息。

属性— 描述

appCodeName— 获取浏览器的代码名称。

appMinorVersion— 获取应用程序的次版本值。

appName —获取浏览器的名称。

appVersion —获取浏览器运行的平台和版本。

browserLanguage —获取浏览器的当前语言。

cookieEnabled— 获取客户端的永久 cookie 是否在浏览器中启用。永久

cookies— 是储存在客户端计算机上的。

cpuClass— 获取指示 CPU 等级的字符串。

onLine —获取表明系统是否处于全局脱机模式的值。

platform —获取用户的操作系统名称。

systemLanguage— 获取操作系统适用的默认语言。

userAgent —获取等同于 HTTP 用户代理请求头的字符串。

userLanguage —获取操作系统的自然语言设置。

演示代码：

  1. <html>
  2.   <head>
  3.     <title>Bom模型演示----window对象中的对象</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   </head>
  7.   <body>
  8.     <!--
  9.        window中的所有对象在调用时，可以省略: window.
  10.     -->
  12.     <script type="text/javascript" src="out.js">
  13.     </script>
  15.     <script type="text/javascript">
  16.         function windowObjDemo(){
  17.             var name = window.navigator.appName;//获取浏览器的名称。
  18.             //var version = window.navigator.appVersion;
  19.             var version = navigator.appVersion;//获取浏览器运行的平台和版本。
  20.             println(name+"----"+version);
  21.             var pro = location.protocol; //设置或获取 URL 的协议部分。
  22.             println(pro);
  23.             var addr = location.href;//设置或获取整个 URL 为字符串。
  24.             println(addr);
  25.         }
  26.         function windowObjDemo2(){
  27.             //location.href ="http://www.baidu.com";//点击按钮，跳转到百度
  28.             location.href ="5a.html";
  29.         }
  30.         function windowObjDemo3(){
  31.             history.forward();//从历史列表中装入下一个 URL。//相对定位-相对的下一个-相当于浏览器中的前进按钮
  32.         }
  33.     </script>
  34.     <input type="button" value="演示window中的对象1" onclick="windowObjDemo()" />
  35.     <input type="button" value="演示window中的对象2" onclick="windowObjDemo2()" />
  36.     <input type="button" value="演示window中的对象3" onclick="windowObjDemo3()" />
  37.   </body>
  38. </html>

5a.html:

  1. <html>
  2.   <head>
  3.     <title>aa</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.         function windowObjDemo(){
  10.             history.back();//从历史列表中装入前一个 URL。---相对定位，相对的前一个。-相当于浏览器中的后退按钮
  11.         }
  12.     </script>
  13.     <input type="button" value="演示window中的对象" onClick="windowObjDemo()" />
  14.   </body>
  15. </html>

这里很简单，就不贴浏览器演示结果图片了。

JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解的更多相关文章

  1. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  2. JavaScript 创建和浅析自定义对象

    在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...

  3. javascript基础编程の变量、对象、数据类型及函数

    在web标准中.网页由结构.表现形式和行为三个部分组成. 结构标准---->XHTML: 表现形式标准----->CSS: 行为标准----->javascript: javascr ...

  4. c++ 网络编程（九）LINUX/windows-IOCP模型 多线程超详细教程及多线程实现服务端

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9661012.html 先讲Linux下(windows下在后面可以直接跳到后面看): 一.线程 ...

  5. 网络编程中select模型和poll模型学习(linux)

    一.概述 并发的网络编程中不管是阻塞式IO还是非阻塞式IO,都不能很好的解决同时处理多个socket的问题.操作系统提供了复用IO模型:select和poll,帮助我们解决了这个问题.这两个函数都能够 ...

  6. 「JavaScript面向对象编程指南」对象

    对象的属性名可加上引号,下面三行代码所定义的内容是完全相同的 var hero = { occupation : 1 }; var hero = { "occupation" : ...

  7. iOS网络编程解析协议三:JSON数据传输解析

    作为一种轻量级的数据交换格式,正在逐步取代XML,成为网络数据的通用格式 基于JavaScript的一个子集 易读性略差,编码手写难度大,数据量小 JSON格式取代了XML给网络传输带来了很大的便利, ...

  8. 转载：Javascript面向对象编程原理 -- 理解对象

    源地址:http://www.html-js.com/article/1717 虽然JavaScript中已经自带了很多内建引用类型,你还是会很频繁的需要创建自己的对象.JavaScript编程的很大 ...

  9. JavaScript面向对象编程指南(四) 对象

    第4章 对象 4.1 从数组到对象 对象的组成:变量名.{}.用逗号分割的属性.用冒号分割的键/值对. var f={ name:'alen', // 可以在属性名上加引号 age:12 }; 对象文 ...

随机推荐

  1. python-MySQLdb-练习

    看完视频,自己练习一遍. 还是遇到问题,不过最终还是解决了.贴上完成的代码. CREATE TABLE `NewTable` ( `acctid` int(11) NOT NULL AUTO_INCR ...

  2. POJ 3254 Corn Fields（DP + 状态压缩）

    题目链接:http://poj.org/problem?id=3254 题目大意:Farmer John 放牧cow,有些草地上的草是不能吃的,用0表示,然后规定两头牛不能相邻放牧.问你有多少种放牧方 ...

  3. IE11的CSS兼容性问题

    最近测试给了我一大堆BUG,一瞅发现全是IE11的.吐槽一下这个浏览器真的比较特立独行.很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍.但是当需 ...

  4. php文件上传大小限制设置

    配置选项说明: upload_max_filesize 所上传的文件的最大大小. post_max_size 设定 POST 数据所允许的最大大小. memory_limit 设定了一个脚本所能够申请 ...

  5. 【python】python的列表表达式或解析式，帅就一个字

    >>> list1 = [x**2 for x in range(10)]>>> list1[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

  6. maya2105 - windows8 - numpy/scipy

    To compile numpy, create a site.cfg file in numpy's source directory with the following or similar c ...

  7. HDU 1532 Drainage Ditches 最大流 （Edmonds_Karp）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1532 感觉题意不清楚,不知道是不是个人英语水平问题.本来还以为需要维护入度和出度来找源点和汇点呢,看 ...

  8. 除了判断语句if switch 我们还可以怎么做？-b

    之前项目中有根据后台数据执行不同代码,根据不同的字符串返回不同UIViewController对象,最开始需要的vc 种类不多我用的是if else 做字符串比较再执行不同代码,但是如果需求的vc 有 ...

  9. JavaScript的OOP编程1

    首先要说的是,javascript其实是可以进行OOP编程的,其次javascript的OOP编程实现方式有多种,我写的这一种只是我测试过,可行的一种 version1 // 父类 function ...

  10. Web-Scale IT 我之见！

    Gartner 曾在发表过的一篇文章中表示,到2017年,全球50%的企业将使用Web-Scale IT 架构.下面我们来看看 Andre Leibovici 对 Web-Scale IT 的看法: ...