博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript--- HTML DOM
阅读量:6765 次
发布时间:2019-06-26

本文共 1180 字,大约阅读时间需要 3 分钟。

            看了这个题目,不知聪明的读者会有什么样的感觉?这篇文章将要讲javascript和DOM的关系呢?还是要讲javascript的DOM?

在这里我首先就讲明文章的主旨有两点:什么是DOM?它和javascript的关系是什么?

       一 什么是DOM?  

官方解释:Document Object Model 是一种用于HTML和XML文档的编程接口。它给文档提供一个结构化的表示方法。能够改变文档的内容和呈现方式。

       看了这个官方解释认为。还是那样没有什么感觉,那好请尾随我继续,等读完本文相信你对上面的官方解释会有了共同的认知。

       不同的类型的网页文档有不同的DOM,本文将从HTML DOM 入手。DOM中的D能够理解为WEB载入的文档,当创建一个网页并把它载入到浏览器时,DOM就在幕后悄然而生。它将依据你编写的网页文档创建一个文档对象。

O指的是对象。document对象。DOM为html网页中的每一元素都封装为对象。

M是模型,可是我更喜欢说是结构,这个模型体现了html各个元素之间的结构关系。

将封装的对象以节点的形式构成单性生殖家族图谱树,每一个网页元素都能够被确切的定位。   

       

       二   html与 DOM

        以下的一张图,解释了他们两个的关系。

        从图中我们不难看出。他们两个的关系。html网页中的标签和DOM结构图中的节点是一一相应的。DOM中的节点是对网页中标签的映射。

我们通过对节点的操作就能够实现对元素的操作。外界可通过DOM提供的对象、方法和属性,訪问全部 HTML元素。连同他们包括的文本和属性,能够对当中的内容进行改动和删除。同一时候也能够创建新的元素。这样解除了html页面内容和动态实现之间的耦合。同一时候有利于保护原有html页面的结构。

        三  javascript与DOM

       通过javascript,能够重构整个HTML文档,能够加入、删除、改变或重排页面上的项目。要改变页面,javascript
就须要获得对HTML文档中的全部元素进行訪问的入口。

这个入口。包含对HTML元素进行加入、移动、改变等操

作。都是通过DOM来实现的。
      

       DOM是一套规范、标准。DOM不是javascript的一部分。它为javascript提供对象方法。它是网页对被“外界”使用的通道或者说是接口。今天流行的语言是javascript,通过它能够实现动态页面等各种功能。或许明天就会有还有一种语言的诞生。这样的语言也能够通过DOM提供的对象方法。对网页进行查询和操作。

DOM有一种“以不变应万变的情怀”。DOM解除了网页内容与动态实现之间的耦合。

        总结:

       DOM就是一套标准规范,它也是web文档对外提供的接口。DOM实现了页面内容和实现的分离,使网页有了更高的灵活性。javascript能够实现html页面的动态功能。而DOM就是连接二者的桥梁。

你可能感兴趣的文章
SQL Server 2014里的IO资源调控器
查看>>
.NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有
查看>>
Eamcs ditaa基于字符图形产生的图像上
查看>>
Only the original thread that created a view hierarchy can touch its views.
查看>>
LeetCode手记-Add Binary
查看>>
对DNSPOD添加域名解析的一些见解
查看>>
vim添加删除多行注释
查看>>
在caffe中增加和convolution相同的层
查看>>
Java设计模式(四) 装饰 代理模式
查看>>
Filter过滤非法字符
查看>>
嵌入式系统烧写uboot/bootloader/kernel的一般方法
查看>>
PyCharm4注册码--软件安装
查看>>
【转】物业管理与移动互联网科技|微信公众平台,物业app,物业O2O
查看>>
patch与diff的恩怨
查看>>
蓝桥杯——先进的多说好树遍历
查看>>
Hdu 5444 Elven Postman dfs
查看>>
Nagios显示器MySQL一个错误:NRPE: Unable to read output具体的解决过程
查看>>
精讲母函数
查看>>
读取数据库中timestamp类型去掉毫秒
查看>>
(四)左右ng-app自己主动bootstrap相框
查看>>