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

JS入门笔记

2015-12-21 21:50 141 查看


1,转义字符 \b 退格字符   \f 换页符   \n 换行字符  \r 回车字符  \t 制表符  \'单引号 \"双引号 \\ 反斜线 \xNN 其中NN是一个十六进制数,表示Latin-1字符集中的编号来表示一个字

2.parseInt()函数与parseFloat()函数把字符串转换为整数和浮点数   这两个函数逐字解析,如果解析到的字符不是有效数字,解析将停止,并把解析到之前的字符串转换为对应的数值。如parseInt("123abc")将返回数值123,当javascript解析到a字符a时,将认为字符串的数字部分已经结束。parseFloat()与parseInt()的工作方式一样,只是它把小数点也当作数字的一部分。如果没有数字将返回NaN

3.创建数组 var myArray = new Array();(区分大小写)。   限定长度 var myArray = new Array(6);也可以 var myArray = new Array('Paul',33,"john",112); 在javascript中数组长度是可以修改的,如我们定义了一个长度为3的数组 var myArray = new Array(3); 然后,为索引130的元素定义一个值 myArray[130]="Paul";那么JavaScript将认为我们修改了myArray数组的长度,并把myArray数组定义为长度131,即至少可以包含131个元素的数组。

javascript模拟多维数组,并不存在,但可以模拟出来    var personnel = new Array();       personnel[0] = new Array();    personnel[0][0] = "name0";    personnel[0][1] = "age0";

4.字符串之间也可以进行比较,所有应用于数值的比较也可以应用于字符串,唯一不同的是字符串的比较是按字母顺序时行比较。toUpperCase()将字符串转换为大写形式。toLowerCase()将字符串转换为小写形式。

5.for...in语句可以遍历一个数组中的元素,而无须知道数组中元素的个数。它的含义是:对于数组中所包含的每一个元素,执行一次循环体中的代码。   for(index in arrayName)  { }其中,index是一个循环语句之前声明过的变量,它将自动被赋予索引所指的数组元素。arrayNamep它是一个变量,它包含我们要遍历的数组

6.对于某个页面来说,任何在函数之外声明的变量,其作用域是该页面上的所有脚本代码。在函数中声明的变量是局部变量。javascript将时常执行垃圾回收

7.JavaScript的内建对象,常见的有String对象,Math对象,Array对象和Date对象

String对象

当把一个字符串对象与一个基本数据类型的字符串比较时,将会比较实际的字符串值是否相等,但比较两个String对象时,比较的是两个对象的引入是否相等。对于String对象的在部分方法来说,我们都可以将字符串视为一个由单个字符所组成的系列。每个字符具有一个索引,表示该字符在字符串中位置。

1》length属性

2》charAt()方法获取参数位置的字符    charCodeAt()方法获取参数位置字符的Unicode编码    fromCharCode()方法将字符编码转换为字符串,它与上面的方法相反,它是String的一个静态方法,我们可以直接调用String.fromCharCode(65,66);    indexOf()和lastIndexOf()查找子串在字符串中的位置,它们具有两个参数,需要查找的子串,从哪个位置开始查找子串(可选)找到返回位置,找不到返回-1   substr()方法和substring()方法复制字符串的一个字串,两个方法的不同之处在于参数,第一个参数都表示起始位置,第二个参数可选,如果没有表示到字串的结束。substr()方法的第二个参数表示获得子串的长度。substring()方法的第二个参数表示到达的位置,即两个位置之前的子串,包头不包尾。

Math对象  

javascript中的math对象的与众不同之处在于,它是一个全局对象,在使用math对象之前,不需要声明也不需要定义一个新的,javascript将自动创建好Math对象,我们直接使用它即可。   Math对象包含一些经常使用的数学常量,如PI属性 常见的数学方法有:

1.abs()方法返回传入参数的绝对值

2.ceil()方法向上取整

3.floor()方法向下取整

4.round()方法用于对一个整数进行四舍五入

