JavaScript加强复习大纲02Word格式文档下载.docx

JavaScript加强复习大纲02Word格式文档下载.docx

《JavaScript加强复习大纲02Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JavaScript加强复习大纲02Word格式文档下载.docx（21页珍藏版）》请在冰豆网上搜索。

console.debug（document.anchors）;

//获取页面中所有的锚点（A没有href,只有name属性）

标签.<

aname=”content”>

。

console.debug（document.forms）;

//获取页面中所有form标签

console.debug（document.images）;

//获取页面中所有images标签

补充：

可以通过当前时间作为id保证id唯一

newDiv.id=newDate（）.getTime（）;

//限制上传文件个数

if（files.length>

=5）{

alert（"

最近只能上传5个文件。

）;

return;

}

关于form：

/**

*document.forms[index/formName]

document.表单名字

*/

console.debug（document.forms[0]）;

console.debug（document.forms.form1）;

console.debug（document.form1.action）;

//推荐使用

打开、关闭窗口

open（）

打开一个新窗口

close（）

关闭窗口

index.html

html>

<

functiontestOpen（）{

window.open（“win.html”）;

//通过程序代码打开一个窗口

/script>

/head>

--javascript:

调用我们自己编写的函数-->

ahref=”javascript:

testOpen（）;

”>

打开一个窗口<

---浏览器兼容问题，window.close（）只能关闭那些通过程序打开的窗口-->

window.close（）”>

关闭当前窗口<

/body>

/html>

win.html

document对象

document描述整个html文档的结构，可以通过该对象获取文档中的元素，对获取的元素进行操作。

document对象中常用的属性和方法

title

显示页面的标题

body

获取body元素节点

bgColor

显示页面的背景色

write（）

在页面中输出内容

writeln（）

在页面中输出文本，并自动换行

更多的属性和方法可以参考，DHTML文档

属性演示：

console.debug（document.title）//获取当前文档的标题

console.debug（document.body）//获取当前文档body标签对象

document.bgColor=’red’;

//修改当前页面的背景色

方法演示：

document.write（“<

h1>

你好<

/h1>

”）;

运行结果

--相当于我们在页面写上了下面这段代码-->

document.write错误用法

<

functiontestWrite（）{

//运行代码结果，页面只剩下”你好”，因为html流已经被关闭，再次进行写，会把以前的内容覆盖掉。

document.wrtie（“<

document.close（）;

//关闭写操作

testWrite（）”>

输出hello<

JavaScript函数定义方式

正常方式

functionprint（msg）{

document.write（msg）;

}

函数直接量定义函数

///函数不取名字，而是把函数的引用赋给myfn变量。

调用函数直接myfn（）

varmyfn=function（）{

alert（“你好”）;

构造函数方法newFunction（）;

//构造函数方式定义javascript函数注意Function中的F大写

varadd=newFunction（'

a'

'

b'

returna+b;

'

上面的代码相当于：

varadd=function（a,b）{

returna+b;

*/

//调用上面定义的add函数

varsum=add（3,4）;

alert（sum）;

注:

接受任意多个字符串参数，最后一个参数是函数体。

如果只传一个字符串，则其就是函数体。

HTMLDOM

DOM：

DOM是DocumentObjectModel文档对象模型的缩写。

根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

DOM是针对xml（html）的基于树的API。

DOM基于树节点（node）的层次。

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。

DOM的结构应用于HTML中

整个html为document对象，html标签为文档的根节点，html下面有两个子节点，<

和<

标签，<

标签中有一个<

title>

子节点，<

标签中有”HTMLDOM”文本节点。

整个结构和刚才的家谱是一摸一样的。

节点及其类型

DOM中一种提供12种节点类型，常用的节点类型:

★★★★★★★★★★★★★★★★★★★★★★

*由结构图中我们可以看到，整个文档就是一个文档节点。

*而每一个HTML标签都是一个元素节点。

*标签的属性是属性节点。

*标签中的文字则是文本节点。

*一切都是节点……

★★★★★★★★★★★★★★★★★★★★★★

查找元素节点

document对象为我们提供了3种查找节点的方式，我们可以根据需要使用不同的方式。

1、getElementById（elementId）:

寻找一个有着给定id属性值的元素，返回值是一个有着给定id属性值的元素节点。

如果不存在这样的元素，它返回null.

如果页面中有两个元素节点的id一样，返回第一个，尽量避免页面中两个元素节点id一样，id本来就是标识一个对象唯一的属性。

inputtype="

text"

name="

userName"

id="

value=”传智播客”/>

br/>

//获取Id属性值为userName的元素节点对象

varuserName=document.getElementById（“userName”）;

//console.debug（userName）;

//通过元素节点对象获取相关属性

console.debug（userName.value）;

//传智播客

2、getElementsByName（elementName）:

寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。

这个集合的length属性等于当前文档里有着给定name属性的所有元素的总个数。

divid="

divHobbys"

打篮球:

inputname="

hobbys"

type="

checkbox"

value="

打篮球"

/>

上网:

上网"

/div>

//获取name属性值为hobbys的元素节点对象，返回一个集合，当成数组来使用。

varhobbys=document.getElementsByName（"

console.debug（"

getElementsByName"

hobbys,”length=”,hobbys.length）;

for（vari=0;

i<

hobbys.length;

i++）{

//获取每一个input元素对象

varhobby=hobbys[i];

//获取input的元素对象的值

console.debug（hobby.value）;

3、getElementsByTagName（tagName）：

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。

这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。

该方法不必非得用在整个文档上。

它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

打篮球:

上网:

//获取页面中所有的input标签元素，返回一个集合，当成数组使用。

varinputs=document.getElementsByTagName（"

input"

console.debug（"

document.getElementsByTagName"

inputs）;

//返回页面中所有的input

//获取某个特定元素中的所有子节点

vardivHobbys=document.getElementById（"

varinputs=divHobbys.getElementsByTagName（"

element.getElementsByTagName"

//返回<

下面的input标签

Node节点属性及方法

属性/方法

类型/返回类型

描述

nodeName

String

节点的名字；

根据节点的类型而定义

nodeValue

节点的值；

nodeType

Number

节点的类型常量值之一

常用的有三种：

Node.ELEMENT_NODE---1--元素节点

Node.ATTRIBUTE_NODE---2--属性节点

Node.TEXT_NODE---3--文本节点

ownerDocument

Document

指向这个节点所属的文档

parentNode

Node

获取节点的父节点

firstChild

指向在childNodes列表中的第一个节点

lastChild

指向在childNodes列表中的最后一个节点

childNodes

NodeList

（类似于数组）

所有子节点的列表

previousSibling

指向前一个兄弟节点；

如果这个节点就是第一个兄弟节点，那么该值为null

nextSibling

指向后一个兄弟节点；

如果这个节点就是最后一个兄弟节点，那么该值为null

hasChildNodes（）

Boolean

childNodes包含一个或多个节点时，返回真

attributes

Object/Map

包含了代表一个元素的特性的Attr对象；

仅用于Element节点

appendChild（Node）

（当前节点）添加一个子节点，到最后

removeChild（Node）

（父节点）删除一个子节点

replaceChild（newNode,oldNode）

将childNodes中的oldnode替换成newnode

insertBefore

（newnode,refnode）

在childNodes中的（指定节点）refnode之前插入newnode。

如果想在指定节点后边插入某一个节点，可以通过在指定节点的下一个节点的前面插入。

即可以利用

insertBefore（newnode,refnode.nextSibling）

parentNode、firstChild以及lastChild

lable>

成都<

/label>

divid=”divMsg”>

明天休息<

label>

传智<

vardivMsg=document.getElementById（“divMsg”）;

console.debug（divMsg.parentNode）;

//获取div的父节点为body

console.debug（divMsg.firstChild）;

//获取div的第一个子节点”明天休息”文本节点

console.debug（divMsg.lastChild）;

//获取div的最后一个子节点”明天休息”文本节点

childNodes、hasChildNodes（）

ulid=”ul”>

li>

张三<

/li>

李四<

/ul>

varul=document.getElementById（“ul”）;

console.debug（ul.hasChildNodes（））;

//判断ul下面是否存在子节点。

varchildNodes=ul.childNodes;

//获取ul下面的所有子节点，注意包含文本节点（黄色部分）

console.debug（childNodes.length）;

//长度为5

for（vari=0;

i<

childNodes.length;

i++）{

console.debug（childNodes[i]）;

//每一个都是一个Node对象。

节点都拥有包含着关于节点某些信息的属性。

这些属性是：

∙nodeName（节点名称）

∙nodeValue（节点值）

∙nodeType（节点类型）

nodeName

●元素节点的nodeName是标签名称

●属性节点的nodeName是属性名称

●文本节点的nodeName永远是#text

●文档节点的nodeName永远是#document

●对于文本节点，nodeValue属性包含文本。

●对于属性节点，nodeValue属性包含属性值。

●nodeValue属性对于文档节点和元素节点是不可用的。

●对于元素节点，nodeType为1元素节点。

●对于属性节点，nodeType为2属性节点。

●对于文本节点，nodeType为3文本节点。

divid=”mydiv”>

文本节点<

//元素节点对象

varmydiv=document.getElementById（"

mydiv"

//节点是元素节点，nodeName返回这个元素的名称

//节点是元素节点，nodeType返回1

//节点是元素节点，nodeValue返回null

元素节点nodeName="

mydiv.nodeName,"

nodeType="

mydiv.nodeType,"

nodeValue="

mydiv.nodeValue）;

//属性节点对象

varattrNode=mydiv.getAttributeNode（"

id"

//节点是属性节点，nodeName返回这个属性的名称

//节点是属性节点，nodeType返回2

//节点是属性节点，nodeValue返回这个属性的值

属性节点nodeName="

attrNode.nodeName,"

attrNode.nodeType,"

attrNode.nodeValue）;

//文本节点对象

vartextNode=mydiv.lastChild;

//节点是文本节点，nodeName返回是#text

//节点是文本节点，nodeType返回3

//节点是文本节点，nodeValue返回文本值

文本节点nodeName="

textNode.nodeName,"

textNode.nodeType,"

textNode.nodeValue）;

元素节点属性操作

属性操作包含新增，修改，删除，查找。

getAttribute（name）

根据属性名，获取属性的值

getAttributeNode（name）

根据属性名，获取属性节点对象objectAttr12个节点类型中的一个

setAttribute（name,value）

添加一个新的属性值或改变它的现有属性的值

removeAttribute（name）

根据属性名，删除该属性节点

divid=”mydiv”name=”haha”>

varmyDiv=document.getElementById（“mydiv”）;

console.debug（myDiv.getAttribute（“name”））;

//哈哈

myDiv.setAttribute（“name”,”heihei”）;

//设置属性，本身已经存在该属性，进行修改操作

myDiv.setAttribute（“itcast”,”cd”）;

//添加属性，本身没有该属性，进行添加操作

myDiv.removeAttribute（“name”）;

//删除name属性，删除后通过getAttribute（“name”）将无法获取值。

创建/添加节点

1、document.createElement（tagName）,按照给定的标签名创建一个新的元素节点。

方法只有一个参数：

将被创建的元素的名字（如：

div,a,form,b,span,label...）。

varreference=document.createElement（element）;

方法的返回值：

是一个指向新建节点的引用指针。

返回值是一个元素节点，所以它的nodeType属性值等于1。

元素类型

新元素节点不会自动添加到文档里，新节点没有parentNode属性，它只是一个存在于JavaScript上下文的对象.

示例：

varpElement=document.createElement（"

p"

2、document.createTextNode（text）,创建一个包含着给定文本的新文本节点。

这个方法的返回值是一个指向新建文本节点引用指针。

vartextNode=document.createTextNode（text）;

新建文本节点所包含的文本字符串

它是一个文本节点，所以它的nodeType属性等于3.

新元素节点不会自动添加到文档里，新节点没有parentNode属性

vartextNode=document.createTextNode（“高高兴兴学JavaScript”）;

3、element.appendChild（node）,为给定元素增加一个子节点。

varnewreference=element.appendChild（node）.

给定子节点newChild将成为给定元素节点element的最后一个子节点。

方法的返回值是一个指向新增子节点的引用指针。

该方法通常与cr