JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系


Posted in Javascript onNovember 15, 2015

区别:

javascript

JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用!你一定会喜欢它的!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

HTML DOM

HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

联系:

通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
Javascript主要是利用HTML DOM去获得、改变、创建HTML元素,从而达到美化页面、操作页面元素的目标。因此,在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外,Javascript有自己的对象,例如数组。

简单说,可以认为Javascript主要是操纵HTML DOM。两者是不一样的。
Javascript是语言,DOM是可以在各种语言中(不仅js,php也有的)动态修改文档的模型。

下面单独拉出JavaScript与DOM的关系给大家详解

JavaScript与浏览器的工作

1.浏览器获取并加载你的页面,从上至下解析它的内容。

 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码。

 浏览器还会建立一个HTML页面的内部模型(DOM)。

2.JavaScript继续执行,使用DOM检查页面、完成修改、从页面接受事件,或者要求浏览器从Web服务器获取其它数据。

JavaScript如何与页面交互?

JavaScript是代码,HTML是标记,完全不同的东西

怎么让它们交互呢?

答案是使用文档对象模型(Docunment Object Model,简称DOM)。

DOM的妙处在于:它能够在所有浏览器上提供一种一致的方式,通过代码访问HTML的结构和内容。

1、在浏览器加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记的所有元素。

2、JavaScript可以与DOM交互(JavaScript使用DOM创建或删除元素等等)

document是一个反映HTML的对象,通过调用document的方法改变DOM的状态,也就是改变HTML页面

3、JavaScript修改了DOM时,浏览器会随着动态更新页面。

自制DOM

材料:格式正确的HTML5页面,WEB浏览器

做法:

 1、在最上面创建一个document节点

 2、取HTML页面的最顶层元素,在这里就是<HTML>元素,把它作为document的子节点加到DOM中

 3、对于当前元素中嵌套的每一个元素,将该元素作为当前元素的子节点增加到DOM

 4、对于刚增加的元素,执行第三步,重复工作,直到处理完所有元素

HTML页面如下  

<!DOCTYPE html>
 <html lang="helloworld">
 <head>
 <title>DOM</title>
 <meta cherset="utf-">
 <script src="dom.js" ></script>
 </head>
 <body>
 <h>My Dom</h>
 <div id="entry">
  <h>hello</h>
  <p>
  Today, I am making a dom!!!
  </p>
 </div>
 </body>
 </html>

得到的DOM如下图

JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系

Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
学习ExtJS Window常用方法
Oct 07 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Javascript实现字数统计
Jul 03 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 #Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 #Javascript
js读取并解析JSON类型数据的方法
Nov 14 #Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 #Javascript
javascript动态生成树形菜单的方法
Nov 14 #Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 #Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 #Javascript
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php的dl函数用法实例
2014/11/06 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
CI框架常用方法小结
2016/05/17 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
自己的js工具 Event封装
2009/08/21 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
教师评职称工作总结2015
2015/04/20 职场文书