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. centos下安装usb摄像头驱动

    centos安装在虚拟机下,win7下能正常使用摄像头. 虚拟机显示监测到摄像头,但驱动安装失败. terminal下输入yum install cheese,提示是否安装,输入y确认下载,大概100 ...

  2. this及其作用域（函数外部this变量的调用）

    众所周知的一件麻烦事是函数外部的this变量都不可见,但是我们在编写使用局部函数的方法时,却又很可能需要在某一时刻从内部函数访问this变量. 这种情况下可以通过在this变量中存储一个需要的信息(例 ...

  3. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  4. OC9_字符串的内存管理

    // // main.m // OC9_字符串的内存管理 // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zhangx ...

  5. Spring boot 1.3.5 RELEASE 官方文档中文翻译--目录

    说明: 打算利用闲暇时候翻译一下Spring boot的官方文档,翻译的版本是1.3.5 RELEASE. 做这件事的目的呢有四: 国内中文的Spring boot资料实在不多,希望能给后来人一点小小 ...

  6. strlen() 和 strcpy()函数

    strlen() 和 strcpy()函数的区别,这两个一个是返回一个C风格字符串的长度,一个是对一个C风格字符串的拷贝,两个本来功能上是不同的,此外,他们还有一些细小的区别:strlen(" ...

  7. XML格式以及相关libxml库学习

    本文参考 XML文件格式语法以及DTD,摘除其中自己认为必要的知识点,在此记录如下. 先给出一个xml的实例文件, <?xml version="1.0" encoding= ...

  8. python 函数应用

    #函数的参数就是个变量 #定义函数的时候,使用关键字参数,可以指定默认值 def hello(name='reboot',age=1): return 'hello %s,your age is %s ...

  9. JQ跑马灯

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. js-shortid:优雅简洁地实现短ID

    短ID在实际运用中很广泛, 其中比较典型的运用就是短地址. 市面上肯定有不少开源的生成短ID库, 基于node.js的估计也不少. 鉴于本人已然是node.js的脑残粉(本职java开发), 很多业余 ...