5.random()方法返回一个0到1之间的随机数,包含0但不包含1

6.pow()方法用于计算一个数的指定幂pow(n,m)n为底数,m为幂

Number对象

与String对象类似,我们需要先创建一个Number对象,然后才能使用Number对象的各种方法和属性。   toFixed()方法用于截取指定小数点位数的数字,参数为截取的小数的位数,此方法在截取位数的同时会四舍五入。

3ff7 Array对象

concat()方法 连接两个数组,可以把两个单独的数组连接在一起,形成一个新的数组,第一个数组调用此方法,将第二个数组对象传进去

slice()方法,获取数组的部分元素,返回值也是一个数组对象,两个参数欲复制数组元素的起始索引,表示所复制数组元素的结束位置边界的数组元素的索引(可选参数)

join()方法,将数组转换为字符串,并将这些字符串连接成一个完整的字符串,仅有一个参数就是连接数组元素的分隔符。

sort()方法 对数组进行排序,升序

reverse()方法 反转数组中元素的顺序,与sort()方法联合使用可以达到降序效果

Date对象

getDate()返回一个整数,表示当前日期是月份中的第几天 getDay()方法,返回一个整数,表示当前日期是星期几,0表示星期日依此类推 getMonth()返回一个表示当前月份的整数,0表示1月 getFullYear()返回一个以4位数表示的年份 getDateStrig()基于当前时区,返回一个人们可以理解的日期字符串

setDate(),setMonth(),setFullYear();没有setDay()因为当年月日确定后,星期几就确定了 设置的值如果超出了以上三个函数的范围,则他们会从第一天或月或年算起加上设置的值(可以是负值)进行计算得到新日期。所以计算某一年之后的28天就可以用如下代码  var nowDate = new Date();  var currentDay = newDate.getDate();  nowDate.setDate(currentDay + 28);

获取时间的值 getHours(),getMinutes(),getSeconds(),getMilliseconds(),toTimeString() getMilliseconds()

8.javascript中的类

   构造函数的名称与类名完全相同,在javascript中无需定义好类属性,只需要为属性附值,javascript将自动创建这些属性,对象同样如此   javascript中的大部分对象都具有prototype属性,通过prototype属性可以创建新的属性和方法

9.浏览器编程   浏览器本身也是由很多对象组成的。如window对象它表示浏览器的窗体,我们已经使用了window对象的两个方法alert()和prompt()方法,还有document对象,用于加载浏览器中的页面本身。通常把浏览器为javascript所提供的对象的集合称为浏览器对象模型(Brow Ob Model,DOM).浏览器对象模型是一个具有层次的对象结构,在层级的顶端是windwo对象。window对象代表了浏览器的框架以及浏览器相关的所有一切。如滚动条,导航按键等都包含在window对象中。

window对象   它代表浏览器的框架或者浏览器的窗体,在某种程序上它也代表了浏览器本身。它包含了大量关于浏览器的属性。window对象是一个全局对象,实际上全局函数与全局变量都是该全局对象的属性,当声明一个全局函数或全局变量时,实际上是创建了该全局变量的一个属性。alert()实际上是window对象的一个方法,由于window对象是一个全局对象,因此使用alert()而不是window.alert()也是正确 的。   window对象的某些属性本身也是一个对象,如document对象,navigator对象,histroy对象,screen和location对象。其中,document代表浏览器的页面。histroy包含用户所访问过的页面的历史记录,navigator包含了浏览器自身的相关信息,screen包含了客户端计算机显示器显示能力的信息。location包含了浏览器所加载的当前页面的URL的详细信息。   修改浏览器状态栏信息用defaultStatus属性,window.defaultStatus = "Hello "

history对象   history对象具有一个length属性,使用length属性,就能获得浏览器历史栈中页面的个数。history对象具有back()方法和forward()方法,histroy对象还具有go()方法,该方法接受一个参数,该参数指出以当前页面为基准,在历史栈中前进或后退几个页面。

