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

     <script src="dom.js" ></script>

 </head>

 <body>

     <h1>My Dom</h1>

     <div id="entry1">

         <h2>hello</h2>

         <p>

             Today, I am making a dom!!!

         </p>

     </div>

 </body>

 </html>

得到的DOM如下图

　　

JavaScript与DOM的关系的更多相关文章

  1. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  2. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  3. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  4. Javascript的DOM总结

    Javascript的DOM总结 DOM DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的 ...

  5. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  6. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  7. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  8. 前端开发之JavaScript HTML DOM理论篇一

    主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...

  9. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

随机推荐

  1. Linux 命令 - ps: 显示当前进程的快照

    命令格式 ps [options] 实例 a) 查看所有的进程. huey@huey-K42JE:~$ ps aux | head USER PID %CPU %MEM VSZ RSS TTY STA ...

  2. Java集合类 java.util包

    概述   软件包  类  使用  树  已过时  索引  帮助  JavaTM Platform Standard Ed. 6  上一个软件包   下一个软件包 框架    无框架           ...

  3. 微信之Android各版本列表

    微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...

  4. 【SQLServer】将Job运行结果发送电子邮件通知用户

    SQLServer2005/2008数据库邮件功能: 1. 启用数据库邮件功能:打开SQL Server 2005 外围应用配置器,选择“功能的外围应用配置器”,选择“数据库邮件”,勾选“启用数据库邮 ...

  5. 实例介绍Cocos2d-x物理引擎：使用关节

    在游戏中我们可以通过关节约束两个物体的运动.我们通过一个距离关节实例,介绍一下如何在使用关节. 这个实例的运行后的场景如图所示,当场景启动后,玩家可以触摸点击屏幕,每次触摸时候,就会在触摸点和附近生成 ...

  6. css3学习笔记之文本效果

    CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...

  7. SQLite学习心得

    SQLite是一款很有名气的小型开源跨平台数据库,作为目前最流行的开源嵌入式关系型数据库,在系统结构设计中正在扮演着越来越重要的角色. 本文主要沿着 http://www.cppblog.com/we ...

  8. Trie树入门及训练

    什么叫Trie树? Trie树即字典树. 又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本 ...

  9. linux下golang的配置

    linux下golang的配置 之前开发golang一直在windows下,今天在linux下试了一下 ,遇到一些梗,比如go 找不到 sync包.花了一小时全部解决,把过程记录一下. 安装 go 我 ...

  10. Centos 6.5 配置nginx服务

    官方网站:http://nginx.org最新版本:1.7.11官方文档:http://nginx.org/en/docs/ 一.安装NGINX查看当前centos版本: #cat /etc/redh ...