kettle javascript脚本解析对象(js脚本编写教程)

kettle javascript脚本解析对象(js脚本编写教程)

上方蓝字

JavaScript是一种基于对象的语言,它包含了许多对象,例如 Date、Window 和Document对象等,利用这些对象可以很容易的实现JavaScript编程速度并加强JavaScript程序功能。

文档对象模型(DOM)1.文档对象模型(DOM)介绍

DOM是W3C组织推荐的处理HTML/XML的标准接口。DOM实际上是以面向对象的方式描述对象模型,它定义了表示和修改文档所需要的对象,这些对象的行为和属性以及这些对象之间的关系。

各种语言可以按照DOM规范去实现这些接口,给出解析文件的解析器。DOM规范中所指的文件相当广泛,其中包括XML文件以及HTML文件。DOM可以看作一组API,它把HTML文档、XML文档等看作一个文档对象,在接口里面存放大量方法,其功能是对这些文档对象中的数据进行存取,并且利用程序对数据进行相应处理。DOM技术并不是首先用于XML文档,对于HTML文档来说,其早已使用DOM来读取里面的数据了。

DOM可以由JavaScript实现,他们两者之间的结合非常紧密,甚至可以说如果没有DOM,在使用JavaScript时遇到的困难是不可想象的,因为我们每解析一个节点一个元素都要耗费很多精力,DOM本身是设计为一种独立的程序语言,以一致的API存取文件的结构表述。

在使用DOM进行解析HTML对象的时候,首先在内存中构建起一棵完整的解析树,借此实现对整个XML文档的全面、动态访问。也就是说,它的解析是有层次的,即将所有的HTML中的元素都解析成树上层次分明的节点,然后我们可以对这些节点执行添加、删除、修改及查看等操作。

目前W3C提出了三个DOM规范,分别是DOMLevel1、DOMLevel2、DOMLevel3

2.在DOM模型中获得对象的方法

在DOM结构中,其根节点由document对象表示,对于HTML文档而言,实际上就是<html>元素。当使用JavaScript脚本语言操作HTML文档时,document即指向整个文档,<body>、<table>等结点类型即为Element,Comment类型的结点则是指文档的注释。在使用DOM操作XML和HTML文档时,经常要使用document对象。Document对象是一棵文档树的根,该对象可为我们提供对文档数据的最初的访问入口。

<!DOCTYPE html><html><head><title>解析HTML对象</title><script type=”text/javascript”>window.onload = function(){ var zhwHtml = document.documentElement; //通过document.documentElement获取根节点==>html alert(zhwHtml.nodeNAme); //打印节点名称HTML大写 var zhwBody = document.body; //获取body标签节点 alert(zhwBody.nodeName); //打印BODY节点的名称 var fH = zhwBody.firstChild; //获取nody的第一个子节点 alert(fH “body的第一个子节点”); var lH = zhwBody.lastChild; //获取body的最后一个子节点 alert(lH “body的最后一个子节点”); var ht = document.getElementById(“zhw”); //通过id获取<h1> alert(ht.nodeName); var text = ht.childNodes; alert(text.length); var txt = ht.firstChild; alert(txt.nodeName); alert(txt.nodeValue); alert(ht.innerHTML); alert(ht.innerText “Text”);}</script></head><body><h1 id=”zhw”>我是一个内容节点</h1></body></html>

在上面代码中,首先获取HTML文件的根节点,即使用“document.documentElement”语句获取,下面分别获取了body节点、body的第一个节点、最后一个子节点。语句”document.getElementById(“zhw”)”表示获得指定节点,并输出节点名称和节点内容。

在浏览器中效果如图所示,可以看到当页面显示的时候,JavaScript程序会依次将HTML的相关节点输出,例如输出HTML、Body和H1等节点。

3.事件驱动

JavaScript是基于对象的语言,而基于对象的基本特征就是采用事件驱动,它就是在用图形界面的环境下使得一切输入变得简单。通常鼠标热键的动作称为事件,而由鼠标或热键引发的一连串程序的动作,称之为事件驱动。而对事件进行处理程序或函数,我们称之为事件处理程序。

要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序就可以是任意JavaScript语句,但是一般用特定的自定义函数来处理事情。

事件定义了用户与页面交互时产生的各种操作,例如单击超链接或按钮时,就会产生一个单击事件,click事件出发标记中的onclick事件处理。浏览器在程序运行的大部分时间都等待交互事件的发生,并在事件发生发生时自动调用事件处理函数完成事件处理过程。

事件不仅可以在用户交互过程中产生,而且浏览器自己的一些动作也可以产生事件,例如,当载入一个页面时就会发生load事件,卸载一个页面时就会发生unload事件。归纳起来,必须使用的事件有以下三大类:

(1)引起页面之间跳转的事件,主要是超链接事件。

(2)事件浏览器自己引起的事件。

(3)事件在表单内部同界面对象的交互。

<!DOCTYPE html><html><head><title>JavaScript事件驱动</title><script language=”javascript”><!–function countTotal(){var elements=document.getElementsByTagName(“input”);window.alert(“input类型节点总数是:” elements.length);}function anchorElement(){var element = document.getElementById(“submit”);window.alert(“按钮的value是:” element.value);}–></script></head><body><table width=”364″ border=”1″ cellpadding=”0″ cellspacing=”0″><form action=”” name=”form1″ method=”post”><tr><td width=”20%”>&nbsp;用户名</td><td width=”80%”>&nbsp;<input type=”text” nanme=”input1″ value=””></td></tr><tr><td>&nbsp;密码</td><td>&nbsp;<input type=”password” name=”password1″ value=””></td></tr><tr><td>&nbsp;</td><td><input type=”submit” name=”Submit” value=”提交”></td></tr></form></table><a href=”javascript:void(0);” onclick=”countTotal();”>统计input子字节总数</a><a href=”javascript:void(0);” onclick=”anchorElement();”>获取提交按钮内容</a></body></html>

在上面HTML代码中,创建了两个超链接,并给这两个超链接添加了单击事件,即onclick事件,当单击超链接时会触发countTotal 和 anchorElement()函数。在JavaScript代码中,创建了countTotal 和 anchorElement()函数。countTotal函数中使用”document. getElEmentsByTagName(”input“);“语句获取节点名称为input的所有元素,并将它储存到一个数组中,然后将这个数组长度输出;在anchor Element()函数中,使用”document.getElementById(“submit”)”获取按钮节点对象,并将此对象的值输出。

在浏览器中效果如图所示,可以看到当页面显示的时候,当单击【统计input子节点总数】和【获取提交按钮内容】超链接,会分别显示input的子节点数和提交按钮的value内容。从执行结果来看,当单击超链接时,会触发事件处理程序,即调用JavaScript函数。JavaScript函数执行时,会根据相应程序代码完成相关操作。

END

发表评论

登录后才能评论