location对象   location对象包含了大量有关于当前页面位置的有用信息,它不仅包含了当前页面的统一资源定位器(URL)信息,还包含了提供web服务的服务器信息,连接到服务器的端口号及所用协议信息。通过location对象的href属性,hostname属性,port属性,protocol属性,就可以获得这些信息。   如果我们要导航到另一个页面,可用两种方法location.href(),location.replace()不同之处在于一个是加到历史栈的顶部一个是替换,替换的通过历史页面将返回不到当前页面。

navigator对象   它包含了运行当前脚本的浏览器和操作系统的大量相关信息。它最常见的用途就是用于区分不同的浏览器

screen对象   它包含了大量有关于客户端计算机显示能力的信息。具有height属性和width属性,这两个属性以像素为单位。还有colorDepth属性,表示显示屏颜色的色彩位数

document对象    它具有很多与HTML文档相关联的属性,这些属性都是数组类型。其中几个重要的属性是forms数组,images数组和links数组。   对于每一个具有href属性的超链接标记<a>,浏览器将创建一个对应的A对象,link[]数组用于表示页面上所有A对象的集合,就像前面看到的images[]数组包含img对象一样

事件处理   事件处理器由关键字on加上要处理的事件名组成。如click事件,onclick

10.表单   我们可以直接通过表单名称访问表单对象,如document.myFrom来访问这个表单对象,myFrom为表单名,另外也可通过document对象的forms[]数组属性来访问这个表单对象 <form>标记的大部分属性都可以作为Form对象的属性进行访问,特别是,Form对象的name属性映射到<form>标记的name属性。  所有的表单元素都有focus()与blur()方法,获得焦点与失去焦点,都有onfocus()与onblur()事件   button支持onmousedown事件和onmouseup事件

文本框还具有两个属性,size属性和maxlength属性。size属性决定文本框具有多少个字符的宽度,maxlength属性用于决定用户可以在文本框中输入多少个字符。它还具有select()方法用于选择或加亮文本框中的文本。除了常见的onfocus和onblur事件外,text对象还有onchange,onselect,onkeydown,onkeypress和onkeyup事件处理器,当用户选择文本框的值时会触发onselect事件,当且仅当文本框失去焦点时的值与获得焦点时的值不同时,才会触发文本框的onchange事件。

 textarea 这还具有cols宽度属性与rows高度属性,还有一个wrap属性,用以决定当用户在文本区域中输入到一行的结束时如何处理。wrap默认值是soft,它表示用户在一行的结尾处无须输入Enter键,当输入内容超过文本域的右边界时会自动转到下一行。为了打开文本区域的自动换行功能,可以将wrap属性的值设置为soft或hard其中之一。如果要关闭回车换行把wrap设置为off即可

 checkbox复选框,radio单选按钮,具有相同名字的单选按钮将组成一个单选按钮组

 select标记将创建一个select对象,如果我们想将列表框定义为一个下拉列表框,只需将select标记的size设置为1.如果允许用户从列表框或下拉列表框中一次选择多个选项,只需在<select>标记的定义中添加一个multiple属性即可。

11.框架frame   很多web应用程序利用框架(frame)来分隔浏览器窗口。   对于一个不包含框架的页面来说,仅存在一个window对象,但对于一个包含框架集的页面来说,页面中的每一个框架都具有一个相应的window对象   如果一个框架中包含了子框架,则这些子框架所对应的window对象都是该框架的window对象的子对象   每一个框架都具有一个单独的窗口,并具有一个自己的window对象。另外,使用window对象的parent属性,就可以从框架集中所包含的任何框架集页面的window对象。通过引用window对象的parent属性,就可以访问父window对象的各种属性和方法,就像访问当前页面的window对象的各种属性和方法一样。此外,还可以访问在框架集页面中定义的各种JavaScript变量和函数。     有这样一种关系Top Window(fraMenu,fraMain(fraTop,fraBottom))包含关系。那么,如果在fraBottom框架页中,我们要能过代码访问fraMenu框架页的window对象,该怎么办?实际上,我们通过window.parent.parent就可以引用顶层窗口的window对象,而fraMenu框架页又是顶层窗口的一个子对象。要访问这个子对象,可以采用3种方法,这3种方法有相同的效果。1.通过顶层窗口window对象的frames[]数组属性访问,其中fraMenu框架页在frames[]数组的索引为0;window.parent.parent.frames[0]. 2.也可以把fraMenu框架页的名称作为frames[]数组的索引;window.parent.parent.frames["frameMenu"] 3.还可以直接通过fraMenu框架页的名称来引用fraMenu框架页:window.parent.parent.fraMenu   window对象的top属性将直接返回一个对框架集中最顶层框架的引用。

