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 内核模块设计

    一.  内核模块 1.  头文件 Linux/init.h  和 Linux/module.h 2.  装载内核 insmod  对应的转载函数 module_init(); 3.  卸载内核 rmm ...

  2. css水平居中总结

    前言 看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用. 一.元素分类 1.行内元素 行内 ...

  3. Quartz Scheduler(2.2.1) - hello world

    简单示例 1. maven 依赖 <dependencies> <dependency> <groupId>org.quartz-scheduler</gro ...

  4. Ehcache(2.9.x) - API Developer Guide, Cache Extensions

    About Cache Extensions Cache extensions are a general-purpose mechanism to allow generic extensions ...

  5. Asp.net中基于Forms验证的角色验证授权

    Asp.net的身份验证有有三种,分别是"Windows | Forms | Passport",其中又以Forms验证用的最多,也最灵活. Forms 验证方式对基于用户的验证授 ...

  6. Objective-C中一个方法如何传递多个参数的理解

    原来如此 Objective-C语法中多参数传递方法经常是初学者最容易犯困的地方.我自己也是刚刚悟出来与大家分享. 分析 由于我们已有的语言经验告诉我们定义方法都是: 一个类型匹配一个参数(动态语言甚 ...

  7. 并行执行的Service,以媒体转码成新格式为例

    大家众所周知,IntentService内置的handler只有一个线程,而AsyncTask又只适合时间至多几秒的操作,所以我们关注使用ExecutorService建立并行执行.为了确保Servi ...

  8. JDBC之数据连接

    :数据库语句: create database LandDB; use LandDB; create table T_BL_CANTON_CODE ( CTN_CODE int primary key ...

  9. Appcn 移动开发 前台与服务器数据交互

    第一次写.嘿嘿. 言归正传,这几天开始学习移动开发,使用的是Appcan平台.Appcan平台采用HTML5+CSS3做开发 实现跨平台,正好可以满足我们的业务需求. Appacn和数据库进行交互的方 ...

  10. iOS - 数组与字典(NSArray & NSDictionary)

    1. 数组的常用处理方式 //--------------------不可变数组 //1.数组的创建 NSString *s1 = @"zhangsan"; NSString *s ...