JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解-1

简介: JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

这节博客主要讲解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 演示结果:

image.png



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的了解。


(最下面部分未画出)对象树如下:

代码随便写写哒、

image.png


代码:

<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>


目录
相关文章
|
12天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
2天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
3天前
|
存储 监控 安全
理解并实现网络安全的基本概念
【5月更文挑战第24天】本文探讨了网络安全的基本概念,包括保密性、完整性和可用性。防火墙、IDS/IPS、加密、访问控制和安全审计是实现安全的关键措施。最佳实践包括定期更新系统、使用强密码、备份数据、限制网络访问和采用多因素认证。网络安全强调技术与人员意识并重,通过持续学习和适应,以抵御不断演变的威胁。
|
4天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
6 1
|
9天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
10 0
|
10天前
|
机器学习/深度学习 PyTorch 算法框架/工具
神经网络基本概念以及Pytorch实现,多线程编程面试题
神经网络基本概念以及Pytorch实现,多线程编程面试题
|
12天前
|
机器学习/深度学习 人工智能 开发者
什么是网络游戏里的人机概念
什么是网络游戏里的人机概念
14 0
|
12天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
15 2
|
12天前
|
存储 算法 网络协议
【探索Linux】P.26(网络编程套接字基本概念—— socket编程接口 | socket编程接口相关函数详细介绍 )
【探索Linux】P.26(网络编程套接字基本概念—— socket编程接口 | socket编程接口相关函数详细介绍 )
18 0
|
12天前
|
存储 网络协议 Unix
【探索Linux】P.25(网络编程套接字基本概念 —— 预备知识)
【探索Linux】P.25(网络编程套接字基本概念 —— 预备知识)
9 0