window对象具有open()方法,用以打开一个新的浏览器窗口。该方法可以接收3个参数。其中第3个参数是可选的。该方法将返回一个对新打开窗口的引用。第一个参数是要在新窗口中加载的页面的URL,第二个参数是为新窗口分配的名字。该名字并不是在脚本中用以引用该窗口,而是用在某些HTML标记中作为target属性的值使用,如用在超链接或表单的target属性中。如用在超链接或表单的target属性中。如装将窗口的第二个参数设置为myWindow,并在原窗口的页面上设置一个如下链接<a href="test3.html" target=myWindow>Test3.html</a> 那么单击时,test3.html页面将加载在名为myWindow的新窗口中。第三个参数为指定新窗口width属性和height属性的值  var newWindow = window.open("test2.htm","myWindow","width=250,height=250");

为新的浏览器窗口添加特性,通过第三个参数,可以控制新窗口的特性,如新窗口的大小,新窗口在屏幕中的起始益,用户是否可以改变新窗口的大小,以及新窗口是否具有工具栏等,将相应的属性设置为yes或1时,将打开该属性,将该属性设置为no或0时,将关闭该属性,要将某个浏览器窗口的属性设置为yes打开,只需在window.open()方法的第三个参数中包含这个属性的名称即可,并不需要为属性指定属性值。

前面我们介绍过window.open()方法用以打开一个新窗口,并返回一个对新窗口的引用,我们可以访问新窗口的属性和方法,并且可以访问新窗口的document对象,如果把打开的新窗口的浏览器窗口称为源窗口,那么如保在新窗口中访问源窗口呢,在新窗口中访问源窗口的window对象,关键是使用新窗口的opener属性。opener属性将返回一个对打开当前新窗口的源窗口window对象的引用。可以使用如下代码将源窗口背景色修改为红色:window.opener.document.bgColor="red";   window.opener属性的使用方法与在框架集中使用window.parent属性和window.top属性类似。

12.字符串操作

1》split()方法   此方法根据某种分割标志将一个字符串拆分为一个由子串组成的数组。拆分字符串的依据就是作为参数传入split()方法的分割标志符,分割标志符可以是一个字符,也可以是一个字符串。此方法结果返回一个数组,但最后一个元素是空字符串

2》replace方法将查找指定子串是否存在,当找到匹配的子串时,replace()方法将把匹配的子串替换为我们所设置的指定字符串。myString.replace("may","june")

3》search()方法用以在字符串中查找特定子串,如果子串被找到,则返回子串在字符串中的位置,否则返回-1.search()方法仅接收一个参数。即要在字符串中查找的子串。

4》match()方法与search()方法非常类似,不同之处在于,search()方法返回的是查找到子串的位置,而match()方法返回的是一个数组,该数组中的每一个元素包含一个查找到的匹配子串。

13.正则表达式   在javascript中,正则表达式是通过RegExp对象来使用的,RegExp对象与String.Array类似,也是JavaScript中的内建对象。要创建一个新的RegExp对象,可以采用两种方法,最简单的办法是采用正则表达式字面值,如 8000 下面代码:   var myRegExp = /\b'|'\b/;其中斜杠(/)用于表示正则表达式的开始和结束。 另一种方法是 var myRegExp = new RegExp("\\b'|'\\b");   正则表达式具有三个特性: 1.g表示全局匹配,而不是默认的匹配第一个后就不查找了 2.i表示忽略字母的大小写 3.m多行标记  

