浅谈javascript宿主浏览器

    javascript第一部分记录了 javascript 基础语法，知道了基础语法告诉我怎样来组织、描述程序。第二部分的记录了客户端web的组成并告诉我怎样将javascript代码嵌入都Hhtml 文档中等。重要的两部分记录完后我对javascript和WEB客户端的元素有了一个简单的了解。后面将深入HTML DOM 各个对象 ，记录 javascript基础规则结合DOM规则进行HTML DOM 客户端编程

    本文围绕着下面两点大体讲了 什么是DOM标准？？？DOM标准存在的意义？什么是HTML文档？？什么是HTML DOM(HTML 文档对象模型)？？javascript程序的驱动模型是什么？？？？？怎么在HTML文档中运行javascript？？？？？

 

 

1.       Web浏览器中的程序设计环境

2.       HTML嵌入Javascript

 

web浏览器中的程序设计环境

javascript分为2部分。第一部分主要讲程序的基本语法，它告诉我们如何用javascript所具备的功能和的规则来组织代码。第一部分建立了一套基本规则，第二部分是浏览器这里称为宿主。基础规则依赖于宿主服务于宿主，宿主利用这两个特性轻易的操纵它来完成宿主自身想做的事，其实宿主本身也提供一套强大DOM规则，下面有说。宿主如何用那套javascript基础规则来操作自己，浏览器对javascript脚本语言专门提供了程序设计环境，它们是javascript脚本的接入点，javascript基础规则与宿主强大的DOM结合才能发挥javascript的主要作用。接下来将介绍程序设计环境的3个重要特性：

• 全局window对象
• 什么是DOM 标准
• HTML 结构化的文档、HTML DOM(HTML 文档对象模型)
• 事件驱动程序模型设计

 

1.1 全局window对象

window对象说是全局，因为它是文档对象模型(DOM)的顶层对象也可是浏览器的对象。每个浏览器再打开时都将会创建一个window对象，如果定义了多个框架，还将同时为另外的每个框架都创建window对象。 

---

1.2.1 什么是DOM 标准

DOM标准 是W3C定义的一套 方法 属性和事件 用于访问和操纵HTML文档，Document.getelementById()它 就是W3C所定义DOM标准的一员。在web 浏览器中，DOM主要的作用就是结合javascript来修改 增加甚至重构整个HTML文档，HTML文档下面也将介绍。DOM 十分强大 它可以操作html文档中的任何元素图片?表格?type=”text”>?。对于每个HTML元素，它都有特定的方法 、 属性或事件来操纵，就拿html文档中的table表格标签，相对于DOM 来讲 它是一个对象，没错，它是一个Table对象，既然是对象，属性方法也必不可少，使用tableobject.insertRow(index)方法就可轻易并且动态的增加一行。这就是DOM，这就是体现javascript面向对象的特性之处！DOM 实际上细分3部分Core DOM(通用DOM)、 HTML DOM 和XMLDOM，每种DOM专门相应的层次结构化的文档，Core DOM是W3C定义较为通用的DOM， 使用它可以操作 XML文档 和HTML文档，通用的和专用的不言而喻，肯定没用专用的提供的全面。 最后补充一点，必须要等到html加载完才可以使用DOM。

---

1.3.1 HTML结构化的文档

HTML 文档就是DOM一直想要驾驭的东西之一，之二是xml文档…。HTML文档是一组按树形结构组织成的文档，有根节点，有父节点、兄弟节点、子节点等，这些节点的老大就是document文档对象,它是每个html文档特有的对象，位于整个html结构化文档的顶层。下面上文档层次结构图一张：

图1.

 

1.3.2 HTML DOM(HTML 文档对象模型)

    HTML DOM　是以树组成的对象集合。她包括窗口 window对象 、文档 document 对象 A 标签Links数组对象 等等。HTML 文档摇身一变HTML DOM：

第一节说过一个窗体可以定义多个框架，每个框架都会创建一个window对象。从上图可以发现window是一个forms数组对象，通过索引可以引用各个框架的window 

---

1.4 事件驱动程序设计模型

    早期在时代交互有限，随着图形界面的逐渐发展，产生新一代事件驱动人机交互模型，该模型可以动态的实现程序交互，javascript客户端中 提供很多类型的事件，例如鼠标事件、键盘事件。比如我们按了某一个键后触发某个编写好的任务，这些事件都是基于HTML文档对象的。事件驱动模型是被动形式，作为设计者只需要预先编写好事件，等待用户的操作触发。

---

HTML中嵌入javascript

在html中嵌入javascript脚本有多种方法，下面来：

• 嵌入。
  

  ---

  2.3 嵌入html元素事件中

  在这小段说下javascript中的事件都是以on开头。如果是二句以下简单代码使用这种方式还行，多了就不推荐使用了，另外该种机制javascript代码方式支持有限。使用方法是在直接在元素事件中嵌入javascript代码，多句小代码使用分号分隔，2句以上建议另建一个函数。使用方式,如果想单击一个文本框时，触发单击事件并在文本框中填写一段文字：

  <input type="text" id="txtName" onclick="this.value='xxx'" />

  
  

  并且改变文本框中的字体颜色： 

  <input type="text" id="txtName" onclick="this.value='xxx';this.style.color='blue'" />

  
  

  ---

  2.4 特殊的URL

      事件中嵌入javascript脚本不奇怪，没想到URL中叶可以嵌入javascript脚本，这意味着URL不光是javascript嵌入的一种方式也是事件触发的一种方式。要使用这种方式，必须要遵守已定的规则：javascript：。这种嵌入方式javascript内容可以是任意类型，语句之间用分号分号。她还有个特点，javascript最后一条语句的返回值，都在在URL加载文档中格式化成字符串显示出来，如果不想改变当前文档，就要确保特殊URL的 javascript嵌入方式的最后一条语句没有返回值，可以使用void(0) 操作符返回一个空值：
  

  <a href=”javascript:open()”>a标签</a>

  
  

  <a href="javascript:window.open();void(0)">a标签2</a>

  
  
  URL嵌入方式还有一个最大的用处就是形成一个死链接，像某些情况使用a标签本意是指向当前页面，但他却指向了首页，像这种情况使用特殊的URL，让他真正的形成一个死链接：

  <a href=”javascript:void(0)”></a>