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. Delphi2009下编译提示“无法找到“Excel_TLB”

    这是没有安装Excel组件导致的,安装Excel组件的步骤是: 1.新建Package工程 2.在Office安装目录下找到文件XL5CHS32.OLB 我的Office版本是2007,XL5CHS3 ...

  2. AutoCAD 2014 win 32bit破解版

    AutoCAD 2014 win 32bit破解版 百度云盘:http://pan.baidu.com/s/1nu2u6Hr

  3. Quartz Scheduler(2.2.1) - Usage of JobDataMap

    The JobDataMap can be used to hold any amount of (serializable) data objects which you wish to have ...

  4. 【AngularJs】---$sce 输出Html

    [问题描述] angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各 ...

  5. 关于easyui的一些小知识点(1)

    让layout布局自动适应浏览器宽度只需要加上fit="true"属性.

  6. React-Native错误笔记-EPERM

    运行react-native run-android时出现错误 EPERM:operation not permitted,lstat .............. 解决办法:用Android Stu ...

  7. linux下vsftpd的安装与配置说明

    问题: 1.530 Permission denied.答:配置文件中userlist_enable=YES(如果启用即YES,则看userlist_deny=YES/NO,如果为NO,则要把登录的用 ...

  8. chattr实现文件不可删除

    用自己的话解释清楚这件事儿~ 目前问题: Android手机,在/system/app 目录下的apk,使用chmod 修改权限失败,rm命令也删除不掉. 现象: rm failed for wand ...

  9. Linux ---> 简单socket

    #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <string.h> ...

  10. DTcms 导航选中样式以及简化方法

    (建议使用方法2,执行效率略高) 一般用于导航不能循环输出的情况. 可以循环输出导航的情况直接用if判断即可. 首页模版中顶部,自定义c#代码. <%set string channel=&qu ...