正则表达式:特殊元字符

1.文本,数字和标点符号元字符

\d 0-9的任何数字 \D 任何非数字字符 \w 任何单词字符,即A-Z,a-z,0-9之间的字符,以及下划线字符 \W 任何非单词字符 \s 任何空白字符,包含水平制表符,换行符,回车符,走纸符以及垂直制表符 \S 任何非空白字符 .  除了换行符(\n)之外的任何单个字符 [...]匹配位于方括号之内的任何一个字符 [^...]匹配除了方括号之内字符之外的任何字符

2.重复字符 表示位于重复字符之前的项或字符需要重复匹配的次数 {n} 前面的项重复n次 {n,}前面的项重复n次,或者n次以上 {n,m}前面的项至少出现n次,最多出现m次  ? 前面的项出现0次或1次  + 前面的项出现1次或多次,但至少出现1次  * 前面的项出现0次或多次

3.位置元字 符 用以设置正则表达式是匹配字符串开始位置的子串,还是匹配结束位置的子串,或者匹配模式字符的分界线位置。

^ 该元字符表示匹配字符串的开始位置,或者匹配多行字符串每一行的开始位置,对于多行字符串(即包含回车符的字符串),在定义正则表达式的时候,需要设置多行标记m如/myreg ex/m

$ 该元字符表示匹配字符串的结束位置,或者匹配多行字符串每一行的结束位置。对于多行字符串(即包含回车符的字符串),在定义正则表达式的时候,需要设置多行标记m如/myreg ex/m

\b 该元字符匹配单词的分界位置,本质上,单词的分界位置就是位于一个单词字符与一个非单词字符之间的位置

\B 该元字符匹配单词的非分界位置

4.正则表达式分组 在正则表达式中,圆括号是用以表示对模式字符串进行分组的元字符,圆括号中的表达式又称为一个子模式或子正则表达式。子模式将作为一个整体进行匹配,而不是对子模式中的一部分进行匹配。

要引用与正则表达式分组相匹配的子串,可以使用$符号,后跟分组的序号。如下所示的正则表达式:var myRegExp =/(\d)(\W)/g $1表示对第一个分组(\d)的引用,而$2表示对第二个分组(\W)的引用。另外,在这个正则表达式中,还设置了全局标志g,以保证所有与模式相匹配的子串都被替换---而不仅仅是替换第一个匹配的子串。   如想把 var myString = "1999,2000,2001";替换为“the year 1999,the year 2000,the year 2001”  var myRegExp =/(\d{4})/g; myString = myString.replace(myRegExp,"the year $1");

14.在search()方法中全局匹配标记g不起作用。    String的match()方法与search()方法类似,两个方法不同之处在于,search()方法返回的是子串被找到的位置,而match()方法则返回一个数组,该数组的每一个元素包含一个与模式字符串相匹配的子串

15.时间,日期,定时器 我们需要一种标准的时间值来表示不同地点的同一时间,这就是协调世界时(Coordinated Universal Time,UTC).它的前身是格林尼治标准时间(Greenwich Mean Time,GMT)  JavaScript中的Date对象提供了许多方法以支持UTC时间。如setUTCHours()方法

一次性计时器,只需要使用window对象的setTimeout()方法  window.setTimeout("your javascript code",milliseconds_delay)第一个参数为执行的代码,第二个参数为计时器延迟的时间,以毫秒为单位,此方法返回一个数值即计时器ID要在计时器触发前停止它,可以用window.clearTimeout()方法,该方法仅接收一个参数,即由setTimeout()方法返回的唯一的计时器ID号   间隔性计时器,可以用setInterval()方法和clearInterval()方法,与一次性计时器参数类似

16javaScript中常见的7种错误

