`
mywebcode
  • 浏览: 988145 次
文章分类
社区版块
存档分类
最新评论

JavaScript DOM的本质及操作方法

 
阅读更多

虽然现在一些JavaScript框架,诸如jQuery、Prototype和MooTools能提高我们的前端开发效率,而且很好的解决了浏览器兼容性问题,但我们仍要打好javascript技术基础。文章将介绍JavaScript和文档对象模型(DOM)的本质。

JavsScript是可以在各种不同环境下使用的动态的、松散类型(loosely typed)、基于原型的编程语言。除了作为流行的Web客户端程序语言,它还可以使用于IDE插件、PDF文件或给予其它平台甚至更为抽象的概念。

JavaScript 是由来自Netscape得Brendan Eich创造的基于ECMAScript标准(ECMA-262)的语言。他最初被命名为LiveScript,但后来被改为JavaScript,这也是很多人会把它跟java混淆的原因之一。以下是它的一些特性的详细说明:

◆动态程序语言在运行时执行;他们并没有编译。正因为此,有时JavaScript被认为是一种脚本语言,而不是一个真正的编程语言(显然是一种误解)。

◆松散类型语言不要求强类型系统,如果你使用C或Java编程(与JavaScript不同)声明变量时你就明白必须声明类似’int’(整型)。JavaScript的不同之处在于你用不着指定它的类型。

◆在JavaScript中我们使用原型来实现类似继承的效果,JavaScript不支持类。

◆JavaScript也是函数式语言,它处理函数为优先对象。它是基于lambda下的理念。

理解以上概念对于学习JavaScript这门技术关系并不是很大。只是让大家对JavaScript有个初步正确的的认识,并了解JavaScript与其它编程语言的本质区别。

文档对象模型

文档对象模型(Document Object Model),通常简称为DOM,是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档。

下面是关于DOM的一些重要的知识:

◆Window对象作为全局对象,你仅需尝试使用”window”来访问它。Window对象下包含了你的所有要执行的JavaScript代码。就像所有对象都包含属性和方法。

◆属性是存储于对象下的变量。所有在网页中创建的变量都会成为window对象的属性。

◆方法是存储在对象下的函数。在所有函数存储在window对象下时,你可以使用’methods’引用它们。

◆DOM相对于Web文档结构创建层次结构,层次有节点组成。DOM节点有很多不同的类型,其中最重要的要数’Element’、’Text’和’Document’了。

◆‘Element’节点表示在页面中的元素,所以如果在页面中你有一个段落元素(‘<p>’),那么你可以通过DOM的节点来访问它。

◆‘Text’节点表示在页面中的所有文本(在元素中),所以如果在页面的段落中有一些文本内容,那么你可以通过DOM的节点来访问它。

◆‘Document’节点表示整个文档。(它是DOM树的根节点)

◆另请注意,元素属性是DOM节点本身。

◆不同的布局引擎对于DOM标准的执行是有一定的差别的。例如,使用Gecko布局引擎的FireFox浏览器可以很好的执行(但也并不是完完全全按照W3C规范那样),但使用Trident引擎的IE因它的很多Bug和不完全执行DOM标准而为众人所知。这便是前端开发领域的一大痛苦之处。

网页中的JavaScriptScript元素

当你想在网站上使用JavaScript的时候,需要让它们包含在script元素中:

  1. 		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"lang="en">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
  5. <title>JavaScript!</title>
  6. </head>
  7. <body>
  8. <scripttype="text/javascript">
  9. //<![CDATA[
  10. //]]>
  11. </script>
  12. </body>
  13. </html>

正如你所见在文档下面有script元素。其实type属性严格来讲应设置为”application/javascript”,但它不出所料的在IE浏览器下无法正常工作,所以我们使用”text/javascript”或不用type属性,如果你在意代码W3C规范验证的话建议你使用前者(“text/javascript”)。

你还会注意到在script元素中我们还有一对被注释掉的代码行,它们告诉支持XHTML的浏览器script元素中的内容是字符数据而不应被解释为XHTML标记。如果你计划在JavaScript代码中使用’<’或’>’字符的话那它就是相当必要的。当然,如果你是用普通HTML代码的话,那你完全可以无视它。

defer属性

我们script元素中的JavaScript代码会在页面读过程中执行,唯一的例外就是当script元素有defer属性的时候。默认情况下,当浏览器遇到script元素时,它会停下来并运行代码,然后再继续进行文档解析。defer属性告诉浏览器代码包含非变更文档代码而且可以稍后执行。它的唯一问题就是只在IE下可用,所以我们还是要尽量不要使用它了,了解就行。

链接外部脚本

如果你想连接一个外部脚本文件,那么你只需为你的script元素添加一个有文件地址的src属性。把脚本文件独立分离出来进行调用的确相对于内联脚本来说是个好办法,它意味着浏览器可以缓存该文件,而且你都不用担心那些CDATA之类的废话。

  1. 		<scripttype="text/javascript"src="my-script.js"></script>

JavaScript要点

在我们继续讲DOM之前有必要学习一下JavaScript基础要点,如果有些东西你理解起来有些困难,别担心,你早晚会搞定它的。在JavaScript种不同类型的值,它们是数值、字符串、布尔值、对象、Undefined 和 Null。单行注释使用两个斜杠(//),这行内的所有内容都将被作为注释内容理解。多行注释使用’/*’ 和 ‘*/’完成注释段落。

数值

在JavaScript中所有数值都被描绘成浮点值,当定义数值变量时记得不要用引号。

  1. 		//注:要一直使用'var'来声明变量: 
  2. varleftSide=100;
  3. vartopSide=50;
  4. varareaOfRectangle=leftSide*topSide;//=5000

字符串

你定义的字符串都是有字面上来看,JavaScript不会对它进行处理。一个字符串可由一连串的Unicode字符组成,并由一对双引号或单引号包围。

  1. 		varfirstPart='Hello'; 
  2. varsecondPart='World!';
  3. varallOfIt=firstPart+''+secondPart;//HelloWorld!
  4. //+号进行字符串连接处理
  5. //(它还可用于数学上的加法运算)

布尔值

布尔类型在你进行条件判断的时候很有用,以了解是否符合指定的标准。布尔有两个可能的值:true和false。任何使用逻辑算法的比较结果都将是布尔值。

  1. 		5===(3+2);//=true 
  2. //你可以给变量声明布尔值:
  3. varveryTired=true;
  4. //你可以像这样测试:
  5. if(veryTired){
  6. //你的代码
  7. }

上面看到的’===’是比较运算符,我们将在后面讨论。

函数

函数是一个专门的对象。

  1. 		//使用函数操作创建一个新函数: 
  2. functionmyFunctionName(arg1,arg2){
  3. //这里是函数的代码
  4. }
  5. //如果你省略掉函数名,那么你创建的是"匿名函数":
  6. function(arg1,arg2){
  7. //这里是函数的代码
  8. }
  9. //执行函数仅需对他进行引用并使用圆括号(附带参数):
  10. myFunctionName();//无参数
  11. myFunctionName('foo','bar');//带参数
  12. //你也可以在不声明变量的情况下执行函数
  13. (function(){
  14. //这就是所谓的自调用匿名函数
  15. })();

数组

数组也是一个专门的对象,它可以包含任意数量的数据。要访问数组中的数据你就必须使用数字,用以引用其在数组中的”索引”。

  1. 		//两种声名数组的不同方式, 
  2. //字面:
  3. varfruit=['apple','lemon','banana'];
  4. //使用数组构造器:
  5. varfruit=newArray('apple','lemon','banana');
  6. fruit[0];//访问数组中的第一个数据项(apple)
  7. fruit[1];//访问数组中的第二个数据项(lemon)
  8. fruit[2];//访问数组中的第三个数据项(banana)

对象

对象是命名的的值的集合(键-值对),它和数组很相似,唯一的不同之处在于你可以为每个数据值指定名字。

  1. 		//两种声明对象的不同方式, 
  2. //字面(大括号):
  3. varprofile={
  4. name:'Li',
  5. age:23,
  6. job:'WebDeveloper'
  7. };
  8. //适用对象构造器:
  9. varprofile=newObject();
  10. profile.name='Li';
  11. profile.age=23;
  12. profile.job='WebDeveloper';

if/else语句

if/else语句是JavaScript中最常见的结构,它看上去就像下面这样:

  1. 		varlegalDrinkingAge=21; 
  2. varyourAge=23;
  3. if(yourAge>=legalDrinkingAge)
分享到:
评论

相关推荐

    JavaScript-DOM.rar_javascript

    JavaScript DOM的本质及操作方法

    客户端统一验证JavaScript函数库及示例源码

    使用ChkInputs.js,会将光标定位到验证不通过的控件上,若控件上有文本同时将其文本选中高亮度显示,不会刷新页面,只有当所有验证通过时才会将结果提交到后台处理,可以使用鼠标或纯键盘及相结合的方式来操作。...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    javascript字符串操作以及跑马灯实例 javascript数组和字典以及for循环 javascript条件语句 javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 ...

    doc格式 ext EXT 中文手册

    大多数的 JavaScript 操作都需要先获取页面上的某个元素(reference),好让你来做些实质性的事情。 传统的 JavaScript 方法,是通过 ID 获取 Dom 节点的: var myDiv = document.getElementById('myDiv');

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery学习提纲

    JQuery本质上仍然是对DOM和样式进行操作,因此基本内容还是围绕特定“事件”触发某些动作(方法),从而对某些”DOM元素“的属性或”样式“进行修改。因此JQuery的学习就是围绕以下内容进行学习: 如何获取要操作的...

    html-parse-stringify:将格式正确HTML(意味着所有标签均已关闭)解析为AST并返回。 Swift地

    这是一种实验性的轻量级... React.js实质上是该方法的先驱。 使用React,您可以随时渲染为“虚拟DOM”,然后虚拟DOM可以与真实DOM(或最后一个虚拟DOM)进行对比,然后将该差异转换为使真实DOM匹配所需的任何转换您尽

    TemplateView:模板设计者的Backbone.js视图

    就像React如何与虚拟dom一起使用以允许此操作一样,TemplateView与一起完成DOM。 用法 观看次数 TemplateView要求视图和模板之间具有配对性,其中每个视图必须与唯一的模板相关联。 每个扩展的View可以作为...

    ASP.NET4高级程序设计(第4版) 3/3

    13.4 数据库操作 452 13.4.1 插入 452 13.4.2 更新 454 13.4.3 删除 454 13.4.4 管理并发 455 13.4.5 处理并发冲突 455 13.5 EntityDataSource控件 459 13.5.1 显示数据 459 13.5.2 获取关联数据 ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    13.4 数据库操作 13.4.1 插入 13.4.2 更新 13.4.3 删除 13.4.4 管理并发 13.4.5 处理并发冲突 13.5 EntityDataSource控件 13.5.1 显示数据 13.5.2 获取关联数据 13.5.3 编辑数据 13.5.4 验证 ...

Global site tag (gtag.js) - Google Analytics