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 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
js实现无缝轮播图效果
Mar 09 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实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php基本函数汇总
2015/07/09 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python计算程序运行时间的方法
2014/12/13 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python操作列表的函数使用代码详解
2017/12/28 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
迎八一活动主题
2014/01/31 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
车间主任岗位职责
2014/03/16 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
党性观念心得体会
2014/09/03 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
nginx结合openssl实现https的方法
2021/07/25 Servers