1》变量未定义 2》大小写敏感 3》不匹配的大括号 4》连接字符串时缺少+号 5》赋值而不是相等 6》不匹配的圆括号 7》将方法误认为属性,或者属性误认为方法

17.使用cookie 使用cookie的关键在于使用document对象的cookie属性,使用cookie属性,可以在JavaScript代码中创建cookie,或者访问cookie中的数据。

cookie字符串,当创建一个cookie时,需要创建一个cookie字符串,cookie字符串包含6个需要设置的子串:name(名称),value(值),expires(过期时间),path(路径)、domain(域)、secure(安全性),其中后4个子串是可先的。在cookie值字符串中,分号不能包含在值字符串中,因为在cookie字符串中将分号作为不同部分的分隔符。cookie如果不设置过期时间,则默认浏览器关闭后失效,这也就是会话cookie

escape()函数和unescape()函数对特殊字符时行编码和解码。escape()函数可以将非字母或数字字符转换为Latin-1字符集中对应的十六进制编码,并在编码之前加上一个百分号(%)字符。

18.DHTML IE浏览器中的事件  当在IE浏览器中触发一个事件时,ie浏览器将产生一个全局对象event,该对象包含了与所触发事件相关联的数据。     event对象的type属性将返回一个包含事件名称的字符串,无论是IE浏览器还是ff浏览器都支持type属性,只是访问type属性的方法是不同的 window.event.type=""   srcElement属性是event对象所提供的另一个非常有用的属性,该属性将返回接收当前事件的HTML元素。

其它浏览器事件对象   非IE浏览器并没有跟踪当前触发事件的全局对象event,相反地,非ie浏览器需要web开发人员在代码中将事件对象(event object)作为参数,传递给事件处理器。该event参数包含了一个对当前事件对象的引用。   当某个事件被触发时,知道该事件在哪一个HTML元素上被触发是非常有用的。对于IE浏览器来说,可以通过srcElement属性来引用触发当前事件的HTML元素。但其他浏览器并不支持该属性,对于非ie浏览器,应该使用target属性,该属性于ie浏览器中的srcElement属性一样,用以引用接收当前事件的HTML元素

常用的CSS属性 color前景色 如字体颜色 background-color 背景色 background-image:url背景图片 font-family设置文本字体 font-size字体大小 font-weihgt:bold将文本以粗体显示 font-style:italic将文本以斜体显示 text-decoration:underline;为文本加下划线 visibility:hidden:隐藏元素 visible显示出来 此属性将出现空白区域 display:none 隐藏元素将从文档流中去掉 block显示出来inline按行布局模式显示

要使某个元素采用绝对定位只要将该元素的position属性设置为absolute要使某个元素采用相对定位,只需将该元素的position属性设置为relative即可,用于定位 元素的CSS关键属性是left属性和top属性

使用javascript改变style对象属性形式如下:   oHtmlElement.style.cssProperty = value; 通常情况下,某个CSS属性的名称与该属性在CSS文件中的名称是相同的如color,但是,在某些情况下,CSS属性的名称与其在CSS文件中的名称略有不同,包含一个连字符(-)的CSS属性就是一个典型例外。对于包含一个连字符(-)的CSS属性,需要去掉连字符,并把连字符之后的第一个字母改成大写形式。使用style对象来访问元素的样式属性时,只能访问到元素的内联样式属性。对于在<style/>标记中的样式属性,则不能通过style对象来访问

修改class属性   oHtmlElement.className = sNewClassName;使用它来修改元素的样式具有两个好处,第一,它减少了需要编写的javaScript代码的数量,第二,可以将元素的样式设置从JavaScript代码中抽取处理,放在独立的CSS文件中。

移动元素   与使用style对象来设置元素样式类似,使用js来移动元素,可以使用position属性来改变元素的定位方式(即相对定位或绝对定位),也可以使用left和top属性将元属设置到指定的位置。     现代浏览器中的Dom模型暴露了HTML元素的offsetTop属性和offsetLeft属性。这两个属性将返回相对于父元素的位置偏移量。offsetTop属性和offsetLeft属性的返回值都是数值类型,因此,很容易检查元素的当前位置是否位于动画的移动路线上。

