[转]js小结

smallpaopao

浏览: 18165 次
性别:
来自: 北京

最近访客更多访客>>

leebingcheng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

浏览器框架 IE 应用服务器 CSS

<o:p>Window对象</o:p>

表示整个浏览器窗口，不必表示其中包含的内容。还可用于移动或调整它表示的浏览器的大小。如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。

可以用window.frames[0]或window.frames[“topFrame”]引用框架，也可以用top对象代替window对象。Window对象可省略。（曾经做了个

<o:p></o:p>

页面，非得top才能定位，不解）

Window另一个实例是parent。Parent对象指的是包含上一层框架，浏览器窗口自身被看作所有顶层框架的父框架。

1 窗口操作

moveBy(dx,dy)――把浏览器窗口相对移动。

moveBy(dx,dy)――移动浏览器窗口到（x，y）处。

resizeBy(dw,dh)――相对于当前窗口，调整dw，dh个象素。

resizeTo(w,h)―――绝对调整。

IE提供了window.screenlLeft和window.screenTop对象来判断窗口的位置，用document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小，但不是标准属性。

2 导航和打开新窗口

Window.open( “url”, “新窗口名称”, “left,top,height,width, resizable, scrollable, toolbar,

Status, location”)

3 系统对话框

Alert()

confirm()返回一个boolean值

prompt(“显示给用户的文本”,默认文本) 函数值返回。

4 状态栏

Status 和 defaultStatus属性

5 时间间隔和暂停

setTimeout（“alert(‘hello world!’)”,1000）一秒之后显示一条警告

可调用clearTimeout（iTimeoutID）取消，用在鼠标停在一个按钮上，一会出现帮助信息，如果移动太快则不显示。

setInterval（）

clearInterval（）；

6 历史

Window.history.go(-1) history.back()

History.go(1) history.forward()

<o:p> </o:p>

Document对象<o:p></o:p>

这个对象的独特之处是它是既属于BOM又属于DOM。<o:p></o:p>

属性：alinkColor 激活的链接的颜色 bgColor 页面的背景颜色<o:p></o:p>

fgColor 页面的文本颜色 lastModified 最后修改页面的日期<o:p></o:p>

linkColor 连接的颜色 referrer 浏览器历史中后退一个位置的URL<o:p></o:p>

title URL vlinkColor 访问过的链接的颜色<o:p></o:p>

document对象也有许多集合, anchors, applets, embeds, forms,images, links.<o:p></o:p>

方法 write() writeln() open() close() <o:p></o:p>

<o:p> </o:p>

Location对象<o:p></o:p>

Location对象表示载入窗口的URL，此外，它还可以解析URL：该对象是window和document的属性。<o:p></o:p>

Hash－－如果URL包含＃，该方法将返回该符号之后的内容。<o:p></o:p>

Host――服务器的名字<o:p></o:p>

Hostname――通常等于host。<o:p></o:p>

Href ――完整的URL。<o:p></o:p>

Pathname――URL中主机名后的部分。<o:p></o:p>

Port――端口。<o:p></o:p>

Protocol――协议。<o:p></o:p>

Search――查询字符串。<o:p></o:p>

Location.href() ＝ location.assign() ＝ Location.replace()（不能后退）<o:p></o:p>

Location.reload(false) 从缓存中重载，true为服务器端载入。默认false。<o:p></o:p>

toString()，返回location.href的值。 <o:p></o:p>

<o:p> </o:p>

Navigator对象<o:p></o:p>

该对象包含大量有关web浏览器的信息，是window对象的属性。<o:p></o:p>

appCodeName, appName, appMinorVersion, appVersion,browserLanguage,<o:p></o:p>

cookieEnabled, cpuClass javaEnabled(),language,mimeTypes,online<o:p></o:p>

oscpu,platform,plugins,preference(),product,productSub,opsProfile,<o:p></o:p>

securityPolicy,systemLanguage,taintEnabled(),userAgent,userLanguage,<o:p></o:p>

userProfile,vendor,vendorSub.<o:p></o:p>

Screen 对象<o:p></o:p>

获取某些关于用户屏幕的信息。<o:p></o:p>

availHeigh――窗口可以使用的屏幕的高度，包括操作系统元素（如windows工具栏）需要的空间。<o:p></o:p>

availWidth――可以使用的屏幕的宽度<o:p></o:p>

colorDepth――用户表示颜色的位数。大多32位。<o:p></o:p>

Height――屏幕的高度，以象素计。<o:p></o:p>

Width――屏幕的宽度。<o:p></o:p>

<o:p> </o:p>

DOM<o:p></o:p>

Document――最顶层的节点，所有的其他节点都是附属于它的。<o:p></o:p>

Document――DTD引用（使用语法）的对象表现形式。它不能包含字节点。<o:p></o:p>

DocumentFragment――可以像Document一样来保存其他节点。<o:p></o:p>

