您的位置：首页 > Web前端 > JavaScript

HTML,DOM和javascript的关系

2013-10-12 15:01 239 查看

一：使用JavaScript可以给HTML中的某些标签设置事件属性的处理器（Handle）
    在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。
    标签的事件属性是有HTML规范所设定的，所以对于某个标签支持哪些事件属性，可以通过查阅该标签的事件属性列表来获得，例如，我们想在鼠标移动到某个超链接时，显示一个提示对话框，其内容是欢迎来到“该超链接所链接的网站”。如何解决这个问题，首先我们查看HTML文档（W3school）中关于标签<a>的属性，发现其有一个名为onmouseover的事件属性，查看ommouseover事件属性的具体描述是：当鼠标指针悬停于某元素之上时执行脚本。显然，这个事件属性可以满足我们的需求，所以我们应该为该事件属性注册一个事件属性处理器，事件处理器的值是一个或一系列以分号隔开的
Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。常用的注册标签的事件属性处理器的方法有两种：
    方法一：直接在事件属性的值中写JavaScript代码，例如
    <a href="http://www.google.com" onmouseover="alert('欢迎来到Google！');return true;">Welcome to Google.</a>
    方法二：将JavaScript代码封装到一个函数中，然后再onmouseover事件属性中用函数名来注册该处理器，例如

<html>

<head>

<script type="text/javascript">

function hello()

{

alert('欢迎来到Google！');

false;

}

</script>

<title>My First page.</title>

</head>

<body>

<a href="http://www.google.com" onmouseover="hello();">Welcome to Google.</a>

</body>

</html>

二：利用JavaScript操纵HTML页面中的DOM对象
利用JavaScript对象可以操纵HTML中的DOM对象和Browser（浏览器）对象，这些对象如下图所示：

通常在编写JavaScript代码时，我们都直接可以使用这些对象，例如获取或设置对象属性，使用对象提供的方法。现在要思考的问题是，这些对象是如何被构造出来的，为何我们可以直接使用这些对象，这些对象的属性是由谁来设置的，这些对象的方法的代码有在哪里？
实际上上面这些所有的问题，都可以归结为一个问题：HTML页面是如何被显示的？专业一点的说法就是：HTML页面是如何被渲染的。
当我们向服务器请求某个页面时，服务器接受到我们的请求后将该页面的.html文件该我们发送过来，我们知道.html文件就是一个普通的文本文件，那么那些多彩的页面是如何来的呢？以下我们假设，我们请求到了一个名为index.html的文件。浏览器的页面渲染引擎（实际上就是一个.EXE或.DLL）读取index.html，在内存中以标签为结点来构造一棵DOM（Document Obejct Model）树。如图所示：

构造好DOM树之后，我们的渲染引擎就可以通过对这棵树以结点形式进行访问，然后进行页面的渲染。那有人就要问了，为啥我们渲染引擎要构造这棵DOM树，实际上这是由渲染引擎对页面的渲染算法所决定的，试想以下，如果渲染引擎使用其他的渲染算法，而不是通过遍历这棵DOM树来渲染页面，那么从渲染引擎的角度上讲就不需要构造这个DOM树了，实际上从使得页面具有动态效果的的角度上来看还是有必要构造这棵DOM树的，因为我们可以使用JavaScript代码来操纵这些DOM对象从而达到动态设置或改变DOM对象的属性这样页面也就会有所变化。
    浏览器对象模型（BOM）的作用实际上是和 DOM 的使用是一样的，就是为了方便前端页面的编程，通过使用BOM对象我们就可以操纵浏览器，做到动态定制浏览器的特性。
    渲染引擎在对 index.html 构建DOM树时,必然对<script>标签做了特殊处理，因为该标签中包含的内容为JavaScript代码，它对于页面的渲染没有直接的关系（它是有间接的关系），其中的代码需要经由JavaScript解释引擎来处理，DOM树构建好之后，DOM对象和BOM对象自然也就构造好了，那么JavaScript中使用的对象例如：document，window，中的属性也就设置好了，方法代码的入口点，也就确定了，这样就可以使用JavaScript代码中的getElementById，getElementByName等方法，来获取结点，设置属性。
    在编写HTML页面时一定要有这样一个认识：JavaScript代码在执行时是由JavaScript解释引擎来进行执行的，而在JavaScript解释引擎对<script>标签中的代码进行解释执行的时候，浏览器的渲染引擎已经完成了对index.html文件的解析，从而DOM和BOM对象就已经构造好了，自然在JavaScript代码中可以正确引用到结点对象。所以，<script>和其他标签是分开处理的，同时处理的顺序也不同。千万不要认为<script>标签的执行与其位置有关，从而在使用某些方法时有所顾虑，例如：getEleme
4000
ntById，千万不要认为我们要获取的元素在JavaScript代码所出现的<script>标签之后出现，就对该方法的使用产生怀疑。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript DOM HTML 浏览器渲染

相关文章推荐

新的分享

章节导航