19.XHTML  实际HTML与XHTML存在一些不同,但XHTML并没有在HTML中增加新的元素和属性。下面几点是XHTML与HTML的主要差别: 1.XHTML要求在页面开始的第一行必须包含一个XML声明,如<?xml version='1.0'?> 2.在页面顶部还必须提供一个DTD声明,并指出所引用的DTD标准的版本 3.在页面中必须包括一个包含当前HTML元素的XML命名空间的引用 4.由于xml是大小写敏感的,因此所有的XHTML标记都必须使用小写方式 5.在XHTML文档中,必须包含<head>和</body>标记 6.任何一个标记都必须被封闭,所有标记必须正确地嵌套。当于单个标记而言,如换行标记,必须以一个斜线表示标记的结束,如<br/> 7.属性的值必须用引号括起来   上面的这些规则确保了XHTML文档中的各种元素具有一个严格的层次结构,从而保证了文档对象模型能够正常地工作,这也是当前所使用的HTML的发展路线。

20.DOM  

基本的dom对象

1. Node 文档中的每一个节点都是一个Node对象

2. NodeList 一个包含多个Node对象的数组,通常用来表示一个元素所包含的子节点

3. NameNodeMap 此对象建立了节点名称和节点之间的一一映射关系,从而可以利用节点名称直接访问节点     高级dom对象 节点可以分为元素节点,属性节点,或纯文本节点 Document 表示文档的根节点 DocumentType xml文档的dtd或schema的对象表现形式 DocumentFragment文档碎片对象,它是一个不完整的document对象,主要用于暂时存放没有加入Dom树的文档片段 EntityReference 表示一个xml文档中的实体引用 Element表示文档中的一个元素 Attr 表示文档中元素的一个属性 ProcessingInstruction 表示一个处理指令 Comment 表示xml文档或HTML文档中的注释 Text 表示构成元素子节点的纯文本 CDATASection xml文档中CDATA节的对象表现形式 Entity 表示DTD中定义的不解析实体 Notation体表在DTD中定义的记号

Document对象方法:返回一个元素或元素的集合 1.getElementById(idname)返回一个对文档中指定id元素节点对象的引用 2.getElementsByTagName(tagname)返回一个对象数组,要引用集合中某一个特定的元素,还必须指定该元素在集合中的索引值,通过集合的item()方法,即可返回指定索引值的元素。

documentElement 返回对文档最顶层元素的引用(即根元素,如<html/>元素)

Element对象仅包含一个属性 tagName返回当前节点的标记名称

Node对象的属性:在文档树中导航 1.firstChild 返回元素子节点列表(childNodes)中的第一个节点 2.lastChild 返回元素子节点列表中的最后一个节点 3.previousSibling在同级子节点中,返回当前子节点的前一个兄弟节点 4.nextSibling 在同级子节点中,返回当前子节点的的后一个兄弟节点 5.ownerDocument返回包含当前节点的文档的根节点 6.parentNode 返回树结构中当前节点的父节点 7.nodeName 返回当前元素节点的名称 8.nodeType 返回一个数字,表示当前节点的类型 文本节点3这对区别不同浏览器中使用很有用 9.nodeValue 以纯文本形式返回的当前节点的值   值得注意的是,对于Firefox,Opera和Safari浏览器,情况有所不同,这几个浏览器把HTML标记与标记之间的空白也视为文本节点,因此对于Firefox,Opera和Safari浏览器,<body/>节点之下还包含了空白文本节点