Element――表示起始标签和结束标签之间的内容。可以同时包含特性和子节点的节点类型。<o:p></o:p>

Attr――代表一对特性名和特性值。<o:p></o:p>

Text――代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。<o:p></o:p>

CDataSection――的对象表现形式。这个节点类型仅能包含文本节点作为子节点。<o:p></o:p>

Entity――表示在DTD中的一个实体定义，例如。<o:p></o:p>

EntityReference――代表一个实体引用，例如"。<o:p></o:p>

ProcessingInstruction――代表一个PI。<o:p></o:p>

Comment――代表XML注释。<o:p></o:p>

Notation――代表在DTD中定义的记号。<o:p></o:p>

<o:p> </o:p>

Node接口定义了所有节点类型都包含的特性和方法。<o:p></o:p>

nodeName, nodeValue; nodeType,ownerDocument,firstchild,lastchild,childNodes,<o:p></o:p>

previousSibling,nextSibling,haschildNodes(),attributes,appendchild(node),removechild(node),replacechild(new,old),insertBefore(new,ref);<o:p></o:p>

访问相关的节点<o:p></o:p>

Document.documentElement 访问元素<o:p></o:p>

检测节点类型
例如 document.documentElement.nodeType IE不支持node定义的常量。<o:p></o:p>

处理特性<o:p></o:p>

getNamedItem(name)――返回nodeName属性值等于name的节点。<o:p></o:p>

removeNamedItem(name)<o:p></o:p>

setNamedItem(node)<o:p></o:p>

item(pos)――像NodeList一样，返回在位置pos的节点。<o:p></o:p>

例如：

1”>hello world!

<o:p></o:p>

假设op包含指向这个元素的一个引用，可以这样访问id特性的值<o:p></o:p>

op.attributes.getNamedItem(“id”).nodeValue;<o:p></o:p>

这种方法有些累赘，DOM又定义了三个元素方法来帮助访问这些特性<o:p></o:p>

getAttribute(name) setAttribute(name,newvalue) removeAttribute(name) <o:p></o:p>

上面的例子可以这样表示 op.getAttribute(“id”);<o:p></o:p>

<o:p> </o:p>

访问指定节点<o:p></o:p>

getElementsByTagName()<o:p></o:p>

getElementsByName()<o:p></o:p>

getElementsById()<o:p></o:p>

<o:p></o:p>

创建和操作节点<o:p></o:p>

1常用的几个方法<o:p></o:p>

createDocumentFragment() createElement() createTextNode() <o:p></o:p>

2 创建一个新节点 createElement() createTextNode() appendChild()<o:p></o:p>

3 removechild() repalacechild() insertBefore() <o:p></o:p>

4 createDocumentFragment() 创建一个文档碎片把所有的新节点附加其上，一次刷新。<o:p></o:p>

<o:p> </o:p>

HTML DOM特征功能<o:p></o:p>

0” /><o:p></o:p>

核心的DOM 获取和设置src和border属性，那么要用getAttribute（）和setAttribute（）<o:p></o:p>

HTML DOM可以使用同样名称的属性来获取和设置这些值。<o:p></o:p>

oImg.src oImg.border<o:p></o:p>

唯一特性名和属性名不一样的是class属性，它是用来指定应用于某个元素的一个CSS类，用className代替。<o:p></o:p>

<o:p> </o:p>

table方法<o:p></o:p>

元素添加了以下内容：<o:p></o:p>

caption――指向

元素的集合<o:p></o:p>
tFoot ―― 指向
元素<o:p></o:p>
tHead           rows     createTHead()   createTFoot() createCaption()<o:p></o:p>

deleteTHead()   deleteTFoot()   deleteCaption()   deleteRow(position)<o:p></o:p>

insetRow(position)   <o:p></o:p>

元素添加了以下内容：<o:p></o:p>
rows ――
中所有行的集合<o:p></o:p>
deleteRow(position) insertRow(position) <o:p></o:p>

元素中添加了以下内容:<o:p></o:p>
cells ――
元素中所有的单元格的集合<o:p></o:p>
deleteCell(position)   insertCell(position)<o:p></o:p>

遍历DOM<o:p></o:p>

NodeIterator<o:p></o:p>

   Document的createNodeIterator()方法创建,接受四个参数<o:p></o:p>

Root―――从树中开始搜索的那个节点<o:p></o:p>

whatToShow------一个数值代码，代表哪些节点需要访问<o:p></o:p>

filter―――NodeFilter对象，用来决定需要忽略哪些节点<o:p></o:p>

entityReferenceExpansion-----布尔值，表示是否需要扩展实体引用。<o:p></o:p>

<o:p> </o:p>

TreeWalker<o:p></o:p>

   它有NodeIterator所有的功能，并且添加了一些遍历方法：<o:p></o:p>

parentNode()   firstChild()   lastChild() nextSibling() previousSibling() <o:p></o:p>

<o:p> </o:p>

<o:p> </o:p>

高级DOM
<

分享到：