Node对象的方法:添加和移除文档中的元素 1.appendChild(newNode)将一个新节点newNode添加到子节点列表的末尾,该方法将返回一个对新插入节点对象的引用 2. cloneNode(cloneChildren)返回当前节点的一个副本,该方法接收一个布尔值作为参数,如果该参数的值为true,则克隆当前节点及其所有的子节点,如果该参数的值为false,则仅克隆当前节点而不包含其子节点。 3.hasChildNodes()检查当前节点是否含有子节点,如果有子节点,则返回一个true值 4.insertBefore(newNode,referenceNode)在指定的referenceNode节点之前,插入一个新节点newNode,该方法将返回一个对新插入节点对象的引用 5.removeChild(childNode)从node对象的子节点列表中,删除由参数childNode指定的子节点,该方法将返回一个对所有删除节点对象的引用 6.replaceChild(newChild,oldChild) 将参数oldChild指定的子节点替换为参数newChild指定的新节点,该方法将返回一个对被替换节点对象的引用。

document对象的方法:添加和移除文档中的元素

1.createElement(elementName)根据由elementName参数指定的标记名称来创建一个新元素。该方法将返回一个对新创建元素的对象的引用 2.createTextNode(text)用参数text指定的文本来创建一个文本节点,并返回一个对新创建的文本节点的引用 。 3.createAttribute(attributeName)用参数attributeName指定的名称来创建一个属性,并返回一个对新创建属性节点对象的引用。

element对象的属性方法 1.getAttribute(attributeName)返回由参数attributeName指定的属性的值 2.setArrtibute (attributeName,value)将attributeName属性的值设置为由参数value指定的值 3.remvoeAttribute(attributeName)移除attributeName属性的值,并将其恢复为默认值

event对象的属性 1.bubbles 一个逻辑值,表示是否允许事件冒泡(即事件从一个底层元素向上传递给上一层元素) 2.cancelable 一个逻辑值,表示是否可以取消事件的默认行为 3.currentTarget 表示当前事件目前所指向的元素节点 4.eventPhase 一个表示事件流当前阶段的数字值 5.target(仅对支持Dom的浏览器) 该属性表示引发当前事件的元素对象,在Dom的事件模型中,文本节点也会触发DOM中的事件 6.timeStamp(仅对Firefox浏览器) 表示事件发生的时间 7.type 表示当前事件的名称 另外dom事件模型还引入了一个MouseEvent对象,该对象专门用以处理由鼠标操作所引发的各种事件。

MouseEvent对象的属性 1.altKey 一个逻辑值,表示当事件发生时,Alt键是否被按下 2.button 对于鼠标事件,该属性表示鼠标的哪一个按钮被按下 3.clientX 表示当事件发生时,鼠标指针在客户端区域中的横坐标 4.clientY 表示当事件发生时,鼠标指针在客户端区域中的纵坐标 5.ctrlKey 一个逻辑值 ,表示当事件发生时ctrl键是否被按下 6.metaKey 一个逻辑值,表示当事件发生时,Meta键是否被按下 7.relatedTarget(仅对支持Dom的浏览器) 在Dom事件模型中,文本节点也可触发mouseover事件,该属性表示与事件相关的元素节点,类似于IE浏览器中的event.toElement属性和event.fromElement属性 8.screenX 表示当事件发生时,鼠标指针相对于计算机屏幕区域中的横坐标 9.screenY 表示当事件发生时,鼠标指针相对于计算机屏幕区域中的纵坐标 10.shiftKey 一个逻辑值,表示当事件发生时,Shift键是否被按下

21.JavaScript与XML XSLT(Extensible Stylesheet Language Transformations,可扩展样式转换语言)将一个XML文档格式化为一个HTML文档 xslt是一种基于模板的样式转换语言,它可以将xml文档中的内容进行重新构造,并转换为我们所需要的格式。XSLT转换可以允许不同种类的应用程序交换数据。使用XSLT可以使同一份源文档生成多个不同的视图,从而使Web站点的内容可以在多种设备上显示。

XSLT的转换需要两个文档(一个是xml源文档,另一个xslt样式表),转换的结果将生成一个新的文档。通常情况下,转换的结果是一个新的xml文档或者HTML文档

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: